使用 Material 主题

发表于 | 更新于: | 分类于 ，
阿里云产品限时红包，最高 ￥1888 元，立即领取。

这是来自 Google 官方的 Material Design 培训教程的翻译，受个人水平所限，难免有翻译不对的地方，欢迎交流指正。

新的 material 主题提供：

  • 可以设置调色板的系统组件。
  • 系统组件的触摸反馈动画。
  • 活动转场效果动画。

使用调色板，你可以根据自己的品牌标识来自定义 material 主题的外观。可以通过主题属性来为状态栏和 action bar 着色，如下图所示。

自定义 material 主题

系统组件拥有新的设计以及触摸反馈动画。你可以自定义应用程序的调色板，触摸反馈动画以及活动转场效果。

Material 主题定义如下：

  • @android:style/Theme.Material: 深色版本
  • @android:style/Theme.Material.Light: 浅色版本
  • @android:style/Theme.Material.Light.DarkActionBar

可使用的 material 风格列表，可以查看 R.style 的 API 引用。

图1 深色 material 主题

图2 浅色 material 主题

注意： Material 主题仅仅在 Android 5.0 (API 21) 及以上系统版本可用。 Support V7 兼容包 为一些组件提供了具备 material 设计风格的主题，以及自定义调色板的支持。更多信息，可以查看保持兼容性。

自定义调色板

为了自定义主题的基本颜色来适应自己的品牌，需要继承 material 主题，并使用主题属性来定义自己的自定义颜色。

1
2
3
4
5
6
7
8
9
10
11
12
<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant for the status bar and contextual app bars -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources>

自定义状态栏

Material 主题可以很方便的自定义状态栏，因此你可以指定一个颜色来适应自己的品牌并提供足够的对比来显示白色的状态栏图标。继承 material 主题，并且使用 android:statusBarColr 属性来为状态来设置自定义颜色。默认情况下， android:statusBarColor 继承 android:colorPrimaryDark 的值。

你也可以自己在状态栏上进行绘制。例如，你想要在一张照片上显示透明的状态栏，并且使用微薄的深色渐变来确保白色的状态栏图标可见。要实现这个功能，将 android.statusBarColor 属性设置为 @android:color/transparent 并且根据要求设置窗口标识。可以使用 Window.setStatusBarColor() 方法来设置动画或者淡出。

注意：状态栏大部分情况下应该有区别于主要工具栏的明显轮廓，除非你需要在工具栏后显示丰富的意象或者媒体内容，并且所使用的渐变需要保证图标依然可见。

当你自定义导航栏和状态栏时，你可以使两者都是透明的或者仅仅修改状态栏。其他情况下导航栏需要保持黑色。

主题个性视图

定义在 XML 布局中的元素可以指定 android:theme 属性，用来引用一个主题资源。这个属性为元素和其子元素修改主题，当要替换界面的某个部分的主题调色板时，这是很有用的。

原文：Using the Material Theme