安卓开发实现阴影效果

问题背景

安卓日常学习和开发过程中，经常会有实现组件和布局阴影效果的场景，本文将介绍安卓开发过程实现阴影效果的几种方案。

问题分析

（1）elevation的方式
Material Design提供了View的阴影效果设置。主要由两个属性决定：elevation和translationZ。
Z = elevation + translationZ
PS:这种实现方式只有API21以及以上才能支持实现。
elevation属性表示View高度加上高度就会有阴影效果。 translationZ属性表示给View增加一个Z轴的变换效果。配合elevation属性一起使用阴影效果更突出。
实现方式如下：

    <TextView
        android:layout_margin="30dp"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

注意，直接使用elevation方式实现阴影效果，需要配置background背景颜色，不然可能会没有阴影效果。
（2）cardView的方式
CardView是Android提供的官方控件自身支持设置阴影效果。阴影实现由cardElevation和cardMaxElevation实现。
实现方式如下：

    <androidx.cardview.widget.CardView
        android:layout_margin="30dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

（3）SCardView方式
CardView 也可以实现圆角阴影效果，但是 CardView 的阴影方向是我们无法设置的。为什么强调阴影方向这个条件呢，因为 CardView 在 API 21 之后，阴影的显示效果在屏幕的各个位置是不一致的。SCardView 出现就解决了这些问题（参考 https://github.com/meetsl/SCardView-master ）。
实现方式如下：
加入依赖

implementation 'io.github.meetsl:SCardView:1.2'

代码使用：

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>

问题解决

话不多说，直接上代码。
（1）引入依赖

implementation 'io.github.meetsl:SCardView:1.2'

（2）布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TestViewActivity">

    <TextView
        android:layout_margin="15dp"
        android:id="@+id/text"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <androidx.cardview.widget.CardView
        android:layout_margin="15dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>

    <TextView
        android:layout_margin="15dp"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <androidx.cardview.widget.CardView
        android:layout_margin="15dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>

    <TextView
        android:layout_margin="15dp"
        android:background="@android:color/holo_blue_bright"
        android:elevation="10dp"
        android:text="elevation配置阴影效果fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <androidx.cardview.widget.CardView
        android:layout_margin="15dp"
        app:cardMaxElevation="10dp"
        app:cardElevation="10dp"
        app:cardCornerRadius="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:text="CardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </androidx.cardview.widget.CardView>

    <com.meetsl.scardview.SCardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        app:cardBackgroundColor="@android:color/holo_red_light"
        app:cardCornerRadius="5dp"
        app:cardElevation="5dp"
        app:cardLightDirection="none">
        <TextView
            android:text="SCardView配置阴影fjasfjkl;askl;jfasfjakl;fajfjklfaklfj;"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </com.meetsl.scardview.SCardView>
</LinearLayout>

运行结果如下：
在这里插入图片描述

问题总结

本文介绍了安卓开发过程实现阴影效果的几种方案：（1）elevation的方式（2）cardView的方式（3）SCardView方式。