（译）初识Material Design

2017-03-11

本文介绍了Material Design设计规范，包含的组件和示例应用等。

随着Android 5.0的发布，带来了新的Android UI设计规范。这些规范称为“material design”。本文专门讲解材料设计。

什么是Material Design？

什么是完全地”Material Design”？这很难有一个答案因为更新的范围太广了。一个具体的突出材料设计的应用将包括下面的元素：

1.充满活力的配色方案
2.更新过的图标
3.列表使用RecyclerView并且item使用CardViews
4.使用新的App Toolbar
5.使用CoordinatorLayout处理滚动行为
6.Floating Action Buttons
7.为触摸反馈添加水波纹动画
8.页面切换时使用共享元素变形过渡
9.View 的高度和阴影
10.更新过的对话框样式

这些只是实现材料设计中突出的几点。想要更深入的了解，请观看Yash Prabhu的 Material Design Primer或Nidhi Shah的Living in a Material World。

设计规范

这个新的框架对于Android应用界面包含几个改变并且Google强烈鼓励采用下面这些新的原则:

Material Design Guidelines - 材料设计规范指南
Material Design Docs - 材料设计概览
Highly Simplified Material Design For Developers - 为开发者简化了规范
Material Design for Developers - 材料设计开发指南
Material Design Examples - 材料设计示例
Material Palette - 很方便地获取材料设计规范颜色
Material Design Icons - 标准的材料设计ICONs

使用这些材料，你能理解并在你自己的应用坚持这些规范。

示例代码

这有一些不同种类的材料设计最佳实践的应用包括：

Plaid - 展示了Google的材料设计和动画
Topeka - Google出品材料设计示例应用
Google IO Schedule - Google出品现代Android UI示例应用
Timber - 现代音乐播放器展示了很漂亮的材料设计
Opengur - Android imgur viewer 展示了现代UI模型
Slide - 材料设计的Reddit Android应用
Awesome-MaterialDesign - 列出了受欢迎的材料设计类库和示例应用

希望这些示例应用能给你探索材料设计一个坚实的起点。

配置

当切换到新的材料设计主题，你并不能支持很多不能升级到Android 5.0的老设备。这就是Material Support Library存在的原因。

Google发布了一个方便的Material Design Checklist来确保你已经应用了必要的步骤符合材料设计规范。

引入Support Library

默认情况下，使用Android Studio创建的应用自动开启材料设计的支持。然而，我们之前的应用怎么办？我们应该怎样让它们支持材料设计？查看这个迁移指南。

Design Support Library

在2015年6月，Google发布了Design Support Library帮助简化使用大量的材料设计组件，包括抽屉导航，悬浮标签，悬浮按钮，snackbars和配合动作和滚动事件的新框架。跟随配置指南利用好这些新的UI组件。

修改应用主题

在values/styles.xml文件中修改应用主题继承自Theme.AppCompat并且应用材料设计颜色属性：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <!-- colorPrimary is used for the default action bar background -->
  <item name="colorPrimary">@color/primary</item>
  <!-- colorPrimaryDark is used for the status bar -->
  <item name="colorPrimaryDark">@color/primary_dark</item>
  <!-- colorAccent is used as the default value for widgets -->
  <item name="colorAccent">@color/accent</item>
  <!-- Default color of the text in your views  -->
  <item name="android:textColorPrimary">@color/textPrimary</item>
</style>

这些颜色和下图一一对应：

如果需要进一步自定义你也可以重写这些属性：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <!-- ... styles above ... -->
  <!-- Applies to views in their activated state (i.e checked or switches) -->   
  <item name="colorControlActivated">@color/colorActivated</item>      
  <!-- Applied to framework control highlights (i.e ripples or list selectors) -->
  <item name="colorControlHighlight">@color/colorHighlight</item>  
  <!-- Default color of the status bar at the top of your device  -->
  <item name="android:statusBarColor">@color/primaryDark</item>
  <!-- Default color of the navigation bar at the bottom of your device  -->
  <item name="android:navigationBarColor">@color/primary</item>
</style>

支持材料设计可用的Theme.Appcompat包括：Theme.AppCompat, Theme.AppCompat.Light, Theme.AppCompat.Light.DarkActionBar, Theme.AppCompat.DeviceDefault, Theme.AppCompat.DeviceDefault.Light, Theme.AppCompat.DeviceDefault.Light.DarkActionBar。

继承AppCompatActivity

AppCompatActivity是FragmentActivity的一个子类，因此从之前的支持库使用FragmentActivity应该没什么问题：

1
2
3

public class HomeActivity extends AppCompatActivity {
    // Implementation
}

使用ActionBar

关于怎样使用AppCompatActivity配置ActionBar的兼容的更多细节请查看我们的ActionBar使用指南，包括修改所有的menu文件使用app:showAsAction而不是android:showAsAction。

一旦你切换到AppCompatActivity，你需要getSupportActionBar访问ActionBar而不是getActionBar：

1 2	getSupportActionBar.show(); // 正确 getActionBar.hide(); // 错误

除此之外，ActionBar的样式需要使用材料设计支持的样式修改而不是传统的ActionBar样式。

图标

随着Android 5.0的发布，在现代Android应用中为icon提升了视觉设计样式。Google为开发者提供了一些material design icons。你应该下载这个仓库并且获取有用的文件。

Material Icons Guide

开源社区materialdesignicons icon网站也有大量的material icons。感谢support design library最近的更新，你可以导入这些icon作为可缩放的矢量图形（.svg）文件，解决了为不同分辨率需要导入不同的图片文件。

对于Android 5.0之前的设备确保通过配置说明添加了vector drawable support。Material Design icons在Vector Drawable XML格式中已经可用，不同于.SVG文件。另外，你也可以下载.SVG文件，在res/drawable文件夹上右击，选择Vector Asset选项导入这些.svg文件为Vector Drawable XML，其它任何drawable也可以用。