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

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

Hello，Android L！

前几天给大家介绍了Android 5.0——Material Design详解（动画篇），今天这篇文章中，为大家介绍的是视图和阴影，这个也比较重要，因为在以后Android L的开发中会经常用到。

视图和阴影

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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：

?

1 2 3 4 5

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

?

1 2 3 4 5 6

<!-- 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：

?

1 2 3 4 5 6 7 8 9 10

/* 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)：

?

1	floatingShape.setOutline(mOutlineCircle);

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

?

1 2 3 4 5 6 7 8

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属性给背景调整不同颜色的例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

?

1	floatingShape.setClipToOutline( true );

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

?

1 2 3 4 5 6 7 8

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动画，详情可查看之前的动画篇介绍。