Android Material Design详解

Android L：

Google已经确认Android L就是Android Lollipop（5.0）。

Google之前就已经提前推出了Android L Developer Preview（开发者预览版）来帮助开发者更快的了解Android特性，而不久前也推出了64位的模拟器镜像，而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市。

相信Android L正式版离我们也不远了，所以是时候开始学习Android L了！

关于Android L如何配置模拟器和创建项目，如果大家有兴趣的话可以看看我之前的一篇文章：

Android L——模拟器配置及创建项目

Material Design：

Material Design是Google推出的一个全新的设计语言，它的特点就是拟物扁平化。

Material Design包含了很多内容，我大致把它分为四部分：

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

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

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

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

今天就先来说说第一部分——Material主题和布局

Material Theme

使用Material主题：

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

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

[html]  view plain  copy

 print ?

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

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

[html]  view plain  copy

 print ?

1. 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可以根据自定的品牌风格，自定义主题的基础色调，如下（参考下方图片）：

[html]  view plain  copy

 print ?

1. <resources>  
2.   <!-- inherit from the material theme -->  
3.   <style name="AppTheme" parent="android:Theme.Material">  
4.     <!-- Main theme colors -->  
5.     <!--   your app's branding color (for the app bar) -->  
6.     <item name="android:colorPrimary">@color/primary</item>  
7.     <!--   darker variant of colorPrimary (for status bar, contextual app bars) -->  
8.     <item name="android:colorPrimaryDark">@color/primary_dark</item>  
9.     <!--   theme UI controls like checkboxes and text fields -->  
10.     <item name="android:colorAccent">@color/accent</item>  
11.   </style>  
12. </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/

本文的主题和布局都是比较偏向设计的，和代码关系不是特别大。所以这方面我不是特别熟悉，只是说了一下我个人的理解。

详细关于Material Design的主题和布局应该如何设计，请看我之前提过的文章material design specification（设计真的是一门技术/艺术，想做好实在太难了）。

视图和阴影

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中的代码）：

[java]  view plain copy print ?

1. int action = motionEvent.getActionMasked();  
2.                 /* Raise view on ACTION_DOWN and lower it on ACTION_UP. */  
3.                 switch (action) {  
4.                     case MotionEvent.ACTION_DOWN:  
5.                         Log.d(TAG, "ACTION_DOWN on view.");  
6.                         view.setTranslationZ(120);  
7.                         break;  
8.                     case MotionEvent.ACTION_UP:  
9.                         Log.d(TAG, "ACTION_UP on view.");  
10.                         view.setTranslationZ(0);  
11.                         break;  
12.                     default:  
13.                         return false;  
14.                 }  

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

     

Shadows and Outlines（阴影和轮廓）

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

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

1.设置eleavation值

2.添加一个背景或者outline

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

[html]  view plain copy print ?

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

[html]  view plain copy print ?

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

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

[java]  view plain copy print ?

1. /* Get the size of the shape from resources. */  
2. int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);  
3.   
4. /* Create a circular outline. */  
5. mOutlineCircle = new Outline();  
6. mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);  
7.   
8. /* Create a rectangular outline. */  
9. mOutlineRect = new Outline();  
10. mOutlineRect.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 10);  

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

[java]  view plain copy print ?

1. floatingShape.setOutline(mOutlineCircle);  

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

[java]  view plain  copy

 print ?

1. ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {  
2.     @Override  
3.     public void getOutline(View view, Outline outline) {  
4.         int size = getResources().getDimensionPixelSize(R.dimen.fab_size);  
5.         outline.setOval(0, 0, size, size);  
6.     }  
7. };  
8. fab.setOutlineProvider(viewOutlineProvider);  

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

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

    

Drawable Tinting（着色）

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

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

[html]  view plain copy print ?

