如何在 xamarin.forms 中使用 android 材料设计？

Question

我在 Xamarin.form 中使用可移植类。我想在我的 android 和 ios 移动应用程序中使用材料设计。但我无法获得任何好的资源来在 xamarin.forms 中使用材料设计。

Answer 1

有一个关于将 AppCompat 添加到 Xamarin.Forms 应用程序here 的指南。这将有助于支持材料设计主题。

1. 确保您使用的是 >= Xamarin.Forms 2.0
2. 确保您的 Android 项目针对 Android 6.0 (API 23) 或更高版本进行编译

1. 添加新主题以支持 Material Design

资源/值/colors.xml

<resources>
  <color name="primary">#2196F3</color>
  <color name="primaryDark">#1976D2</color>
  <color name="accent">#FFC107</color>
  <color name="window_background">#F5F5F5</color>
</resources>

资源/值/style.xml

<resources>
  <style name="MyTheme" parent="MyTheme.Base">
  </style>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primaryDark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:windowBackground">@color/window_background</item>
    <item name="windowActionModeOverlay">true</item>
  </style>
</resources>

资源/values-v21/style.xml

<resources>
  <style name="MyTheme" parent="MyTheme.Base">
    <!--If you are using MasterDetailPage you will want to set these, else you can leave them out-->
    <!--<item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>-->
  </style>
</resources>

4. 更新 MainActivity 的 [Activity] 属性

在属性中添加Theme="@style/MyTheme"

5. 添加工具栏和选项卡布局

在您的 Resources/layout 目录中创建 2 个新文件。

资源/布局/tabs.axml

<android.support.design.widget.TabLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:tabIndicatorColor="@android:color/white"
    app:tabGravity="fill"
    app:tabMode="fixed" />

资源/布局/toolbar.axml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways" />

6. 最后，再次更新 MainActivity

   public class MainActivity : FormsAppCompatActivity // 是 FormsApplicationActivity

也更新OnCreate 方法：

protected override void OnCreate(Bundle bundle)
{
  // set the layout resources first
  FormsAppCompatActivity.ToolbarResource = Resource.Layout.toolbar;
  FormsAppCompatActivity.TabLayoutResource = Resource.Layout.tabs;

  // then call base.OnCreate and the Xamarin.Forms methods
  base.OnCreate(bundle);
  Forms.Init(this, bundle);
  LoadApplication(new App());
}