Android5.0以後，materialDesign風格的加陰影和裁剪效果

weixin_34391854發表於2018-08-01
Android

5.0以後，materialDesign風格，出現了立體這種概念，高光，陰影，也就是Z軸，凸顯層次；同時，裁剪view也變得方便簡單了很多。

1，先說說陰影的實現。

方案1：在xml中設定 
xml中設定有兩個方式，android:elevation="2dp" 
android:translationZ="2dp"這兩句程式碼是可以同時並存的，而且是疊加的效果；當然只使用其中一個屬性進行z軸的陰影設定也是OK的。

方案2：在程式碼中設定 
（下面說這個實現方式，其實就是輪廓的實現）

設定陰影，有一個需要注意的地方：

①：view的大小要比它的父佈局小，才會有陰影效果，如果相同大小，是看不到陰影效果的； 
②：給圖片設定陰影的時候，如果這種圖片的background屬性是shape，那直接通過xml設定陰影是OK的，但是，如果是一張png或者其他格式的圖片，直接通過xml設定android:elevation="2dp" 
android:translationZ="2dp"陰影是看不到效果的，得通過其他程式碼設定才行。。。**

2，view的輪廓，輪廓其實也是陰影

預設情況下，所有的view都是矩形的，雖然可以給view設定背景圓形的圖片，即可以在介面顯示出圓形的內容，但是view的大小實際上依然是矩形，並且設定的圖片實際上也是矩形的，只是圓形以外的區域是透明色。 
如果根據view大小來生成對應的陰影，就會出現很奇怪的效果，（一個看起來圓形的view展示出的確實一個矩形的陰影）我瞭解決這個問題，view增加了一個新的描述來指明內容顯示的形狀，這就是 輪廓

輪廓的實現\

①通過shape設定的背景，view會自動根據shape的形狀進行輪廓判定，
②通過color設定的背景，view預設其輪廓和view的大小一樣。
③但是通過圖片進行背景設定，view則無法獲知輪廓的形狀，這個時候就需要手動進行指定了。

一：在xml中可以通過android：outlineProvider來指定輪廓的判定方式： 
1，none即使設定了Z屬性，也不會顯示陰影 
2，background會按照背景來設定陰影形狀 
3，bounds會按照view的大小來描繪陰影

**對於①和②這種情況，也是可以通過設定`android：outlineProvider`
來改變陰影的形狀以及輪廓外觀的。**

對於③這種背景是一張png或者其他格式的圖片的情況，
`android：outlineProvider=“background”`
是沒有效果的，屬性設定成`android：outlineProvider=bounds`
雖然也是有效果的，但是陰影輪廓是一個方形的輪廓，
並不是我們想要的效果了。

不設定`android：outlineProvider`屬性就更沒有效果了。

對於這種使用了png圖片作為背景的view加陰影輪廓的時候情況解決辦法也非常簡單，解決辦法就是：

就通過Java程式碼設定，也就是說，一個圓形的png圖（我們知道，看起來是圓形的，
但是它其實還是方形的圖片，只是圓形之外的區域是透明不可見的），
 通過Java程式碼設定輪廓，就會顯示出圓形的陰影輪廓了。

具體實現，繼續看： 
二：在程式碼中，課通過setOutlineProvider來指定一個view的輪廓。 
對於③這種情況在程式碼中設定輪廓才會有效果。

TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
         //x，y軸表示位置，後兩個參數列示長，寬 
               outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
textView.setOutlineProvider(viewOutlineProvider);

強調：

如果採用圓形圖片作為背景，即使在xml佈局中指定android：outlineProvider=“background”，也不會顯示陰影，設定為android：outlineProvider=bounds，雖然也有效果，但是效果很差，所以一般都是通過程式碼來指定輪廓顯示。

1，一個shape圓形作為背景，設定陰影，設定android：outlineProvider的4種屬性的效果：

shape

2，一個圓形png作為背景，設定陰影，設定android：outlineProvider的4種屬性的效果：

png

3，一個png作為背景，設定陰影，通過程式碼設定的效果：

程式碼

3，view的裁剪

裁剪，預設的ImageView是矩形的，很多時候，需要的是圓角的ImageView或者圓形的ImageView，這就需要裁剪view了。

實現，裁剪圓形：

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //設定圓形oval
                outline.setOval(0,0,textView.getWidth(),textView.getHeight());
            }
        };
//設定裁剪
textView.setClipToOutline(true);

實現，裁剪圓角矩形：

final TextView textView= findViewById(R.id.tv);

ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //設定圓角矩形
               outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),25);
            }
        };
textView.setOutlineProvider(viewOutlineProvider);
//設定裁剪
textView.setClipToOutline(true);

 

相關文章