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