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

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

2020.5.16补充一个不错的 .9图在线生成工具 网址https://inloop.github.io/shadow4android/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容