Material Design开发文章系列2：在你的App中实现Material Design

----------------------------系列文章概要---------------------------------------

Material Design出现之后国外网站上出现和很多关于Material Design的设计与开发文章，有很多是重复的，google官方博客将这些文章搜集整理成了几篇比较经典的文章，我认为对于开发者来讲，只需要知道其中三篇就能掌握绝大多数知识了。这三篇文章的原文地址分别是（当然翻墙是必须的）：

http://android-developers.blogspot.hk/2014/10/appcompat-v21-material-design-for-pre.html

http://android-developers.blogspot.hk/2014/10/implementing-material-design-in-your.html

http://android-developers.blogspot.hk/2014/10/material-design-on-android-checklist.html

还好这三篇文章都被翻译了出来，而且还算是比较优质的翻译。后两篇主要从整体设计介绍了一个标准的Material Design的App应该遵循哪些设计标准，并告诉你如何在你的代码中实现，并介绍了如何向前兼容。其实后两篇在整体结构上是差不多的，只是在Implementing material design in your Android app中，侧重的是Material Design的设计标准，而Material Design on Android Checklist则侧重的是实现细节和注意事项。

其余两篇译文文非别是：

Material Design开发文章系列1：AppCompat V21：将 Materia Design 兼容到于5.0之前的设备

Material Design开发文章系列3:Material Design Check List

正文

Material Design开发文章系列-2：在你的App中实现Material Design

Material design 是一种达到可视化，交互性，动效以及多屏幕适应的全面设计。Android 5.0 Lollipop和已经更新的support libraries将会帮助你构建Material UI。这里提供了一些API和Widget帮助你实现MaterialDesign设计。

一、Tangible Surfaces 有型的外观

UI由数字化的纸墨构成。表层和它带有的阴影为应用提供了可视化的效果。你可以触摸并观察他的运动，这个数字化的设计具有移动，扩张，或者转换的能力，帮助你创建灵活的UI。

1.1 Shadows

表面的位置和深度导致了在亮度和阴影方面的微弱变化。新的elevation 属性允许你在Z轴上指定View的位置，然后框架会为该View底部的items加上实时的动态阴影。你可以在布局中明确的以dp为单位设置它的高度。

<ImageView …
    android:elevation="8dp" />

你也可以在代码中通过getElevation()/setElevation()设置。阴影是添加到轮廓上的，默认来自背景。比如，你可以设置一个圆形的drawable作为floating action button的背景。它会自动转化成适当的阴影。如果你需要手指去控制一个View的阴影，可以设置一个ViewOutlineProvider，它允许你在getOutline()中提供一个自定义的Outline.

1.2 Cards

对于创建带有不同信息内容的碎片，Cards是一种常见的模式。supportV7下的CardView可以帮助你方便的实现，并提供了轮廓和阴影。

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!-- Your card content -->
</android.support.v7.widget.CardView>

CardView继承自FrameLayout并提供了默认的elevation 和圆角，使得cards在不同的平台间保持一致。你也可以通过cardElevation和cardCornerRadius属性自定义它们的值。注意，Cards不是唯一实现维度效果的方式，你应该警惕过度的使用Cards:http://www.google.com/design/spec/components/cards.html#cards-usage

二、Print-like Design 打印式风格

Material利用了经典的打印设计，使内容前部和中心的布局变得整洁和简约。刻意大胆的颜色选择，刻意的空白，美观的印刷风格和强烈的格子线条为你创建一种有层次有意义有焦点的效果。

2.1 Typography 活字印刷
Android 5.0更新了Roboto样式，不论多大的text，展示起来都会美观和简洁。添加了一种新的中等高度属性(android:fontFamily=”sans-serif-medium”) 和新的AppAppearance样式为了平衡内容密度和阅读的舒适感,实现了推荐的打印式缩放的。比如你可以简单的通过 android:textAppearance=”@android:style/TextAppearance.Material.Title” 设置 “Title"风格。在旧的版本中可以使用AppCompat support library的样式： “@style/TextAppearance.AppCompat.Title”.

2.2 Color
调色板为你的应用带来了品牌营销和个性化，通过以下属性可以方便的控制UI的着色：

主调色彩：主调色彩是用于应用品牌推广的色彩。作为action bar的背景色最近的任务title和其它边缘效果。
强调色彩：鲜明的扩展了主调色彩。应用于框架的控制。比如EditText，Switch
主调的暗色： Darker作为主调色彩的加深，应用于状态栏 status bar.

更多用于控制色彩的属性，可以参考：colorControlNormal.colorControlActivated.colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor and navigationBarColor.
AppCompat 为以上功能提供了大量的子集，允许你为Lollipop之前的系统控制色彩。

2.3 Dynamic color 动态的色彩

