如何在你的App中应用Material Design设计风格

译自 http://android-developers.blogspot.com/2014/10/implementing-material-design-in-your.html —— By NashLegend

原译文在个人Github上：https://github.com/NashLegend/ProjectBabel/blob/master/Implementing%20Material%20Design%20in%20Your%20Android%20app.md

关于如何在低版本Android上使用Material Design，能够看上篇：在低版本Android上使用Material Design。

Material Design对于多屏幕的视觉、交互和动做设计做了很大的改进。Android 5.0和最新的支持包能够帮助你建立Material风格的UI。这里将概述新的Material Design风格设计、新的API和组件，你能够将它们用在你的app中。

Tangible surfaces

在Material Design的世界中，UI是由电子纸和电子墨水构建起来的。这些UI的表面和阴影为应用程序的结构提供视觉线索（也就是根据样式能看出层次关系等等，好比下图），你看他的样子就知道哪里是可触摸的部分、就能够知道它将以何种方式运动（一样以下图）。这种Didital Material能够移动、扩张和变形以建立灵活的UI界面。

阴影

一个surface的位置和深度决定了其光影的微妙变化。你可使用新的elevation属性设置view在Z轴的位置，系统会依此在view后自动绘制出实时的动态阴影。你能够在layout XML里面设置elevation属性，单位是dip：

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

你也能够在代码中经过getElevation()/setElevation()（with shims in ViewCompat）方法操做elevation属性。View投身的阴影是由其轮廓决定的，而默认状况下这个轮廓是由background产生的。举个栗子：若是你为一个浮动按钮设置了一个圆形的shape drawable背景，那么它的阴影就是圆形的。若是你想能对阴影进行更详细的控制，你可使用ViewOutlineProvider来自定义其轮廓，经过getOutline()方法能够取得这个轮廓。

卡片

要显示一些不一样的信息，使用卡片是一个经常使用模式。你可使用新的支持包中的CardView轻松建立卡片式布局，新的CardView在低版本Android上也支持轮廓和阴影。

<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和圆角，这样卡片在不一样版本的系统上就拥有统一的表现。若有必要，你还能够经过设置cardElevation和cardCornerRadius自定义这些属性。可是卡片并非实现维度效果的不二法门，因此别滥用。

印刷样式的设计（Print-like Design）

Material Design借鉴了印刷设计以建立简明清晰的布局，将你的内容部分突出在前面和中间。大胆的配色、刻意的留白、精致的排版和强大的基线网格（a strong baseline grid）产生了具备层次感、有意义、突出重点的布局.

字体排版

Android 5.0升级了系统Roboto字体，如今不管字体大小，均可以漂亮整洁地显示字体。系统还新增了一个新的适用于中等字号(android:fontFamily=”sans-serif-medium”)，新的文本显示样式使用了备受好评的字体排版缩放以平衡内容密度的阅读温馨度。举个栗子：你能够经过设置android:textAppearance=”@android:style/TextAppearance.Material.Title”轻松地使用"Title"样式，能够经过AppCompat支持包在旧版本的Android系统上使用这种样式，举个栗子：“@style/TextAppearance.AppCompat.Title”。

颜色

应用的色调(color palette)会为你的应用带来品牌辨识度和个性化（好比一看见红色就想到可口可乐），如今大家能够经过设置下面的属性使得这些变得更加简单。

• colorPrimary. 应用的主色调、品牌颜色，用于ActionBar背景、最近运行任务界面标题以及边缘效果（好比说MIUI系统中可滚动元素滚动到边缘时出现的橙***）。

• colorAccent. 主色调的鲜亮补充色（Vibrant complement to the primary branding color），用于框架控件好比说EditText和Switch。（前面几句真别扭，所以注：colorAccent，不知道专业术语是啥，直译应该是突出的颜色，所以，EditText的颜色并非colorAccent，它获得焦点后的颜色才是colorAccent，还有Switch在打开时的颜色也是colorAccent，如上图）。

• colorPrimaryDark. 主色调的暗色版本，用于状态栏。

除了上面这些以外，你还能够对颜色进行更深刻精细的控制，参见colorControlNormal, colorControlActivated, colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor和navigationBarColor。

AppCompat支持上面功能的绝大部分，所以你能够将此应用在Android 5.0以前的系统中。

Dynamic color —— 动态颜色

