公司的项目需要实现一个View的阴影渐变背景效果，然后展示的内容是一个九宫格形式，如下图：
开始想直接使用shape来实现，貌似不行。后面想着使用cardView,但是cardView有系统版本兼容问题，而且不能设置阴影的背景色，果断放弃。最后决定采用图层layer-list来实现，效果和设计稿表现的一致。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="0dp" />
android:bottom="2dp"
android:left="8dp"
android:right="8dp"
android:top="2dp" />
<shape android:shape="rectangle">
<solid android:color="#FEFEFE" />
<corners android:radius="10dp" />
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<shape android:shape="rectangle">
<solid android:color="#FDFDFD" />
<corners android:radius="10dp" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="#FCFCFC" />
<corners android:radius="10dp" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="#FBFBFB" />
<corners android:radius="10dp" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="#FAFAFA" />
<corners android:radius="10dp" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="#F9F9F9" />
<corners android:radius="10dp" />
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
</layer-list>
这里需要注意一个问题，就是多图层绘制会导致过度渲染的问题，其实中间图层的背景色除了边框渐变的阴影，其他部分采用透明色就可以了。所以最终的方案如下：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="0dp" />
android:bottom="2dp"
android:left="8dp"
android:right="8dp"
android:top="2dp" />
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
<corners android:radius="10dp" />
android:width="2dp"
android:color="#FEFEFE" />
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
<corners android:radius="10dp" />
android:width="1dp"
android:color="#FDFDFD" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
<corners android:radius="10dp" />
android:width="1dp"
android:color="#FCFCFC" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
<corners android:radius="10dp" />
android:width="1dp"
android:color="#FBFBFB" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="@color/transparent" />
<corners android:radius="10dp" />
android:width="1dp"
android:color="#FAFAFA" />
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<shape android:shape="rectangle">
<solid android:color="#F9F9F9" />
<corners android:radius="10dp" />
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
</layer-list>
网友评论