使用<shap>为Button加上阴影效果

最新推荐文章于 2025-07-16 14:40:26 发布

冥萧阳

最新推荐文章于 2025-07-16 14:40:26 发布

阅读量1.6w

点赞数 3

CC 4.0 BY-SA版权

文章标签： android 阴影按钮

本文链接：https://blog.youkuaiyun.com/guxiao1201/article/details/40791077

本文介绍如何利用Android的Shape标签为Button添加阴影效果，避免切图，通过设置图层距离差实现视觉上的阴影，详细步骤和最终代码示例提供。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载请注明出处：http://blog.youkuaiyun.com/guxiao1201/article/details/40791077

之前做项目时会遇到需要实现带阴影效果的Button，为了不太起眼的阴影还要切至少两张图以满足多态效果。后来发现原来Android自带的<Shap>标签就能实现这个效果，真有种相见恨晚的感觉。

效果图

阴影效果原理图

实际上创建了两层图层，分别是表层和阴影，只不过表层覆盖阴影层并有个距离差，所以在视觉效果上就会出现阴影效果

最终效果代码：

<item>
    <layer-list>
        <item android:left="4dip" android:top="4.0dip">
            <shape>
                <solid android:color="#66000000"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
        <item android:bottom="4.0dip" android:right="4.0dip">
            <shape>
                <solid android:color="#669dd3"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
    </layer-list>
</item>

然后再使用<selector>加上多态就是我们最终实现的效果。

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_focused="true">
    <layer-list>
        <item
            android:left="4.0dip"
            android:top="4.0dip">
            <shape>
                <solid android:color="#0069a6"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
    </layer-list>
</item>
<item
    android:state_pressed="true">
    <layer-list>
        <item
            android:left="4.0dip"
            android:top="4.0dip">
            <shape>
                <solid android:color="#0069a6"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <layer-list>
        <item android:left="4dip" android:top="4.0dip">
            <shape>
                <solid android:color="#66000000"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
        <item android:bottom="4.0dip" android:right="4.0dip">
            <shape>
                <solid android:color="#0069a6"/>
                <corners android:radius="5.0dip"/>
            </shape>
        </item>
    </layer-list>
</item>
</selector>