最近項(xiàng)目要求，ui有很多有關(guān)于陰影的設(shè)計(jì)要求，網(wǎng)上找了些實(shí)現(xiàn)方式，但都不是很理想。現(xiàn)在閑下來(lái)了，就尋思著自己寫個(gè)陰影布局耍耍，以備后用。先說道說道我找到的幾種陰影實(shí)現(xiàn)方式:

系統(tǒng)陰影

Andorid 系統(tǒng)自api 21之后就多了一個(gè)熟悉?android:elevation?，這是android最新引入的軸的概念，可通過設(shè)置elevation來(lái)設(shè)置陰影(z軸的大小)，設(shè)置如下:

1

2

3

4

6 app:layout_constraintStart_toStartOf="parent"

7 app:layout_constraintTop_toTopOf="parent"

8 android:layout_marginStart="20dp"

9 android:layout_marginTop="20dp"

10 android:text="系統(tǒng)陰影"

11 android:background="#fff"

12 android:gravity="center"

13 android:textSize="14sp"

14 android:textColor="@color/colorBlack"

15 android:layout_width="100dp"

16 android:elevation="3dp"

17 android:layout_height="80dp"/>

效果也是不錯(cuò)，可以完成一些簡(jiǎn)單的陰影設(shè)置效果。

但需要注意些細(xì)節(jié)，不然?elevation?可能會(huì)無(wú)效：

父布局要保留足夠的空間，elevation本身不占有view的大小

需要設(shè)置背景色且不可設(shè)置為透明色

不能設(shè)置是否為擴(kuò)散的還是指定方向的

layer-list 偽陰影

為什么說是偽陰影呢，layer-list本身很強(qiáng)大，器支持的層疊式繪制基本可以解決我們大多說的背景設(shè)計(jì)，對(duì)于一些要求不是很嚴(yán)格的陰影用它也不是不可以，但效果是真的不好，畢竟shape提供的層疊()并不支持模糊繪制(或者可以選擇使用模糊背景圖片繪制)。下面給一個(gè)用layer-list繪制的陰影做參考。

1

3 app:layout_constraintStart_toEndOf="@id/shadow1"

4 app:layout_constraintTop_toTopOf="parent"

5 android:layout_marginStart="50dp"

6 android:layout_marginTop="20dp"

7 android:text="layer-list陰影"

8 android:gravity="center"

9 android:background="@drawable/shadow_layer"

10 android:textSize="14sp"

11 android:textColor="@color/colorBlack"

12 android:layout_width="100dp"

13 android:layout_height="80dp"/>

14

15

16

17

18 <?xml version="1.0" encoding="utf-8"?>

19

20

21

22 android:left="3dp">

23

24

25

26 android:type="radial"

27 android:centerX="0.5"

28 android:centerY="0.5"

29 android:gradientRadius="30"

30 android:endColor="#10ff0000"/>

31

32

33

34

35

36 android:right="3dp">

37

38

39

40

41

42

43

效果比較生硬，其本質(zhì)就是顏色的漸變，如下:

還有如讓ui切陰影背景圖，但由于控件大小規(guī)格差異較大，風(fēng)格差異較大，并不推薦使用。

自定義陰影布局

這是我比較推薦的方式,可參考CardView的陰影實(shí)現(xiàn)自定義一個(gè)陰影布局實(shí)現(xiàn)。其實(shí)現(xiàn)是通過?setShadowLayer、setMaskFilter?實(shí)現(xiàn)。

1 //mPaint.setShadowLayer(blurRadius,0,0,shadowColor);

2 if (blurRadius>0){3 mPaint.setMaskFilter(newBlurMaskFilter(blurRadius,BlurMaskFilter.Blur.NORMAL));4 }

相較于?setShadowLayer?來(lái)說，setMaskFilter?可供選中的實(shí)現(xiàn)方式要多一個(gè)blur實(shí)現(xiàn)類型，效果更好些，所以我是通過使用?setMaskFilter?來(lái)實(shí)現(xiàn)自定義陰影布局。

1

3 app:layout_constraintStart_toStartOf="parent"

4 app:layout_constraintTop_toBottomOf="@id/shadow1"

5 android:layout_marginTop="20dp"

6 android:text=""

7 app:shadowRadius="0dp"

8 app:shadowColor="#333"

9 app:blurRadius="5dp"

10 app:xOffset="0dp"

11 app:yOffset="0dp"

12 android:layout_marginStart="15dp"

13 android:gravity="center"

14 android:background="@drawable/shadow_layer"

15 android:textSize="14sp"

16 android:textColor="@color/colorBlack"

17 android:layout_width="wrap_content"

18 android:layout_height="wrap_content">

19

20

21

23 android:text="自定義應(yīng)用布局"

24 android:gravity="center"

25 android:textSize="14sp"

26 android:textColor="@color/colorBlack"

27 android:layout_width="100dp"

28 android:layout_height="80dp"/>

29

30

使用

ShadowView?托管于GitHub, 仿照css的Box Shadow 的陰影實(shí)現(xiàn)效果設(shè)計(jì)實(shí)現(xiàn)，可通過設(shè)置水平、豎直偏移確認(rèn)陰影方向，可設(shè)置模糊半徑和圓角半徑、陰影顏色等?？赏ㄟ^gradle直接依賴使用:

添加依賴

repositories {

//...

maven { url 'https://jitpack.io' }

}

dependencies {

implementation 'com.github.amikoj:ShadowView:1.0.1'

}

xml中使用

1

3 android:id="@+id/shadowLayout"

4 app:layout_constraintBottom_toBottomOf="parent"

5 app:layout_constraintLeft_toLeftOf="parent"

6 app:layout_constraintRight_toRightOf="parent"

7 app:layout_constraintTop_toTopOf="parent"

8 android:gravity="center"

9 app:shadowRadius="10dp"

10 app:shadowColor="#bebebe"

11 app:bgColor="#fff"

12 app:xOffset="10dp"

13 app:yOffset="0dp"

14 app:blurRadius="5dp"

15 android:layout_width="wrap_content"

16 android:layout_height="wrap_content">

17

18

19

20

屬性說明

屬性名類型說明

shadowColor

color

陰影渲染顏色

shadowRadius

dimension

背景圓角半徑(0為矩形)

blurRadius

dimension

模糊半徑

xOffset

dimension

水平位移

yOffset

dimension

豎直位移

bgColor

color

背景色

代碼設(shè)置

也可通過代碼設(shè)置陰影屬性：

1 shadowLayout.getShadowConfig() //獲取配置類

2 . setBlurRadius(blurRadius) //設(shè)置模糊半徑

3 .setXOffset(xoffset) //設(shè)置水平位移，最大為20dp

4 .setYOffset(yoffset) //設(shè)置豎直位移，最大為20dp

5 .setShadowRadius(shadowRadius) //設(shè)置圓角半徑，為0時(shí)不是圓角

6 .setShadowColor(shadowColor) //設(shè)置陰影顏色

7 .commit(); //生效修改

總結(jié)

以上是生活随笔為你收集整理的android圆角布局阴影,Android 布局阴影实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。