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

转载请注明出处:http://blog.csdn.net/guxiao1201/article/details/40791077

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

效果图

阴影效果原理图

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

最终效果代码:

[html] view plaincopy

<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>  

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

[html] view plaincopy

<?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>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值