开始使用Material Design
最后更新于:2022-04-01 01:45:10
> 编写: [allenlsy](https://github.com/allenlsy) - 原文: [https://developer.android.com/training/material/get-started.html](https://developer.android.com/training/material/get-started.html)
要创建一个 Material Design 应用:
1. 学习 [Material Design 规格标准](http://www.google.com/design/spec/material-design/introduction.html)
1. 应用 Material Design 主题
1. 创建符合 Material Design 的 Layout 文件
1. 定义视图的 elevation 值来修改阴影
1. 使用系统组件来创建列表和卡片
1. 自定义动画
#### 维护向下兼容性
你可以添加 Material Design 特性,同时保持对 Android 5.0 之前版本的兼容。更多信息,请参见[维护兼容性章节](https://developer.android.com/training/material/compatibility.html)。
#### 使用 Material Design 更新现有应用
要更新现有应用,使其使用 Material Design,你需要翻新你的 layout 文件来遵从 Material Design 标准,并确保其包含了正确的元素高度,触摸反馈和动画。
#### 使用 Material Design 创建新的应用
如果你要创建使用 Material Design 的新的应用,Material Design 指南提供了一套跨平台统一的设计。请遵从指南,使用新功能来进行 Android 应用的设计和开发。
### 应用 Material 主题
要在应用中使用 Material 主题,需要定义一个继承于 `android:Theme.Material` 的 style 文件:
~~~
<!-- res/values/styles.xml -->
<resources>
<!-- your theme inherits from the material theme -->
<style name="AppTheme" parent="android:Theme.Material">
<!-- theme customizations -->
</style>
</resources>
~~~
Material 主题提供了更新后的系统组件,使你可以设置调色板和在触摸和 [Activity](# "An activity represents a single screen with a user interface.") 切换时使用默认的动画。更多信息,请参见 [Material 主题](http://developer.android.com/training/material/theme.html) 章节。
### 设计你的 Layouts
另外,要应用自定义的 Material 主题,你的 layout 应该要符合 [Material 设计规范](http://www.google.com/design/spec)。在设计 Layout 时,尤其要注意一下方面:
- 基准线网格
- Keyline
- 间隙
- 触摸目标的大小
- Layout 结构
### 定义视图的 Elevation
视图可以投射阴影, elevation 值决定了阴影的大小和绘制顺序。要设定 elevation 值,请使用 `android:elevation` 属性:
~~~
<TextView
android:id="@+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/next"
android:background="@color/white"
android:elevation="5dp" />
~~~
新的 `translationZ` 属性使得你可以设计临时变更 elevation 的动画。elevation 变化在做触摸反馈时很有用。
更多信息,请参见定义阴影和 Clipping 视图章节。
### 创建列表和卡片
[RecyclerView](http://developer.android.com/reference/android/support/v7/widget/RecyclerView.html) 是一个植入性更强的 ListView,它支持不同的 layout 类型,并可以提升性能。[CardView](http://developer.android.com/reference/android/support/v7/widget/CardView.html) 使得你可以在卡片内显示一部分内容,并且和其他应用保持外观一致。以下是一段样例代码展示如何在 layout 中添加 CardView
~~~
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
</android.support.v7.widget.CardView>
~~~
更多信息,请参见列表和卡片章节。
### 自定义动画
Android 5.0 (API level 21) 包含了新的创建自定义动画 API。比如,你可以在 [activity](# "An activity represents a single screen with a user interface.") 中定义进入和退出 [activity](# "An activity represents a single screen with a user interface.") 时的动画。
~~~
public class MyActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// enable transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
setContentView(R.layout.activity_my);
}
public void onSomeButtonClicked(View view) {
getWindow().setExitTransition(new Explode());
Intent intent = new Intent(this, MyOtherActivity.class);
startActivity(intent,
ActivityOptions
.makeSceneTransitionAnimation(this).toBundle());
}
}
~~~
当你从当前 [activity](# "An activity represents a single screen with a user interface.") 进入另一个 [activity](# "An activity represents a single screen with a user interface.") 时,退出切换动画会被调用。
想学习更多新的动画 API,参见[自定义动画章节](http://developer.android.com/reference/android/view/View.html#setSystemUiVisibility(int))。