Material Design 鼓励动态色彩的使用，特别是当你拥有丰富的iamge的时候。新的Palette的support library 支持从图片中抽取一小部分的色彩去设计你的UI。创造出一种更逼真的体验。你也可以添加动静的结合效果，比如前部的text color的变化，如下两种TextView部分色彩的切换：

三、Authentic Motion 真实的动效

有型的表面不应该像电影中的跳跃式的切换，它们的移动应该帮助引导用户的焦点，建立控件关系以及保持连贯性。Meterial 响应触摸事件去确认你的交互，所有的变化会从你的Touch点辐射开来。所有的运动都是有意义并且友好的，有助于用户更好的理解。

3.1 Activity + Fragment切换
通过声明“shared elements" ，在两种状态之间你可以创建一个平滑的切换，
album_grid.xml

…
    <ImageView
    …
    android:transitionName="@string/transition_album_cover" />

album_details.xml

…
    <ImageView
    …
    android:transitionName="@string/transition_album_cover" />

AlbumActivity.java

Intent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
…
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
    albumCoverImageView,   // The view which starts the transition
    transitionName    // The transitionName of the view we’re transitioning to
    );
ActivityCompat.startActivity(activity, intent, options.toBundle());

这里我们在两个不同的屏幕间定义了相同的transitionName 。当你启动一个新的Activity，它的切换将会自动的动画起来。对于进入和退出的元素，你可以自由编排。

3.2 Ripples（涟漪）

Materials以一种泼墨的涟漪的方式响应用户的触摸事件。你可以通过使用或者继承Theme.Material主题，即可达到这种默认的效果。你可以通过简单的封装将这种ripple效果添加到自己的drawables上。自定义View应该使用 View#drawableHotspotChanged 回调方法把touch的位置传播到它们的drawables上，以便ripple可以知道起始点。

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/accent_dark">
   <item>
    <shape
        android:shape="oval">
        <solid android:color="?android:colorAccent" />
    </shape>
    </item>
</ripple>

3.3 StateListAnimator

Materials 也响应了用户抬起手指的操作。类似磁铁吸引的效果。你可以通过tranlationZ属性实现。它类似于elevation属性，但主要是用于时间较短，转瞬即逝的效果，比如 Z = elevation + translationZ。这个新的stateListAnimator 属性允许你在用户touch的时候简单的在translationZ上动画。button默认会有这种效果。

layout/your_layout.xml

<ImageButton …
    android:stateListAnimator="@anim/raise" />
anim/raise.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true" android:state_pressed="true">
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="@dimen/touch_raise"
        android:valueType="floatType" />
    </item>
    <item>
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="translationZ"
        android:valueTo="0dp"
        android:valueType="floatType" />
    </item>
</selector>

3.4 Reveal
material 过渡效果中的一个标志是通过延伸一个圆形的面板来展示新的内容。增强了作为所有转换起点的触摸点, 它是迅速向外扩散的. 你可以使用下面的Animator来实现：

Animator reveal = ViewAnimationUtils.createCircularReveal(
            viewToReveal, // The new View to reveal
            centerX,      // x co-ordinate to start the mask from
            centerY,      // y co-ordinate to start the mask from
            startRadius,  // radius of the starting mask
            endRadius);   // radius of the final mask
reveal.start();

3.4 Interpolators 插值器

运动应该是慎重的，平滑且精确的。而不是简单的渐入渐出。在 Material Design中，对象更倾向于快速的并舒适的启动。通过下面的示例可以看到，在将要到达终点前的那段位置花费了更少的时间。总的来说，用户不会等待较长时间，运动的负面效果就变得最小化了。有一种新的插值器，可以达到这种效果https://developer.android.com/reference/android/R.interpolator.html?utm_campaign=L-Developer-launch#fast_out_slow_in

对于进入和退出屏幕效果，请分别参考： linear-out-slow-in 和 fast-out-linear-in interpolators respectively.

四、Adaptive Design (and UI Patterns)

material 最终的核心概念是创建一种自适应于不同大小形状设备的设计，从手表到TV。自适应设计技术帮助我们实现了不同的设备但相同的底层系统体现为不同的View。每个View对那个设备来说，都是量身定做的。色彩，图片，层次，空间的相对关系都保持不变。material design 系统提供了便利的组件和模式帮你构建一个如此有扩展性的设计

Toolbar

与Actionbar很类似，但是更加方便，不同于标准的Action bar，toolBar就像View层级中的任何一个东西。因此你可以在任何地方进行放置，与其它的View交错，移动，对滑动事件的响应等等。你可以通过调用Activity,setActionBar()方法把ToolBar作为你的Activity的ActionBar.

在这个例子中，蓝色的toolbar是一个可扩展高度，覆盖在屏幕内容上侧并且提供了导航按钮。注意：在这个列表和细节中，使用的ToolBar超过了2个。

Material Design 让你的应用具有可理解，美观，逼真的动效及自适应的能力。希望你可以遵从这些设计原则并通过上述提供的new API和一些兼容库帮助你的App实现Material Design。