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

 

 

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

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

 

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

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

视图和阴影

UI控件

动画

 

今天就先来说说第二部分——Material视图和阴影

 

 

 

 

视图和阴影

 

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 plaincopyprint?

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 plaincopyprint?
    1. android:id=@+id/myview
    2. ...
    3. android:elevation=2dp
    4. android:background=@drawable/myrect /> [html] view plaincopyprint?
       2. android:shape=rectangle>

       5.  

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

           

          [java] view plaincopyprint?
          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 plaincopyprint?
              1. floatingShape.setOutline(mOutlineCircle);

                  

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

                 

                  

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

                 

                  

                  

                 Drawable Tinting（着色）

                  

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

                  

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

                 [html] view plaincopyprint?
                 1. android:orientation=horizontal
                 2. android:layout_width=wrap_content
                 3. android:layout_height=wrap_content
                 4. android:layout_gravity=center_horizontal>
                 5. ...
                 6. android:src=@drawable/xamarin_white
                 7. android:background=@drawable/mycircle/>
                 8. ...
                 9. android:src=@drawable/xamarin_white
                 10. android:background=@drawable/mycircle
                 11. android:tint=#2C3E50/>
                 12. ...
                 13. android:src=@drawable/xamarin_white
                 14. android:background=@drawable/mycircle
                 15. android:tint=#B4BCBC/>
                 16. 
                     效果图：
                     
                     
                     
                     
                     
                     
                     

                      

                     Clipping Views（裁剪视图）

                      

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

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

                     
                     

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

                     [java] view plaincopyprint?
                     1. floatingShape.setClipToOutline(true);

                         

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

                         

                        [java] view plaincopyprint?
                        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动画，动画篇会介绍）。

                        9. 转载自：http://www.android100.org/html/201502/16/120106.html