公司的項(xiàng)目需要實(shí)現(xiàn)一個(gè)View的陰影漸變背景效果，然后展示的內(nèi)容是一個(gè)九宮格形式，如下圖：
開始想直接使用shape來實(shí)現(xiàn)，貌似不行笛谦。后面想著使用cardView,但是cardView有系統(tǒng)版本兼容問題碗暗，而且不能設(shè)置陰影的背景色颈将，果斷放棄。最后決定采用圖層layer-list來實(shí)現(xiàn)言疗，效果和設(shè)計(jì)稿表現(xiàn)的一致晴圾。
<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>
這里需要注意一個(gè)問題，就是多圖層繪制會(huì)導(dǎo)致過度渲染的問題噪奄，其實(shí)中間圖層的背景色除了邊框漸變的陰影疑务，其他部分采用透明色就可以了。在shape標(biāo)簽里梗醇，solid 配合stroke使用更佳知允，有興趣的朋友可以自己試試。