1. <LinearLayout  
2.     android:orientation="horizontal"  
3.     android:layout_width="wrap_content"  
4.     android:layout_height="wrap_content"  
5.     android:layout_gravity="center_horizontal">  
6.     <ImageView  
7.         ...  
8.         android:src="@drawable/xamarin_white"  
9.         android:background="@drawable/mycircle"/>  
10.     <ImageView  
11.         ...  
12.         android:src="@drawable/xamarin_white"  
13.         android:background="@drawable/mycircle"  
14.         android:tint="#2C3E50"/>  
15.     <ImageView  
16.         ...  
17.         android:src="@drawable/xamarin_white"  
18.         android:background="@drawable/mycircle"  
19.         android:tint="#B4BCBC"/>  
20. </LinearLayout>  

效果图：

Clipping Views（裁剪视图）

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

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

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

[java]  view plain copy print ?

1. floatingShape.setClipToOutline(true);  

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

[java]  view plain copy print ?

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

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

     

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

本文所介绍的两个控件（RecyclerView，CardView）非常重要，因为在以后Android L的开发中会经常用到。

这篇文章介绍的内容都是从官方文档翻译过来的，大家看着可能有点迷糊。不过没关系，过几天我会更新一个介绍RecyclerView，CardView在Android Studio和Eclipse中是如何导包，和两个控件结合使用的小Demo。

本例就是使用RecyclerView来展示多个CardView的一个小例子，先看下效果图：

导入RecyclerView,CardView

由于RecyclerView,CardView是放在support library v7包中，所以我们想要使用就必须要导包。

下面就介绍下在Eclipse和Android Studio中是如何导入这两个包的。

Eclipse：

第一步：通过SDK manager下载/更新Android Support Libraries（5.0版本最新为21） 

第二步：导入CardView和RecyclerView项目（都在support v7中）

1.在Eclipse中点击Import，导入Android项目

2.导入CardView和RecycleView，路径为your sdk path\extras\android\support\v7\cardview（RecycleView则为相同目录下的recyclerview）

3.导入时记得将工程copy到本地并建议重命名，这样方便以后管理例如：

第三步：设置Library

1..将两个工程设置为Library

2..在主工程中引入这两个Library例如：

通过这三步就可以将这两个包导入进来了。

Android Studio

Android Stuido相对于Eclipse简单的多：

第一步：

首先要确保已经将Android Support Libraries升级到最新.

第二步：

打开项目中的build.gradle文件，在dependencies中添加如下代码。

[html]  view plain  copy

 print ?

1. dependencies {  
2.     compile 'com.android.support:recyclerview-v7:21.+'  
3.     compile 'com.android.support:cardview-v7:21.+'  
4. }  

第三步：

重新Build一下工程。

Build完成后就会发现这两个包就已经导入进来了

代码介绍：

主题：

首先这个黑色基调的主题是使用了Material.Dark.ActionBar样式。

设置方法：修改values-v21文件夹下styles.xml文件：

[html]  view plain  copy

 print ?

1. <resources>  
2.     <style name="AppTheme" parent="android:ThemeOverlay.Material.Dark.ActionBar">  
3.     </style>  
4. </resources>  

布局文件：

recycler_view.xml（RecyclerView布局文件）:

[html]  view plain  copy

 print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:tools="http://schemas.android.com/tools"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     tools:context=".MyActivity">  
7.   
8.     <android.support.v7.widget.RecyclerView  
9.         android:id="@+id/list"  
10.         android:layout_width="match_parent"  
11.         android:layout_height="match_parent"  
12.         tools:context=".MyActivity" />  
13. </FrameLayout>  

FrameLayout里包含了RecyclerView控件

card_view.xml（CardView布局文件）：

[html]  view plain  copy

 print ?

