Material Design详解

转： 

ANDROID L——Material Design详解（主题和布局）

ANDROID L——Material Design详解（视图和阴影）

ANDROID L——Material Design详解（UI控件）

ANDROID L——Material Design详解（动画篇）

Material Theme

使用Material主题：

Material主题只能应用在Android L版本。

应用Material主题很简单，只需要修改res/values/styles.xml文件，使其继承android:Theme.Material。如下：

<!-- res/values/styles.xml -->
<resources>
  <!-- your app's theme inherits from the Material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

或者在AndroidManifest.xml中直接设置主题：

android:theme="@android:style/Theme.Material.Light"

自定义Material主题：

material主题可以定义为如下形式：

• @android:style/Theme.Material 
• @android:style/Theme.Material.Light
• @android:style/Theme.Material.Light.DarkActionBar

对于其他主题风格可以参考API文档（android.R.style）

自定义颜色基调（color palette）

material可以根据自定的品牌风格，自定义主题的基础色调，如下（参考下方图片）：

<resources>
  <!-- inherit from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- Main theme colors -->
    <!--   your app's branding color (for the app bar) -->
    <item name="android:colorPrimary">@color/primary</item>
    <!--   darker variant of colorPrimary (for status bar, contextual app bars) -->
    <item name="android:colorPrimaryDark">@color/primary_dark</item>
    <!--   theme UI controls like checkboxes and text fields -->
    <item name="android:colorAccent">@color/accent</item>
  </style>
</resources>

自定义状态条和导航条：

material还允许你轻松的自定义状态条和导航条的颜色。

可以使用如下属性（参考下方图片）：

android:statusBarColor，Window.setStatusBarColor

兼容性：

由于Material Theme只可以在Android L Developer Preview中使用。

所以在低版本使用的话就需要为其另设一套主题：

在老版本使用一套主题 res/values/styles.xml，在新版本使用Material主题res/values-v21/styles.xml.

设计布局

Android L的一个重要的设计理念就是要在各种平台上创建一个统一的风格

在设计主题和布局之前，你首先要看一下 material design specification这篇文章（Google官方关于如何设计的文章）。

文章从Aniamation, Style, Layout, Components, Patterns, Usability, Resources等几方面非常详细的介绍了如何正确的设计界面。

Layout特点简述：

我个人简单理解（非常初级的理解）Android L的Material设计中Layout主要有以下几点：

Paper Craft（纸工艺）：

在material的设计中，每一个应用程序所绘制的像素都像驻留在一张纸上。

纸具有平坦的背景颜色，并且可以调整大小，以满足各种用途。一个典型的布局是由多张纸组成。

Floating Actions

浮动操作，我也不知道翻译成什么比较贴切。

我个人理解它主要作用是一个承上启下的浮动按钮，承接了两个布局或者不同功能的转换

Z轴：

Android L中相对于之前X，Y轴又新增了Z轴的概念，有了Z轴可以做出更加具有立体感的控件。

如下图是一个根据按钮状态来调整Z轴的高度

通过对布局中每个视图设置不同的Z轴可以使布局更具立体感，并且可以突出重点。

兼容性：

为了适应Material Design的变化，所以Android L版本的布局并不能和老版本的通用。

我们可以使用不同文件目录，来设置两套布局分别对应Android L和低版本：

res/layout/，res/layout-v21/

*************************************************************************************************************************************************************************

视图和阴影

View的大小位置都是通过x，y确定的，而现在有了z轴的概念，而这个z值就是View的高度（elevation），而高度决定了阴影（shadow）的大小。

View Elevation（视图高度）

View的z值由两部分组成，elevation和translationZ（它们都是Android L新引入的属性）。

eleavation是静态的成员，translationZ是用来做动画。

Z = elevation + translationZ

在layout中使用 android:elevation属性去定义 

在代码中使用 View.setElevation 方法去定义 

设置视图的translation，可以使用View.setTranslationZ方法 

新的ViewPropertyAnimator.z和ViewPropertyAnimator.translationZ方法可以设置视图的elevation值

新的属性值：translationZ允许你创建一个动画暂时的反应出View的高度值（elevation）变化。

这对于响应触摸手势很有用处，请看下面代码（官方Demo中的代码）：

