天天看点

使用Material Design 创建App翻译系列----开始学习篇

从今天开始我就来翻译官方网站上关于针对开发者材料设计相关的文章,官方地址:http://developer.android.com/intl/zh-cn/training/material/index.html

第一次翻译,有翻译不好的地方还请指出,大家一起共同进步。下面进入正题:

使用Material Design创建App的建议:

1. 复习Material Design 规范文档。(此处链接需要翻墙)(中文的规范文档)

2. 申请使用Material主题到你的应用中。

3. 根据Material Design的指导方针来创建你的布局。

4. 指定视图控件的elevation属性来表示视图的阴影。

5. 使用系统小部件,如:列表和卡片。

6. 在应用里自定义动画。

保证向后的兼容性

你可以添加许多材料设计的产品特性到应用中,使得应用保证在比5.0更早的安卓系统版本上的兼容性。更多详情,请看:保证和维持兼容性。

使用材料设计来更新你的应用

更新现有的应用去融合材料设计的风格,根据材料设计的指导来更改应用的布局。也确保视图深度、触摸事件反馈以及动画的进一步融合。

使用材料设计来创建新的应用

如果你正在使用材料设计的产品特征来创建新的应用,那材料设计指导方针规范给你提供了一个贴切的设计框架。跟随这些指导,在安卓的框架中使用新的功能去设计和开发你的应用。

申请使用Material主题

要在你的应用中使用Material主题,首先要继承 android:Theme.Material来指定一种样式:

<!-- res/values/styles.xml -->
<resources>
    <!-- 从Material主题里继承作为你的主题样式 -->
    <style name=”AppTheme”  parent=”android:Theme.Material”>
        <!-- 主题的自定义 -->
    </style>
</resources>
           

材料主题提供了更新的系统组件,它允许你为触摸反馈和activity的过渡转换设置颜色和默认动画。详情请看:材料主题的使用

设计你的布局

除了申请和自定义材料主题以外,你的布局也应该符合材料设计的指导规范。当设计布局的时候,应该特别注意一下几点:

1. 基准网格线

2. 边框

3. 间距

4. 触摸目标大小

5. 布局结构

在应用视图里指定elevation

这个属性能使视图产生阴影效果,而且elevation值的决定着视图阴影的大小和绘制的顺序。在布局里通过android:elevation 属性来给视图设置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 level 21)包括了很多心的API用来在应用里创建自定义的动画。例如,你可以允许activity的过渡动画,在activity里声明一个退出的过渡动画:

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开启其它的activity的时候,这个退出的过渡动画就会被执行。

要想学习更多关于新动画的API,请看:声明自定义动画

以上翻译内容中外部链接的部分,以后会逐步翻译出来,目前链接是官方的网站,如果需要查看的朋友,请先翻墙。

继续阅读