1. <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:card_view="http://schemas.android.com/apk/res-auto"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:layout_margin="5dp"  
6.     android:orientation="horizontal"  
7.     card_view:cardBackgroundColor="@color/cardview_dark_background"  
8.     card_view:cardCornerRadius="5dp" >  
9.   
10.     <RelativeLayout  
11.         android:layout_width="match_parent"  
12.         android:layout_height="100dp"  
13.         android:padding="5dp" >  
14.   
15.         <ImageView  
16.             android:id="@+id/pic"  
17.             android:layout_width="match_parent"  
18.             android:layout_height="match_parent"  
19.             android:layout_centerInParent="true"  
20.             android:scaleType="centerCrop" />  
21.   
22.         <TextView  
23.             android:clickable="true"  
24.             android:id="@+id/name"  
25.             android:layout_width="match_parent"  
26.             android:layout_height="match_parent"  
27.             android:layout_marginBottom="10dp"  
28.             android:layout_marginRight="10dp"  
29.             android:gravity="right|bottom"  
30.             android:textColor="@android:color/white"  
31.             android:textSize="24sp" />  
32.     </RelativeLayout>  
33.   
34. </android.support.v7.widget.CardView>  

CardView视图中包含了一个ImageView和一个TextView分别显示图片和文字信息

唯一需要介绍的就是在布局文件中使用了，如下两个属性：

[html]  view plain  copy

 print ?

1. card_view:cardBackgroundColor="@color/cardview_dark_background"  
2.    card_view:cardCornerRadius="5dp"  

他俩的作用分别是设置CardView的背景颜色和外围的圆角大小（注意要使用card_view命名空间）

代码：

Actor类（封装数据的Model类）：

[java]  view plain  copy

 print ?

1. public class Actor  
2. {  
3.     String name;  
4.   
5.     String picName;  
6.   
7.     public Actor(String name, String picName)  
8.     {  
9.         this.name = name;  
10.         this.picName = picName;  
11.     }  
12.   
13.     public int getImageResourceId( Context context )  
14.     {  
15.         try  
16.         {  
17.             return context.getResources().getIdentifier(this.picName, "drawable", context.getPackageName());  
18.   
19.         }  
20.         catch (Exception e)  
21.         {  
22.             e.printStackTrace();  
23.             return -1;  
24.         }  
25.     }  
26. }  

封装了演员的名字和图片名，getImageResourceId()方法的作用就是根据图片命找到系统资源

MyActivity(程序主控制Activity)

[java]  view plain  copy

 print ?

1. public class MyActivity  
2.     extends Activity  
3. {  
4.   
5.     private RecyclerView mRecyclerView;  
6.   
7.     private MyAdapter myAdapter;  
8.   
9.     private List<Actor> actors = new ArrayList<Actor>();  
10.   
11.     private String[] names = { "朱茵", "张柏芝", "张敏", "巩俐", "黄圣依", "赵薇", "莫文蔚", "如花" };  
12.   
13.     private String[] pics = { "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8" };  
14.   
15.     @Override  
16.     protected void onCreate( Bundle savedInstanceState )  
17.     {  
18.         super.onCreate(savedInstanceState);  
19.         setContentView(R.layout.recycler_view);  
20.   
21.         actors.add(new Actor("朱茵", "p1"));  
22.         getActionBar().setTitle("那些年我们追的星女郎");  
23.   
24.         // 拿到RecyclerView  
25.         mRecyclerView = (RecyclerView) findViewById(R.id.list);  
26.         // 设置LinearLayoutManager  
27.         mRecyclerView.setLayoutManager(new LinearLayoutManager(this));  
28.         // 设置ItemAnimator  
29.         mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
30.         // 设置固定大小  
31.         mRecyclerView.setHasFixedSize(true);  
32.         // 初始化自定义的适配器  
33.         myAdapter = new MyAdapter(this, actors);  
34.         // 为mRecyclerView设置适配器  
35.         mRecyclerView.setAdapter(myAdapter);  
36.   
37.     }  
38.   
39.     @Override  
40.     public boolean onCreateOptionsMenu(Menu menu) {  
41.         getMenuInflater().inflate(R.menu.menu, menu);  
42.         return true;  
43.     }  
44.   
45.     @Override  
46.     public boolean onOptionsItemSelected(MenuItem item) {  
47.         switch(item.getItemId()) {  
48.             // 当点击actionbar上的添加按钮时，向adapter中添加一个新数据并通知刷新  
49.             case R.id.action_add:  
50.                 if (myAdapter.getItemCount() != names.length) {  
51.                     actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()]));  
52.                     mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
53.                     myAdapter.notifyDataSetChanged();  
54.                 }  
55.                 return true;  
56.             // 当点击actionbar上的删除按钮时，向adapter中移除最后一个数据并通知刷新  
57.             case R.id.action_remove:  
58.                 if (myAdapter.getItemCount() != 0) {  
59.                     actors.remove(myAdapter.getItemCount()-1);  
60.                     mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
61.                     myAdapter.notifyDataSetChanged();  
62.                 }  
63.                 return true;  
64.         }  
65.         return super.onOptionsItemSelected(item);  
66.     }  
67.   
68. }  

