2018-10-17 seo達人
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
5.0以后，materialDesign風(fēng)格，出現(xiàn)了立體這種概念，高光，陰影，也就是Z軸，凸顯層次；同時，裁剪view也變得方便簡單了很多。
1，先說說陰影的實現(xiàn)。
方案1：在xml中設(shè)置
xml中設(shè)置有兩個方式，android:elevation="2dp"
android:translationZ="2dp"這兩句代碼是可以同時并存的，而且是疊加的效果；當(dāng)然只使用其中一個屬性進行z軸的陰影設(shè)置也是OK的。
方案2：在代碼中設(shè)置
（下面說這個實現(xiàn)方式，其實就是輪廓的實現(xiàn)）
設(shè)置陰影，有一個需要注意的地方：
①：view的大小要比它的父布局小，才會有陰影效果，如果相同大小，是看不到陰影效果的；
②：給圖片設(shè)置陰影的時候，如果這種圖片的background屬性是shape，那直接通過xml設(shè)置陰影是OK的，但是，如果是一張png或者其他格式的圖片，直接通過xml設(shè)置android:elevation="2dp"
android:translationZ="2dp"陰影是看不到效果的，得通過其他代碼設(shè)置才行。。。**
2，view的輪廓，輪廓其實也是陰影
默認情況下，所有的view都是矩形的，雖然可以給view設(shè)置背景圓形的圖片，即可以在界面顯示出圓形的內(nèi)容，但是view的大小實際上依然是矩形，并且設(shè)置的圖片實際上也是矩形的，只是圓形以外的區(qū)域是透明色。
如果根據(jù)view大小來生成對應(yīng)的陰影，就會出現(xiàn)很奇怪的效果，（一個看起來圓形的view展示出的確實一個矩形的陰影）我了解決這個問題，view增加了一個新的描述來指明內(nèi)容顯示的形狀，這就是 輪廓
輪廓的實現(xiàn)
①通過shape設(shè)置的背景，view會自動根據(jù)shape的形狀進行輪廓判定，
②通過color設(shè)置的背景，view默認其輪廓和view的大小一樣。
③但是通過圖片進行背景設(shè)置，view則無法獲知輪廓的形狀，這個時候就需要手動進行指定了。
1
2
3
一：在xml中可以通過android：outlineProvider來指定輪廓的判定方式：
1，none即使設(shè)置了Z屬性，也不會顯示陰影
2，background會按照背景來設(shè)置陰影形狀
3，bounds會按照view的大小來描繪陰影
**對于①和②這種情況，也是可以通過設(shè)置`android：outlineProvider`
來改變陰影的形狀以及輪廓外觀的。**
對于③這種背景是一張png或者其他格式的圖片的情況，
`android：outlineProvider=“background”`
是沒有效果的，屬性設(shè)置成`android：outlineProvider=bounds`
雖然也是有效果的，但是陰影輪廓是一個方形的輪廓，
并不是我們想要的效果了。
不設(shè)置`android：outlineProvider`屬性就更沒有效果了。
1
2
3
4
5
6
7
8
9
10
對于這種使用了png圖片作為背景的view加陰影輪廓的時候情況解決辦法也非常簡單，解決辦法就是：
就通過Java代碼設(shè)置，也就是說，一個圓形的png圖（我們知道，看起來是圓形的，
但是它其實還是方形的圖片，只是圓形之外的區(qū)域是透明不可見的），
通過Java代碼設(shè)置輪廓，就會顯示出圓形的陰影輪廓了。
1
2
3
具體實現(xiàn)，繼續(xù)看：
二：在代碼中，課通過setOutlineProvider來指定一個view的輪廓。
對于③這種情況在代碼中設(shè)置輪廓才會有效果。
TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//x，y軸表示位置，后兩個參數(shù)表示長，寬
outline.setOval(0,0,textView.getWidth(),textView.getHeight());
}
};
textView.setOutlineProvider(viewOutlineProvider);
1
2
3
4
5
6
7
8
9
強調(diào)：
如果采用圓形圖片作為背景，即使在xml布局中指定android：outlineProvider=“background”，也不會顯示陰影，設(shè)置為android：outlineProvider=bounds，雖然也有效果，但是效果很差，所以一般都是通過代碼來指定輪廓顯示。
1，一個shape圓形作為背景，設(shè)置陰影，設(shè)置android：outlineProvider的4種屬性的效果：
2，一個圓形png作為背景，設(shè)置陰影，設(shè)置android：outlineProvider的4種屬性的效果：
3，一個png作為背景，設(shè)置陰影，通過代碼設(shè)置的效果：
3，view的裁剪
裁剪，默認的ImageView是矩形的，很多時候，需要的是圓角的ImageView或者圓形的ImageView，這就需要裁剪view了。
實現(xiàn)，裁剪圓形：
final TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//設(shè)置圓形oval
outline.setOval(0,0,textView.getWidth(),textView.getHeight());
}
};
//設(shè)置裁剪
textView.setClipToOutline(true);
1
2
3
4
5
6
7
8
9
10
11
實現(xiàn)，裁剪圓角矩形：
final TextView textView= findViewById(R.id.tv);
ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
@Override
public void getOutline(View view, Outline outline) {
//設(shè)置圓角矩形
outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),25);
}
};
textView.setOutlineProvider(viewOutlineProvider);
//設(shè)置裁剪
藍藍設(shè)計( www.sdgs6788.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.sdgs6788.com