Material Design入门

来源:互联网 发布:图纸绘制软件 编辑:程序博客网 时间:2024/06/05 20:32

该文档翻译自 Android 5.0 文档中对 Material Design 的介绍,原文地址:http://developer.android.com/training/material/get-started.htm

入门

使用Material Design创建应用步骤:

  1. 回顾 Material Design 规范.
  2. 为你的应用使用 Material 主题
  3. 创建遵循 Material Design 指导的布局
  4. 指定视图的高度(elevation)来投射阴影
  5. 使用系统组件创建列表和卡片
  6. 在你的应用里自定义动画

保持向后兼容性

当你为 Android5.0 之前的版本进行兼容维护时,你仍可以添加许多 Material Design 特性到你的应用,详情请查看维护兼容性。

使用Material Design更新你的应用

使之前已经存在的应用更新合并为 Material Design 样式的应用,更新你的布局使其遵循 Matereial Design 指导。也不要忘记为你的应用使用深度,触摸反馈,和动画这些新特性。

使用Material Design创建新应用

如果你使用 Material Design 特性创建一个新应用,Material design 指南提供了一个高聚合的设计框架。遵循这些指导并使用该Android框架下的新函数来设计和开发你的应用。

应用Material 主题

要将 Material 主题应用到你的应用,指定一个 样式(Style) 继承 android:Theme.Material :

<!-- res/values/styles.xml --><resources>  <!-- 继承了 material theme 的样式-->  <style name="AppTheme" parent="android:Theme.Material">    <!-- 项目自定义项 -->  </style></resources>

Material 主题会更新系统组件,并可以让你设置这些组件的调色板和默认触摸反馈以及Activity过渡动画。更多信息,请查看使用Material 主题。

设计你的布局

除了应用和自定义 Material 主题,你的布局需要符合 Material Design 指南。在设计布局时,特别注意以下几点:

• 基准网格(Baseline grids)
• 边框(Keylines)
• 间距(Spacing)
• 触摸目标的尺寸 (Touch target size)
• 布局结构(Layout structure)

为你的视图指定高度(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  属性让你能创建一个反映视图高度临时变化的动画。当对触摸手势进行响应时可以使用该高度变化动画。

更多信息,参考定义阴影和裁剪视图。

创建列表和卡片

RecyclerView 是有更好扩展性的ListView 版本,它提供了对不同布局类型的支持和更好的性能改良。CardView 使用了跨应用统一外观的卡片来展示你的碎片化信息。下面的代码示例演示了如何在你的布局中使用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 可以在你的应用中创建自定义动画。例如,你可以启用 Activity 过渡并在 Activity 中定义退出过渡动画。

public class MyActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        // 启用过渡        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 启动另一个 Activity 时,退出过渡动画就会启动。 关于新动画 API 的更多信息,查看定义自定义动画。

0 0
原创粉丝点击