准备开始

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

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

创建具有 material design 特性的应用程序，步骤如下：

  1. 审查 material design 规范。
  2. 应用 material 主题到应用程序。
  3. 根据 material design 指南创建布局。
  4. 确定视图的海拔来打造阴影。
  5. 为列表和卡片使用系统组件。
  6. 在应用程序中自定义动画。

维持向后兼容

你可以为应用程序添加许多 material design 特性，同时对低于 Android 5.0 的版本保持兼容。更多信息，可以查看 保持兼容性。

升级应用程序使之具备 material design

要升级已经存在的应用程序来包含 material design，根据 material design 指南来升级布局。同时确保包含深度，触摸反馈和动画。

创建具备 material design 的新应用程序

如果要创建一个具备 material design 特性的应用程序，material design 指南 提供了一个紧密结合的设计框架。按照这些指南，使用 Android 框架中的新特性来设计和开发应用程序。

应用 material 主题

要应用 material 主要到应用程序中，需要指定一种风格继承自 android:Theme.Material :

1
2
3
4
5
6
7
<!-- res/values/styles.xml -->
<resources>
  <!-- your theme inherits from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

Material 主题提供了升级过的系统组件来为触摸反馈和活动的转场效果设置调色和默认动画。更多信息，可以查看使用 Material 主题。

设计布局

除了应用和自定义 material 主题之外，布局需要与 material design 指南保持一致。在设计布局时，需要注意下面几点：

  • 基线表格
  • 注解行
  • 空白
  • 触摸目标尺寸
  • 布局结构

指定视图的海拔

视图可以打造阴影，视图的海拔值决定它的阴影尺寸以及它的绘制顺序。在布局中使用 android:elevation 属性来设置视图的海拔。

1
2
3
4
5
6
7
<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 属性可以用来创建动画来反映视图海拔的临时变化。当响应触摸事件时，海拔的改变会非常有用。

更多信息，可以查看定义阴影及裁剪视图。

创建列表和卡片

RecyclerView 是一个更加具有可插拔性的 ListView 版本，支持不同的布局类型，提供性能改进。 CardView 可以为不同的应用程序中在卡片内显示的信息提供一致的外观。下面的实例代码展示如何在布局中包含 CardView 。

1
2
3
4
5
6
7
<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 21) 包含用来在应用程序中创建自定义动画的新的 API 。例如，你可以在一个活动中启用活动的转场效果并定义一个退出的转场效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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());
    }
}

当你从这个活动启动另外一个活动时，退场效果将会被激活。

可以查看定义自定义动画来学些更多新的动画 API 。