用一張圖片實現按鈕按下和普通效果的樣式

第一種方法（強烈推薦）

方法：selector做遮罩，原圖做background。

我們做按鈕的時候經常需要用兩個圖片來實現按鈕點擊和普通狀態的樣式，這就需要提供兩種圖片，而且每個分辨率下還有多套圖片，大大增加了apk的大小。

我們希望讓這兩張圖片合二為一，而且還能實現兩種或者多種狀態，怎么做呢？我們首先建立一個圓形的selector，正常情況下是完全透明的，按下后透明度變小。

normal_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

然后只需要問美工拿一張圖片就好了，比如這張：

關鍵的一步來了，現在我們需要把selector文件當作遮罩，然后用上面的藍色icon作為bg，放到一個ImageButton中：

<ImageButton
        android:layout_width="100dp"
        android:layout_height="100dp"
       
        android:src="@drawable/normal_bg_selector"
        android:background="@drawable/blue_btn_icon"
     
        />

最后只需要調整下padding就好了，如果你需要矩形的圖片，就按照上面的方法建立一個矩形的遮罩即可。如果你們公司用的圓角矩形，直接問設計師要個圓角的標准就行，再建立一個selector文件吧。下面是最簡單的原型和矩形的遮罩文件：

normal_oval_mask_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="oval">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

normal_rectangle_mask_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#21000000" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

 

第二種方法（不推薦）

當然我們還有另一種方法來實現這個效果，用的是layer-list。先放一個selector做的遮罩，然后在遮罩下面疊加一個button的icon。這樣就做好button按下后的樣式。

blue_btn_selector_layerlist.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list   xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:drawable="@drawable/blue_btn_icon" />    
    <item android:drawable="@drawable/blue_btn_mask_shape" />    
</layer-list> 

現在我們有了按鈕普通的樣式和按鈕按下的樣式，之后就可以建立一個selector：

blue_button_bg_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_pressed="true"
        android:drawable="@drawable/blue_btn_selector_layerlist" />

    <item
        android:drawable="@drawable/blue_btn_icon" />
</selector>

最后就只需要在button的background設置這個blue_button_bg_selector.xml就行了。第二種方法明顯就比較繁瑣，需要多建立一個文件，沒有模塊化。

 

參考自：

http://blog.sina.com.cn/s/blog_783ede030101ixr9.html