美文网首页自定义控件
巧用layer-list实现按钮背景阴影、投影

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

作者: 木溪bo | 来源:发表于2019-07-27 11:46 被阅读13次
    • 我们在实现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>
    
    效果层叠.png 阴影.png

    相关文章

      网友评论

        本文标题:巧用layer-list实现按钮背景阴影、投影

        本文链接:https://www.haomeiwen.com/subject/ffwsrctx.html