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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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:statusBarColorWindow.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值由两部分组成,elevationtranslationZ(它们都是Android L新引入的属性)

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

Z = elevation + translationZ


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

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

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

新的ViewPropertyAnimator.zViewPropertyAnimator.translationZ方法可以设置视图的elevation


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

这对于响应触摸手势很有用处,请看下面代码(官方Demo中的代码):

  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

  1. <TextView  
  2.     android:id="@+id/myview"  
  3.     ...  
  4.     android:elevation="2dp"  
  5.     android:background="@drawable/myrect" />  
  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:

  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(00, shapeSize, shapeSize, shapeSize / 2);  
  7.   
  8. /* Create a rectangular outline. */  
  9. mOutlineRect = new Outline();  
  10. mOutlineRect.setRoundRect(00, shapeSize, shapeSize, shapeSize / 10);  

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

  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(00, size, size);  
  6.     }  
  7. };  
  8. fab.setOutlineProvider(viewOutlineProvider);  



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



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

    


Drawable Tinting(着色)


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


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

  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方法:

  1. floatingShape.setClipToOutline(true);  


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

  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动画,动画篇会介绍)。


本文所介绍的两个控件(RecyclerViewCardView)非常重要,因为在以后Android L的开发中会经常用到。



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


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






导入RecyclerView,CardView


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

下面就介绍下在EclipseAndroid 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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  1. card_view:cardBackgroundColor="@color/cardview_dark_background"  
  2.    card_view:cardCornerRadius="5dp"  
他俩的作用分别是设置CardView的背景颜色和外围的圆角大小(注意要使用card_view命名空间)



代码:


Actor类(封装数据的Model类):

[java] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  1. startActivity(intent,  
  2.               ActivityOptions.makeSceneTransitionAnimation(this).toBundle());  


启用共享元素Transition:

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

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

[java] view plain copy
 print?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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(00, 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?在CODE上查看代码片派生到我的代码片
  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?在CODE上查看代码片派生到我的代码片
  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)

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页