使用爲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>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章