MyAdapter（自定义适配器类）

[java]  view plain  copy

 print ?

1. public class MyAdapter  
2.     extends RecyclerView.Adapter<MyAdapter.ViewHolder>  
3. {  
4.   
5.     private List<Actor> actors;  
6.   
7.     private Context mContext;  
8.   
9.     public MyAdapter( Context context , List<Actor> actors)  
10.     {  
11.         this.mContext = context;  
12.         this.actors = actors;  
13.     }  
14.   
15.     @Override  
16.     public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )  
17.     {  
18.         // 给ViewHolder设置布局文件  
19.         View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);  
20.         return new ViewHolder(v);  
21.     }  
22.   
23.     @Override  
24.     public void onBindViewHolder( ViewHolder viewHolder, int i )  
25.     {  
26.         // 给ViewHolder设置元素  
27.         Actor p = actors.get(i);  
28.         viewHolder.mTextView.setText(p.name);  
29.         viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));  
30.     }  
31.   
32.     @Override  
33.     public int getItemCount()  
34.     {  
35.         // 返回数据总数  
36.         return actors == null ? 0 : actors.size();  
37.     }  
38.   
39.     // 重写的自定义ViewHolder  
40.     public static class ViewHolder  
41.         extends RecyclerView.ViewHolder  
42.     {  
43.         public TextView mTextView;  
44.   
45.         public ImageView mImageView;  
46.   
47.         public ViewHolder( View v )  
48.         {  
49.             super(v);  
50.             mTextView = (TextView) v.findViewById(R.id.name);  
51.             mImageView = (ImageView) v.findViewById(R.id.pic);  
52.         }  
53.     }  
54. }  

所有代码介绍完毕了，可以总结为以下两点：

RecyclerView：

理解为之前的ListView，不过需要设置LinearLayoutManager（目前资料不多我也有点迷糊以后再补充）和ItemAnimator（为每个条目设置操作动画）两个新属性

RecyclerView.Adapter：

理解为默认自带和基于ViewHolder的新的适配器，只不过回调方法稍有不同，但本质都是一样的。

代码下载地址：https://github.com/a396901990/AndroidDemo

目前只差最后一个动画部分了。原计划是等动画篇写完之后再分别写它们的使用Demo，但是上一篇UI控件感觉写的不够详细，所以先把UI控件的Demo写出来。

视图阴影和动画的使用Demo等最后动画篇写完后再更新，敬请期待。。。

已经写完链接：ANDROID L——Material Design综合应用（Demo）

动画：

Material Design是Google推出的一个全新的设计语言，它的特点就是拟物扁平化。

在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源码如下：

[java]  view plain  copy

 print ?

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

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

这五个参数分别是：

view 操作的视图

centerX 动画开始的中心点X

centerY 动画开始的中心点Y

startRadius 动画开始半径

startRadius 动画结束半径

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

[java]  view plain  copy

 print ?

