ANDROID L——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動畫，動畫篇會介紹）。

                            

                            

                            

                            

                            

                           總結：

                            

                            

                           我將Material Design分為如下四部分：

                           主題和布局——ANDROID L——Material Design詳解（主題和布局）

                           視圖和陰影

                           UI控件

                           動畫

                           
                           

                           本文的視圖和陰影非常重要，因為在以後Android L的開發中會經常用到。

                           當我把Android L所有特性介紹之後就會著手開始寫實例Demo了，配合實例Demo相信會更容易理解。

                            

                           剩余的UI控件，動畫，我會陸續更新，敬請期待。。。