公司的项目需要实现一个View的阴影渐变背景效果,然后展示的内容是一个九宫格形式,如下图:
开始想直接使用shape来实现,貌似不行。后面想着使用cardView,但是cardView有系统版本兼容问题,而且不能设置阴影的背景色,果断放弃。最后决定采用图层layer-list来实现,效果和设计稿表现的一致。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 背景 -->
<item>
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14FEFEFE" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="1dp"
android:right="1dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14FDFDFD" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="1.5dp"
android:right="1.5dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14FCFCFC" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="2dp"
android:right="2dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14FBFBFB" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="2.5dp"
android:right="2.5dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14FAFAFA" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="3dp"
android:right="3dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14F9F9F9" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="4dp"
android:right="4dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14F8F8F8" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="5dp"
android:right="5dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14F7F7F7" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="6dp"
android:right="6dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#14F6F6F6" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="7dp"
android:right="7dp"
android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#14F6F6F6" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="8dp"
android:right="8dp"
android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#14F5F5F5" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="9dp"
android:right="9dp"
android:top="3dp">
<shape android:shape="rectangle">
<solid android:color="#14F4F4F4" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="10dp"
android:right="10dp"
android:top="4dp">
<shape android:shape="rectangle">
<solid android:color="#14F3F3F3" />
<corners android:radius="10dp" />
</shape>
</item>
<item
android:bottom="5dp"
android:left="12dp"
android:right="12dp"
android:top="5dp">
<shape android:shape="rectangle">
<solid android:color="#14F0F0F0" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
这里需要注意一个问题,就是多图层绘制会导致过度渲染的问题,其实中间图层的背景色除了边框渐变的阴影,其他部分采用透明色就可以了。在shape标签里,solid 配合stroke使用更佳,有兴趣的朋友可以自己试试。