1. final View oval = this.findViewById(R.id.oval);  
2. oval.setOnClickListener(new View.OnClickListener() {  
3.     @Override  
4.     public void onClick(View v) {  
5.         Animator animator = ViewAnimationUtils.createCircularReveal(  
6.                 oval,  
7.                 oval.getWidth()/2,  
8.                 oval.getHeight()/2,  
9.                 oval.getWidth(),  
10.                 0);  
11.         animator.setInterpolator(new AccelerateDecelerateInterpolator());  
12.         animator.setDuration(2000);  
13.         animator.start();  
14.     }  
15. });  
16.   
17. final View rect = this.findViewById(R.id.rect);  
18.   
19. rect.setOnClickListener(new View.OnClickListener() {  
20.     @Override  
21.     public void onClick(View v) {  
22.         Animator animator = ViewAnimationUtils.createCircularReveal(  
23.                 rect,  
24.                 0,  
25.                 0,  
26.                 0,  
27.                 (float) Math.hypot(rect.getWidth(), rect.getHeight()));  
28.         animator.setInterpolator(new AccelerateInterpolator());  
29.         animator.setDuration(2000);  
30.         animator.start();  
31.     }  
32. });  

总结：

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中添加如下属性：

[html]  view plain  copy

 print ?

1. <style name="myTheme" parent="android:Theme.Material">  
2.         <!-- 允许使用transitions -->  
3.         <item name="android:windowContentTransitions">true</item>  
4.   
5.         <!-- 指定进入和退出transitions -->  
6.         <item name="android:windowEnterTransition">@transition/explode</item>  
7.         <item name="android:windowExitTransition">@transition/explode</item>  
8.   
9.         <!-- 指定shared element transitions -->  
10.         <item name="android:windowSharedElementEnterTransition">  
11.             @transition/change_image_transform</item>  
12.         <item name="android:windowSharedElementExitTransition">  
13.             @transition/change_image_transform</item>  
14. </style>  

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

[html]  view plain  copy

 print ?

1. <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">  
2.     <explode/>  
3.     <changeBounds/>  
4.     <changeTransform/>  
5.     <changeClipBounds/>  
6.     <changeImageTransform/>  
7. </transitionSet>  

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

代码：

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

[java]  view plain  copy

 print ?

1. // 允许使用transitions  
2. getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  
3.   
4. // 设置一个exit transition  
5. 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：

[java]  view plain  copy

 print ?

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

启用共享元素Transition：

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

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

[java]  view plain  copy

 print ?

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

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

[java]  view plain  copy

 print ?

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

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

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

兼容性：

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

• Activity transitions
• Touch feedback
• Reveal animations

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

而下面这个例子就是之前上面所介所绍的一个综合应用，废话不多说直接看图：

       

Demo简介：

左边的图：

1.RecyclerView，CardView

首先使用了Material Desgin新增的两个控件RecyclerView，CardView。

知识点参考：ANDROID L——RecyclerView,CardView导入和使用（Demo）

2. Floating Action Button & 视图阴影轮廓

这里和上篇文章不同的是我加了一个Floating Action Button（悬浮动作按钮）去控制CardView在RecyclerView中的添加和删除。

并且在蓝色的悬浮按钮上设置了阴影了轮廓（黑色背景不是很清楚）

知识点参考：ANDROID L——Material Design详解（视图和阴影）

3. Reveal Effect

在点击蓝色按钮时会有一个缩小的动画是使用了Reveal effect动画

知识点参考：ANDROID L——Material Design详解（动画篇）

右面的图：

1. Activity transitions

在点击单个条目时会跳转到一个新的Acitivty，跳转时执行Activity transitions动画，大家会看到第二个Activity中的视图会有一个向中央扩展的效果（Explode）

2. Shared Elements Transition

在从第一个Activity跳转到第二个Activity时，会有一个共享元素的动画效果使图片和悬浮按钮在两个Activity跳转时移动（控件间距离有些近效果不是特别明显）

3. Reveal effect和动画监听

通过Reveal effect和动画监听实现类似“眨眼睛”的切换视图效果

1、2、3知识点参考：ANDROID L——Material Design详解（动画篇）

代码介绍：

主Activity——MyActivity：

[java]  view plain  copy

 print ?