int action = motionEvent.getActionMasked();
                /* Raise view on ACTION_DOWN and lower it on ACTION_UP. */
                switch (action) {
                    case MotionEvent.ACTION_DOWN:
                        Log.d(TAG, "ACTION_DOWN on view.");
                        view.setTranslationZ(120);
                        break;
                    case MotionEvent.ACTION_UP:
                        Log.d(TAG, "ACTION_UP on view.");
                        view.setTranslationZ(0);
                        break;
                    default:
                        return false;
                }

一个简单触摸监听，在点击和擡起的时候分别设置translationZ的值，效果如下图所示：

     

Shadows and Outlines（阴影和轮廓）

视图的背景边界决定了默认的阴影形状。轮廓（Outlines）代表了图形对象的外形状，并确定了对于触摸反馈的波纹区域。

在Android L中设置一个阴影很简单，只需要两点：

1.设置eleavation值

2.添加一个背景或者outline

可以在xml中通过定义一个背景来设置outline：

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

<!-- res/drawable/myrect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

也可以通过代码来创建一个outline：

/* Get the size of the shape from resources. */
int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);

/* Create a circular outline. */
mOutlineCircle = new Outline();
mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

/* Create a rectangular outline. */
mOutlineRect = new Outline();
mOutlineRect.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 10);

给视图设置一个outline(如果为了防止一个视图产生阴影可以设置outline为null)：

floatingShape.setOutline(mOutlineCircle);

上面的方法在Android L5.0正式版中已经被替换，下面我再介绍以下Android L5.0设置outline的方法：

ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        outline.setOval(0, 0, size, size);
    }
};
fab.setOutlineProvider(viewOutlineProvider);

下图是使用不同eleavation值产生的阴影效果：

下图是不同背景／轮廓产生的阴影和拖拽效果：

    

Drawable Tinting（着色）

对于Android L还有一个独特的特点就是现在可以定义图片的alpha遮罩，并且可以轻松的使用android:tint属性去调整色调。

下面是一个使用tint属性给背景调整不同颜色的例子：

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">
    <ImageView
        ...
        android:src="@drawable/xamarin_white"
        android:background="@drawable/mycircle"/>
    <ImageView
        ...
        android:src="@drawable/xamarin_white"
        android:background="@drawable/mycircle"
        android:tint="#2C3E50"/>
    <ImageView
        ...
        android:src="@drawable/xamarin_white"
        android:background="@drawable/mycircle"
        android:tint="#B4BCBC"/>
</LinearLayout>

效果图：

Clipping Views（裁剪视图）

可以使用View.setClipToOutline方法去剪切一个视图的outline区域。

只有rectangle,circle, 和round rectangle outlines支持裁剪（Outline.canClip方法用来判断是否可以裁剪）

为了裁剪一个可绘制的视图形状，需要先设置一个outline然后调用View.setClipToOutline方法：

floatingShape.setClipToOutline(true);

下面请看一个使用裁剪的例子：

int margin = Math.min(clippedView.getWidth(), clippedView.getHeight()) / 10;
Outline mClip = new Outline();
mClip.setRoundRect(margin, margin, clippedView.getWidth() - margin,
        clippedView.getHeight() - margin, margin / 2);
/* Sets the Outline of the View. */
clippedView.setOutline(mClip);
/* Enables clipping on the View. */
clippedView.setClipToOutline(true);

首先创建一个轮廓，给轮廓设置区域大小，添加轮廓到视图上，确认裁剪，效果图如下：

     

因为裁剪视图是一个很耗资源的操作，所以当裁剪一个视图时不要添加动画（为了达到这个效果可以使用Reveal Effect动画，动画篇会介绍）。

***********************************************************************************************************************************************************************************

UI控件

在Android L中新增了两个控件分别是RecyclerView，CardView：

RecyclerView：

RecyclerView是ListView的升级版，它提供了更好的性能而且更容易使用。

RecyclerView这个控件是一个可以装载大量的视图集合，并且可以非常效率的进行回收和滚动。当你list中的元素经常动态改变时可以使用RecyclerView控件。

RecyclerView非常容易使用，它提供了如下两个功能：

为每个条目位置提供了layout管理器（RecyclerView.setLayoutManager）

为每个条目设置了操作动画（RecyclerView.setItemAnimator）

下面的例子介绍了如何定义和使用一个RecyclerView：

1.在布局文件中添加一个RecyclerView

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2.初始化RecyclerView参数，设置layoutManager和adapter

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // improve performance if you know that changes in content
        // do not change the size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

3.创建一个adapter

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // Provide a reference to the type of views that you are using
    // (custom viewholder)
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        // set the view's size, margins, paddings and layout parameters
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.mTextView.setText(mDataset[position]);

    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

