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

第一種方法（強烈推薦）

方法：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