1. public class MyActivity extends Activity {  
2.   
3.     private RecyclerView mRecyclerView;  
4.   
5.     private MyAdapter myAdapter;  
6.   
7.     ImageButton button;  
8.   
9.     Context context;  
10.   
11.     public static List<Actor> actors = new ArrayList<Actor>();  
12.   
13.     private static String[] names = {"朱茵", "张柏芝", "张敏", "莫文蔚", "黄圣依", "赵薇", "如花"};  
14.   
15.     private static String[] pics = {"p1", "p2", "p3", "p4", "p5", "p6", "p7"};  
16.   
17.     private static String[] works = {"大话西游", "喜剧之王", "p3", "p4", "p5", "p6", "p7"};  
18.   
19.     private static String[] role = {"紫霞仙子", "柳飘飘", "p3", "p4", "p5", "p6", "p7"};  
20.   
21.     private static String[][] picGroups = {{"p1","p1_1", "p1_2", "p1_3"},{"p2","p2_1", "p2_2", "p2_3"},{"p3"},{"p4"},{"p5"},{"p6"},{"p7"}};  
22.   
23.     @Override  
24.     protected void onCreate(Bundle savedInstanceState) {  
25.         super.onCreate(savedInstanceState);  
26.         // set Explode enter transition animation for current activity  
27.         getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  
28.         getWindow().setEnterTransition(new Explode().setDuration(1000));  
29.         setContentView(R.layout.main_layout);  
30.   
31.         // init data  
32.         this.context = this;  
33.         actors.add(new Actor(names[0], pics[0], works[0], role[0], picGroups[0]));  
34.         getActionBar().setTitle("那些年我们追的星女郎");  
35.   
36.         // init RecyclerView  
37.         mRecyclerView = (RecyclerView) findViewById(R.id.list);  
38.         mRecyclerView.setLayoutManager(new LinearLayoutManager(this));  
39.         mRecyclerView.setItemAnimator(new DefaultItemAnimator());  
40.         // set adapter  
41.         myAdapter = new MyAdapter(this, actors);  
42.         mRecyclerView.setAdapter(myAdapter);  
43.   
44.         // set outline and listener for floating action button  
45.         button = (ImageButton) this.findViewById(R.id.add_button);  
46.         button.setOutlineProvider(new ViewOutlineProvider() {  
47.             @Override  
48.             public void getOutline(View view, Outline outline) {  
49.                 int shapeSize = (int) getResources().getDimension(R.dimen.shape_size);  
50.                 outline.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);  
51.             }  
52.         });  
53.         button.setClipToOutline(true);  
54.         button.setOnClickListener(new MyOnClickListener());  
55.   
56.     }  
57.   
58.     public class MyOnClickListener implements View.OnClickListener {  
59.         boolean isAdd = true;  
60.   
61.         @Override  
62.         public void onClick(View v) {  
63.             // start animation  
64.             Animator animator = createAnimation(v);  
65.             animator.start();  
66.   
67.             // add item  
68.             if (myAdapter.getItemCount() != names.length && isAdd) {  
69.   
70.                 actors.add(new Actor(names[myAdapter.getItemCount()], pics[myAdapter.getItemCount()], works[myAdapter.getItemCount()], role[myAdapter.getItemCount()], picGroups[myAdapter.getItemCount()]));  
71.                 mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
72.                 myAdapter.notifyDataSetChanged();  
73.             }  
74.             // delete item  
75.             else {  
76.                 actors.remove(myAdapter.getItemCount() - 1);  
77.                 mRecyclerView.scrollToPosition(myAdapter.getItemCount() - 1);  
78.                 myAdapter.notifyDataSetChanged();  
79.             }  
80.   
81.             if (myAdapter.getItemCount() == 0) {  
82.                 button.setImageDrawable(getDrawable(android.R.drawable.ic_input_add));  
83.                 isAdd = true;  
84.             }  
85.             if (myAdapter.getItemCount() == names.length) {  
86.                 button.setImageDrawable(getDrawable(android.R.drawable.ic_delete));  
87.                 isAdd = false;  
88.             }  
89.         }  
90.     }  
91.   
92.     /** 
93.      * start detail activity 
94.      */  
95.     public void startActivity(final View v, final int position) {  
96.   
97.         View pic = v.findViewById(R.id.pic);  
98.         View add_btn = this.findViewById(R.id.add_button);  
99.   
100.         // set share element transition animation for current activity  
101.         Transition ts = new ChangeTransform();  
102.         ts.setDuration(3000);  
103.         getWindow().setExitTransition(ts);  
104.         Bundle bundle = ActivityOptions.makeSceneTransitionAnimation((Activity) context,  
105.                 Pair.create(pic, position + "pic"),  
106.                 Pair.create(add_btn, "ShareBtn")).toBundle();  
107.   
108.         // start activity with share element transition  
109.         Intent intent = new Intent(context, DetailActivity.class);  
110.         intent.putExtra("pos", position);  
111.         startActivity(intent, bundle);  
112.   
113.     }  
114.   
115.     /** 
116.      * create CircularReveal animation 
117.      */  
118.     public Animator createAnimation(View v) {  
119.         // create a CircularReveal animation  
120.         Animator animator = ViewAnimationUtils.createCircularReveal(  
121.                 v,  
122.                 v.getWidth() / 2,  
123.                 v.getHeight() / 2,  
124.                 0,  
125.                 v.getWidth());  
126.         animator.setInterpolator(new AccelerateDecelerateInterpolator());  
127.         animator.setDuration(500);  
128.         return animator;  
129.     }  
130.   
131. }  