CardView：

CardView继承自FrameLayout，允许你在card视图中显示信息. CardView也可以设置阴影和圆角。（其实现在很多应用都自定义了Card视图，Google这回将card视图作为基本控件，可以拿来直接使用了）

Layout中为CardView设置圆角使用card_view:cardCornerRadius属性

代码中为CardView设置圆角使用CardView.setRadius方法

为CardView设置背景颜色使用card_view:cardBackgroundColor属性

在布局中包含一个CardView，如下：

<!-- A CardView that contains a TextView -->
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp">

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v7.widget.CardView>

兼容性：

RecyclerView，CardView都包含在Android L Developer Preview Support Library中，所以他们可以在之前的版本中使用，只会有一些限制。

***********************************************************************************************************************************************************************************

Material 动画

在Android L中新增了如下几种动画：

• Touch feedback（触摸反馈）
• Reveal effect（揭露效果）
• Activity transitions（Activity转换效果）
• Curved motion（曲线运动）
• View state changes （视图状态改变）
• Animate Vector Drawables（可绘矢量动画）

这篇文章先介绍上面6种中比较常用前三种，由于后三种现在资料不多，而且好像不是特别常用，等我研究明白了再给补上。

触摸反馈：

在Android L5.0中加入了触摸反馈动画。

其中最明显，最具代表性的就是波纹动画，比如当点击按钮时会从点击的位置产生类似于波纹的扩散效果。

波纹效果（Ripple）：

当你使用了Material主题后，波纹动画会自动应用在所有的控件上，我们当然可以来设置其属性来调整到我们需要的效果。

可以通过如下代码设置波纹的背景：

android:background="?android:attr/selectableItemBackground"波纹有边界

android:background="?android:attr/selectableItemBackgroundBorderless"波纹超出边界

使用效果如下：

B1是不设任何背景的按钮

B2设置了?android:attr/selectableItemBackground

B3设置了?android:attr/selectableItemBackgroundBorderless

设置颜色

我们也可以通过设置xml属性来调节动画颜色，从而可以适应不同的主题：

android:colorControlHighlight：设置波纹颜色

android:colorAccent：设置checkbox等控件的选中颜色

比如下面这个比较粉嫩的主题，就需要修改动画颜色来匹配(如何设置主题颜色请参考该系列第一篇文章)：

Circular Reveal:

Circular Reveal是一个Android L新增的动画效果，但我始终不知道如何翻译这个名字，圆形揭示？

使用方法：

应用ViewAnimationUtils.createCircularReveal()方法可以去创建一个RevealAnimator动画

ViewAnimationUtils.createCircularReveal源码如下：

public static Animator createCircularReveal(View view,
        int centerX,  int centerY, float startRadius, float endRadius) {
    return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
}

源码非常简单，就是通过createCircularReveal方法根据5个参数来创建一个RevealAnimator动画对象。

这五个参数分别是：

view 操作的视图

centerX 动画开始的中心点X

centerY 动画开始的中心点Y

startRadius 动画开始半径

startRadius 动画结束半径

根据下面的效果图和代码可以很容易的了解这几个参数的作用：

final View oval = this.findViewById(R.id.oval);
oval.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Animator animator = ViewAnimationUtils.createCircularReveal(
                oval,
                oval.getWidth()/2,
                oval.getHeight()/2,
                oval.getWidth(),
                0);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.setDuration(2000);
        animator.start();
    }
});

final View rect = this.findViewById(R.id.rect);

rect.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Animator animator = ViewAnimationUtils.createCircularReveal(
                rect,
                0,
                0,
                0,
                (float) Math.hypot(rect.getWidth(), rect.getHeight()));
        animator.setInterpolator(new AccelerateInterpolator());
        animator.setDuration(2000);
        animator.start();
    }
});

总结：

RevealAnimator和之前的动画使用没什么区别，同样可以设置监听器和加速器来实现各种各样的特效。

这些效果常用在视图的添加，删除，状态，大小改变的时候，以后我会写一个更直观详细的例子。

Activity Transition：

Activity Transition是Material Design中提供的一种动画效果。它通过运动和切换不同状态之间的元素来产生各种动画效果。

简介：

Activity Transition提供了两种Transition类型：

Enter（进入）：进入一个Activity的效果
Exit（退出）：退出一个Activity的效果

而这每种类型又分为普通Transition和共享元素Transition：

