巧用layer-list实现按钮背景阴影、投影

木溪bo

发布于 2019-07-28 14:11:07

2.4K0

发布于 2019-07-28 14:11:07

我们在实现UI标注画图的时候难免会遇到要求按钮带阴影的效果。很多人会想，现在安卓5.0以上原生控件已经支持android:elevation=""属性设置投影了，再者也可以使用CardView给需要投影的布局控件来包一层，因为CardView也是带app:cardElevation=""属性的，设置投影还不是分分钟的事。
当我在实际开发中时，项目需求几乎所有的控件按钮都是带阴影的，列表项、详情项等等，如果使用切图肯定是不大现实的，占用空间太大。当我使用上面提到的android:elevation=""与app:cardElevation=""属性时遇到瓶颈了，这两个属性可以用也很方便，但是遇上苛刻的UI就不行了，因为颜色差值不对，与UI效果图相差太大，而安卓系统却没有提供可以改变颜色的api。所以我弃用了这个方案，改用了layer-list使用视图层叠的方式实现，最后将其设置为背景图即可。代码如下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <!--注意每一层图层的颜色变化，每个图层颜色改变实现阴影渐变-->
    <!--
    总共内边距,背景内加、背景外减去边距
    bottom="4dp"
    left="4dp"
    right="4dp"
    top="1.5dp"
    height="13.5dp"
     />-->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="0.8dp"
                android:left="0.8dp"
                android:right="0.8dp"
                android:top="0.5dp" />
            <solid android:color="#0DCCCCCC" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="0.8dp"
                android:left="0.8dp"
                android:right="0.8dp"
                android:top="0.5dp" />
            <solid android:color="#10CCCCCC" />
            <corners android:radius="9dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="0.8dp"
                android:left="0.8dp"
                android:right="0.8dp"
                android:top="0.5dp" />
            <solid android:color="#15CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="0.8dp"
                android:left="0.8dp"
                android:right="0.8dp"
                android:top="0.5dp" />
            <solid android:color="#20CCCCCC" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="0.8dp"
                android:left="0.8dp"
                android:right="0.8dp"
                android:top="0.5dp" />
            <solid android:color="#30CCCCCC" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:radius="5dp" />
        </shape>
    </item>
</layer-list>