Android materialDesign 风格阴影 改变阴影颜色
2020-05-01
androiddesmatmaterialriaroisign
我们知道,在 Android 5.0 以后,可以通过 xml 或 Java代码 的方式给 View 添加阴影
// 方式一:xml 设置
1 2 3 | android:elevation="10dp" // 或 android:translationZ="10dp" |
// 方式二:java 代码设置
1 2 3 | view.setElevation(20); // 或 view.setTranslationZ(20); |
然而默认情况下阴影的颜色都是灰色的,若是我们想改变阴影的颜色呢?其实如果明白 Android View 阴影的显示原理的话,就知道改怎么办了
以上代码为 View 设置阴影是通过改变 View 在 Z 轴的坐标实现。在现实世界中,有阴影就必定存在光源。否则,没有光哪来的阴影呢?其实 Android 也是通过模拟现实世界的光照模型实现阴影效果的
在Android Material Design 系统中,存在两个光源,一个是点光源, 一个是环境光,两种光源共同作用,形成view的阴影效果。默认情况下,阴影是黑色的,然而很多时候我们想让阴影颜色与 view 本身的颜色一致,达到更好地视觉效果。Android贴心地考虑到这一点,为我们提供了API:setOutlineAmbientShadowColor和setOutlineSpotShadowColor。开发者可以通过 xml 或 Java 代码改变阴影的颜色
先来看看官方文档是怎么说的:
- setOutlineAmbientShadowColor
- 图一
![](https://i-blog.csdnimg.cn/blog_migrate/dbfdb4d1b3a34c78062efa124e7be296.jpeg)
翻译:
- 当view 的Z 值或者 elevation 值为正数时,为环境阴影设置颜色
- 默认阴影是黑色、不透明的,因此阴影的强度在不同颜色的不同视图之间是一致的
- 最终环境阴影的不透明度是(阴影投射器高度、outlineAmbientShadowColor的alpha通道(通常为不透明)和R.attr.ambientShadowAlpha 主题属性)的函数
- setOutlineSpotShadowColor
-
图二
![](https://i-blog.csdnimg.cn/blog_migrate/086208036d0bc2b11246a184f33e70e2.jpeg)
翻译:
- 当view 的Z 值或者 elevation 值为正数时,为点阴影设置颜色
- 默认阴影是黑色、不透明的,因此阴影的强度在不同颜色的不同视图之间是一致的
- 最终点阴影的不透明度是(阴影投射器高度、outlineAmbientShadowColor的alpha通道(通常为不透明)和R.attr.ambientShadowAlpha 主题属性)的函数
注意:Android API 28 才支持阴影颜色的设置,低版本没有相关属性和方法
使用方法:
1 2 3 4 5 6 7 | // 通过xml设置 android:outlineAmbientShadowColor="#FFAAAA" // 环境阴影 android:outlineSpotShadowColor="#BAFDCE" // 点阴影
// 通过代码设置 view.setOutlineAmbientShadowColor(mContext.getResources().getColor(R.color.ambient_shadow_color));// 环境阴影 view.setOutlineSpotShadowColor(mContext.getResources().getColor(R.color.spot_shadow_color));// 点阴影 |
我们写个demo来测试一下吧~
首先我们使用默认的阴影,将view的颜色设置为白色,可以更好地看出效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" tools:context=".MainActivity">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
<View android:layout_width="match_parent" android:layout_height="50dp" android:backgroundTint="#fff" android:background="@drawable/round_rectangle_shape" android:elevation="10dp" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#fff" android:elevation="10dp" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#fff" android:elevation="10dp" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#fff" android:elevation="10dp" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#fff" android:elevation="10dp" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:layout_marginBottom="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#fff" android:elevation="10dp" />
</LinearLayout> </ScrollView> |
阴影效果如下:
可以看出,view的在屏幕上的位置越靠下,阴影越重,但阴影都是黑色的
![](https://i-blog.csdnimg.cn/blog_migrate/b5d3c1b6a2df3a07e08c00e5b56b0a63.png)
我们来修改一下view的背景颜色和阴影颜色看看:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" tools:context=".MainActivity">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical">
<View android:layout_width="match_parent" android:layout_height="50dp" android:backgroundTint="#45AA84" android:background="@drawable/round_rectangle_shape" android:elevation="10dp" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:outlineAmbientShadowColor="#00472C" android:outlineSpotShadowColor="#00472C" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#038DB2" android:elevation="10dp" android:outlineAmbientShadowColor="#003D4E" android:outlineSpotShadowColor="#003D4E" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#206491" android:elevation="10dp" android:outlineAmbientShadowColor="#00395E" android:outlineSpotShadowColor="#00395E" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#F9637C" android:elevation="10dp" android:outlineAmbientShadowColor="#FF002B" android:outlineSpotShadowColor="#FF002B" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#FE7A66" android:elevation="10dp" android:outlineAmbientShadowColor="#FD2100" android:outlineSpotShadowColor="#FD2100" />
<View android:layout_width="match_parent" android:layout_height="50dp" android:layout_gravity="center_horizontal" android:layout_marginStart="40dp" android:layout_marginEnd="40dp" android:layout_marginTop="40dp" android:layout_marginBottom="40dp" android:background="@drawable/round_rectangle_shape" android:backgroundTint="#FBB45C" android:elevation="10dp" android:outlineAmbientShadowColor="#FF8D00" android:outlineSpotShadowColor="#FF8D00" />
</LinearLayout> </ScrollView> |
效果如下:
图last2
![](https://i-blog.csdnimg.cn/blog_migrate/687ce13e058b914c8e149324f64b48af.png)
我们把view的背景设置为白色,效果会更明显:
图last1
![](https://i-blog.csdnimg.cn/blog_migrate/d3726e9e6fb629ee8a4f8ed153e62cfd.jpeg)
可以看到,view的阴影不再是黑色的,而是我们设置的颜色,因为阴影颜色是由阴影投射器高度、outlineAmbientShadowColor的alpha通道和R.attr.ambientShadowAlpha 主题属性三者的函数计算而来,所以实际颜色会淡一些~