第二个Activity——DetailActivity：

[java]  view plain  copy

 print ?

1. public class DetailActivity extends Activity {  
2.   
3.     ImageView pic;  
4.   
5.     int position;  
6.   
7.     int picIndex = 0;  
8.   
9.     Actor actor;  
10.   
11.     @Override  
12.     protected void onCreate(Bundle savedInstanceState) {  
13.         super.onCreate(savedInstanceState);  
14.         // set Explode enter transition animation for current activity  
15.         getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);  
16.         getWindow().setEnterTransition(new Explode().setDuration(1000));  
17.         getWindow().setExitTransition(null);  
18.   
19.         setContentView(R.layout.detail_layout);  
20.   
21.         position = getIntent().getIntExtra("pos", 0);  
22.         actor = MyActivity.actors.get(position);  
23.         pic = (ImageView) findViewById(R.id.detail_pic);  
24.   
25.         TextView name = (TextView) findViewById(R.id.detail_name);  
26.         TextView works = (TextView) findViewById(R.id.detail_works);  
27.         TextView role = (TextView) findViewById(R.id.detail_role);  
28.         ImageButton btn = (ImageButton) findViewById(R.id.detail_btn);  
29.   
30.         // set detail info  
31.         pic.setTransitionName(position + "pic");  
32.         pic.setImageDrawable(getDrawable(actor.getImageResourceId(this)));  
33.         name.setText("姓名：" + actor.name);  
34.         works.setText("代表作：" + actor.works);  
35.         role.setText("饰演：" + actor.role);  
36.         // set action bar title  
37.         getActionBar().setTitle(MyActivity.actors.get(position).name);  
38.   
39.         // floating action button  
40.         btn.setImageDrawable(getDrawable(android.R.drawable.ic_menu_gallery));  
41.         btn.setOnClickListener(new View.OnClickListener() {  
42.             @Override  
43.             public void onClick(View v) {  
44.                 // set first animation  
45.                 Animator animator = createAnimation(pic, true);  
46.                 animator.start();  
47.                 animator.addListener(new Animator.AnimatorListener() {  
48.                     @Override  
49.                     public void onAnimationStart(Animator animation) {  
50.   
51.                     }  
52.   
53.                     @Override  
54.                     public void onAnimationEnd(Animator animation) {  
55.                         picIndex++;  
56.                         if (actor.getPics() != null) {  
57.                             if (picIndex >= actor.getPics().length) {  
58.                                 picIndex = 0;  
59.                             }  
60.                             // set second animation  
61.                             doSecondAnim();  
62.                         }  
63.                     }  
64.   
65.                     @Override  
66.                     public void onAnimationCancel(Animator animation) {  
67.   
68.                     }  
69.   
70.                     @Override  
71.                     public void onAnimationRepeat(Animator animation) {  
72.   
73.                     }  
74.                 });  
75.             }  
76.         });  
77.     }  
78.   
79.     /** 
80.      * exec second animation for pic view 
81.      */  
82.     private void doSecondAnim() {  
83.         pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.getPics()[picIndex])));  
84.         Animator animator = createAnimation(pic, false);  
85.         animator.start();  
86.     }  
87.   
88.     /** 
89.      * create CircularReveal animation with first and second sequence 
90.      */  
91.     public Animator createAnimation(View v, Boolean isFirst) {  
92.   
93.         Animator animator;  
94.   
95.         if (isFirst) {  
96.             animator = ViewAnimationUtils.createCircularReveal(  
97.                     v,  
98.                     v.getWidth() / 2,  
99.                     v.getHeight() / 2,  
100.                     v.getWidth(),  
101.                     0);  
102.         } else {  
103.             animator = ViewAnimationUtils.createCircularReveal(  
104.                     v,  
105.                     v.getWidth() / 2,  
106.                     v.getHeight() / 2,  
107.                     0,  
108.                     v.getWidth());  
109.         }  
110.   
111.         animator.setInterpolator(new DecelerateInterpolator());  
112.         animator.setDuration(500);  
113.         return animator;  
114.     }  
115.   
116.     @Override  
117.     public void onBackPressed() {  
118.         super.onBackPressed();  
119.         pic.setImageDrawable(getDrawable(actor.getImageResourceId(this, actor.picName)));  
120.         finishAfterTransition();  
121.     }  
122.   
123. }  