<span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">普通</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Transition</span><span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">：</span>

<span style="font-family: Arial, Helvetica, sans-serif;">explode：从场景的中心移入或移出
slide：从场景的边缘移入或移出
fade：调整透明度产生渐变效果</span>

<span style="font-size: 18px; font-family: Arial, Helvetica, sans-serif;">Shared Elements Transition 共享元素转换：</span>

它的作用就是共享两个acitivity种共同的元素，在Android 5.0下支持如下效果：

changeBounds -  改变目标视图的布局边界

changeClipBounds - 裁剪目标视图边界

changeTransform - 改变目标视图的缩放比例和旋转角度

changeImageTransform - 改变目标图片的大小和缩放比例

下面是我写的一个小演示Demo，相信大家看后就知道这几个动画是如何工作的了：

Activity Transition使用 ：

使用Activity Transition十分简单，只需要如下两个步骤：

步骤一：设置允许使用transition，并且设置transition

xml：

首先，如果要使用transition需要先修改style文件，在继承了material主题的style.xml中添加如下属性：

<style name="myTheme" parent="android:Theme.Material">
        <!-- 允许使用transitions -->
        <item name="android:windowContentTransitions">true</item>

        <!-- 指定进入和退出transitions -->
        <item name="android:windowEnterTransition">@transition/explode</item>
        <item name="android:windowExitTransition">@transition/explode</item>

        <!-- 指定shared element transitions -->
        <item name="android:windowSharedElementEnterTransition">
            @transition/change_image_transform</item>
        <item name="android:windowSharedElementExitTransition">
            @transition/change_image_transform</item>
</style>

下面再来看看如何定义transition动画：

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <explode/>
    <changeBounds/>
    <changeTransform/>
    <changeClipBounds/>
    <changeImageTransform/>
</transitionSet>

transition里面的元素就是之前介绍过的，使用方法和以前的AnimationSet差不多，具体如何使用大家可以参考官方文档。

代码：

在代码中同样可以完成对于transition的设置：

// 允许使用transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// 设置一个exit transition
getWindow().setExitTransition(new Explode());

可以通过如下方法在代码总设置transition效果：

Window.setEnterTransition()：普通transition的进入效果

Window.setExitTransition()：普通transition的退出效果

Window.setSharedElementEnterTransition()：共享元素transition的进入效果

Window.setSharedElementExitTransition()：共享元素transition的退出效果

步骤二：启动Activity：

当你已经设置了允许使用Transition并设置了Transition动画，你就可以通过ActivityOptions.makeSceneTransitionAnimation()方法启动一个新的Activity来激活这个Transition：

启用普通的Transition：

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

启用共享元素Transition：

启动shared element transition和普通的transition稍有不同

在所有需要共享视图的Activity中，使用android:transitionName属性对于需要共享的元素分配一个通用的名字。

Intent intent = new Intent(this, Activity2.class);
// shareView: 需要共享的视图
// "shareName": 设置的android:transitionName="shareName"
ActivityOptions options = ActivityOptions
        .makeSceneTransitionAnimation(this, shareView, "shareName");
startActivity(intent, options.toBundle());</span>

如果有多个View需要共享，则通过Pair.create()方法创建多个匹配对然后传入ActivityOptions.makeSceneTransitionAnimation。代码如下：

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

如果不想使用transition可以设置options bundle为null。

当需要结束当前Activity并回退这个动画时调用Activity.finishAfterTransition()方法

兼容性：

上面介绍的几个新动画的APIs只允许在Android L中使用：

• Activity transitions
• Touch feedback
• Reveal animations

所以为了兼容早期版本，则需要在调用这些api的时候先进行检查系统版本。

写在最后：

我将Material Design分为如下四部分：

主题和布局——ANDROID L——Material Design详解（主题和布局）

视图和阴影——ANDROID L——Material Design详解（视图和阴影）

UI控件——ANDROID L——Material Design详解（UI控件）

动画——ANDROID L——Material Design详解（动画篇）

十一放假回来开始学习Android L，连更了6篇文章终于把Material Design中大部分特性介绍完毕（动画篇还剩几个小内容，过几天研究明白了再给补上）

接下来准备写几个小例子，把视图阴影，动画和新增的UI控件充分结合起来。

ANDROID L——Material Design综合应用（Demo）

Android 5.0真的做出了很大的变化，有一种脱胎换骨的感觉，但说实话模拟器用的真心不爽，啥时候Genymotion可以支持5.0啊。。。