Material Design鼓励使用动态颜色，尤为是你的应用中有不少图片时。新的Palette支持库能够提取图片中的一部分颜色来设置你的UI的样式来使界面颜色互相搭配以提供一种沉浸式体验。提取出来的调色板（palette）包括突出的和柔和的色调（vibrant and muted tones，参见下图文字后面变化的背景色），同时可取得最佳阅读体验的文本前景色（参见下图的变化的文字颜色）。举个栗子：

Palette.generateAsync(bitmap,
        new Palette.PaletteAsyncListener() {
    @Override
    public void onGenerated(Palette palette) {
         Palette.Swatch vibrant =
                 palette.getVibrantSwatch();
          if (swatch != null) {
              // If we have a vibrant color
              // update the title TextView
              titleView.setBackgroundColor(
                  vibrant.getRgb());
              titleView.setTextColor(
                  vibrant.getTitleTextColor());
          }
    }
});

一图胜千言。 

Authentic Motion —— 真实的运动

Tangible surfaces不会突兀地出现，他们出现的动做要引导用户注意力，要创建空间关联并保持连贯性。Material元素会对你的触摸事件作出响应以对本次交互进行确认，而后全部的变化将以你点击的位置为中心向外扩散。全部的动做都是有意义的和密切相关的，使用户易于理解。

Activity 和 Fragment 切换

经过声明两屏之间通用的共享元素，你能够在两种状态间建立流畅的切换。

一图胜千言：

示例代码：

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的时候，切换过程就自动开始了。除了共享元素以外，你也能够定义进入和退出元素。

Ripples ——波纹效果

Material风格的元素以一种波纹(ripple)扩散的方式响应用户的触摸。若是你使用了Theme.Material或者其派生的主题，那么交互性控件好比Button默认就会拥有这种效果（as will ?android:selectableItemBackground）。你也能够在你的drawable上使用这种效果——只要把它们放到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>

自定义view经过View#drawableHotspotChanged回调方法将点击位置传递过去，以便从点击的位置发起ripple效果。

StateListAnimator

当你触摸Material元素的时候，它也能够抬起（连接里的Lift on touch）以迎合你的手指，就像磁铁异性相吸同样。你能够经过translationZ属性动画来实现这种效果，translationZ属性与elevation类似，不过它的主要做用是作这些过渡效果。 Z = elevation + translationZ. 新的stateListAnimator属性轻松建立触摸时的Z轴动画(Buttons默认就有这效果):

示例代码：

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>

Reveal —— 打开内容

Material风格的app显示新内容的一个典型过渡效果是一个向外扩散的圆形遮罩。过渡动画以用户点击位置为圆心发起并向外扩散，你可使用下面这种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();

Interpolators —— 插值器

动做应该是合理的（deliberate）、迅速的、精确的。与普通的缓动效果不一样的是，在Material Design里，物体倾向于快速开始而后缓动到最终位置。在动画过程当中，物体在最终位置附近时的运动使用了更多的时间，所以用户没必要要为了等待动画结束花费更多时间，动画的负面效果被降到最低。这种动做使用的是一个新的快进慢出的插值器。

下面是一图胜千言时间： 

对于进入和离开屏幕的元素(which should do so at peak velocity)，分别使用linear-out-slow-in 分 fast-out-linear-in 插值器。

Adaptive design —— 自适应设计

Material Design最后一个核心概念是建立一个单独的自适应设计布局就能够适配小到手表大到电视的全部尺寸和形状（手表有圆有方）。自适应设计设计技术帮助咱们实现用同一个系统在不一样设备上展现不一样的外观。每一个view都会自适应不一样设备的尺寸的交互方式。 颜色、iconography,、层次、空间关系保持不变。Material Design系统提供了灵活的组件和模式以帮助你作到这一点。

Toolbar

Toolbar是ActionBar模式的通常化形式，它提供类似的功能以及更高的灵活性。与标准的ActionBar不一样，Toolbar就在你的view的结构层次中，你能够像操做其余的view彻底同样的操做它。你可使用Activity.setActionBar()方法让它变成你的ActionBar。

在这个例子里，蓝色的Toolbar很高，被屏幕内容覆盖而且提供了一个导航按钮。注意另外两个Toolbar分别用在List和详细内容界面（说这么多无非是为了说明Toolbar很灵活）。

欲知更多Toolbar的使用方式，看这里。

开始让你的应用Material化吧

Material Design帮助你建立易于理解的、漂亮的、自适应的、动起来的活的应用。但愿这篇文章能让你动心并将Material Design应用到你的app里。