1. 程式人生 > >Android selector 最佳寫法 用一張圖片實現按鈕按下和普通效果的樣式

Android selector 最佳寫法 用一張圖片實現按鈕按下和普通效果的樣式

第一種方法(強烈推薦)

方法: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就行了。第二種方法明顯就比較繁瑣,需要多建立一個檔案,沒有模組化。