Android materialDesign 风格阴影 改变阴影颜色

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
• 图一

  

   

翻译：

• 当view 的Z 值或者 elevation 值为正数时，为环境阴影设置颜色
• 默认阴影是黑色、不透明的，因此阴影的强度在不同颜色的不同视图之间是一致的
• 最终环境阴影的不透明度是（阴影投射器高度、outlineAmbientShadowColor的alpha通道（通常为不透明）和R.attr.ambientShadowAlpha 主题属性）的函数

• setOutlineSpotShadowColor

• 图二

  

   

翻译：

• 当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的在屏幕上的位置越靠下，阴影越重，但阴影都是黑色的

我们来修改一下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

我们把view的背景设置为白色，效果会更明显：

 

 

图last1

可以看到，view的阴影不再是黑色的，而是我们设置的颜色，因为阴影颜色是由阴影投射器高度、outlineAmbientShadowColor的alpha通道和R.attr.ambientShadowAlpha 主题属性三者的函数计算而来，所以实际颜色会淡一些～