RecyclerView的Adapter：

[java]  view plain  copy

 print ?

1. public class MyAdapter  
2.     extends RecyclerView.Adapter<MyAdapter.ViewHolder>  
3. {  
4.   
5.   
6.     private List<Actor> actors;  
7.   
8.   
9.     private Context mContext;  
10.   
11.   
12.     public MyAdapter( Context context , List<Actor> actors)  
13.     {  
14.         this.mContext = context;  
15.         this.actors = actors;  
16.     }  
17.   
18.   
19.     @Override  
20.     public ViewHolder onCreateViewHolder( ViewGroup viewGroup, int i )  
21.     {  
22.         View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_view, viewGroup, false);  
23.         return new ViewHolder(v);  
24.     }  
25.   
26.   
27.     @Override  
28.     public void onBindViewHolder( ViewHolder viewHolder, int i )  
29.     {  
30.         Actor p = actors.get(i);  
31.         viewHolder.mContext = mContext;  
32.         viewHolder.mTextView.setText(p.name);  
33.         viewHolder.mImageView.setImageDrawable(mContext.getDrawable(p.getImageResourceId(mContext)));  
34.     }  
35.   
36.   
37.     @Override  
38.     public int getItemCount()  
39.     {  
40.         return actors == null ? 0 : actors.size();  
41.     }  
42.   
43.   
44.     public static class ViewHolder  
45.         extends RecyclerView.ViewHolder  
46.     {  
47.         public TextView mTextView;  
48.   
49.   
50.         public ImageView mImageView;  
51.   
52.   
53.         public Context mContext;  
54.   
55.   
56.         public ViewHolder( View v )  
57.         {  
58.             super(v);  
59.             mTextView = (TextView) v.findViewById(R.id.name);  
60.             mImageView = (ImageView) v.findViewById(R.id.pic);  
61.   
62.   
63.             v.setOnClickListener(new View.OnClickListener() {  
64.                 @Override  
65.                 public void onClick(View v) {  
66.                 ((MyActivity)mContext).startActivity(v, getPosition());  
67.                 }  
68.             });  
69.         }  
70.     }  
71. }  

剩余的Layout文件和一些烂七八糟的东西大家可以通过下方的Github连接找到。

Github下载地址：https://github.com/a396901990/AndroidDemo  (AndroidL_MaterialDesgin_Demo)

转自：http://blog.csdn.net/a396901990/article/details/40107881