Android RadioButton自定義樣式正确姿勢

1. 圖檔示例

2.說明

在移動應用開發過程中，我們會比較多的使用 RadioButton，但是好多時候并不了解怎樣正确的使用它，如果充分了解到他的使用方法和好處後，你會感受到 RadioButton 其實是非常強大和好用的。

如果你有以下問題你可以通過這篇文章擷取一些答案：

• 給 RadioButton 自定義樣式
• 自定義樣式後圖檔變形
• 自定義樣式後，再設定text屬性，圖檔變形

3. 自定義樣式

自定義樣式其實挺簡單，分為以下幾步：

1. 準備兩張圖檔（選中狀态和非選中狀态）。
2. 添加一個選擇器
3. 給 RadioButton 設定 button 屬性為 @null
4. 設定 RadioButton 的 background 為該選擇器
5. 完成。

代碼示例如下：

// 選擇器
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_unchecked" android:state_checked="false"></item>
    <item android:drawable="@drawable/ic_checked"></item>
</selector>

// View布局
<RadioButton
	    android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="false"
		android:background="@drawable/selector_radio"
        android:button="@null"
        android:text="你好嗎"/>
           

問題：

這個時候你會發現圖檔有些變形，但檢視圖檔的寬和高發現圖檔的尺寸是正常的，但放上去确變形了。

4. 自定義樣式後圖檔變形解決

一般情況你可以通過2種途徑來解決這個問題：

1. 給 RadioButton 的設定固定的寬度和高度
2. 設定 textsize 為 0dp。

使用這兩種方法後确實會解決現有問題，but， 如果你有添加文本的需求，給它添加文字後變形問題又會出現。當然你可以 RadioButton上隻放圖檔，至于文本嘛，可以再添加一個 TextView 來放文本，這種方法确實可以解決添加文本後變形的問題，但是這也太麻煩了吧，人家 RadioButton 給你提供好了 text 屬性讓你來放置文本，你還要再寫一次，多此一舉。

5. text屬性引起的圖檔變形解決

之前看網上好多種說法都是說禁用 button 屬性，再設定 background，其實這個方法并不優雅，button 和 background 本來就是用來做兩個事情的，你非得把人的button屬性禁用掉，再用background來實作樣式，雖然大體上也可以實作，但是這個的支援肯定不是那麼好。

正确的姿勢應該是把你自定義的 selecter 設定到 button 屬性上，這樣你再設定文本就不會出現圖檔變形的問題了。

這樣設定以後你會發現圖檔與文本的間距變小了，該怎麼設定呢？

答案：通過 android:paddingHorizontal=“10dp” 這個屬性就可以很easy 的設定文本與圖檔之間的間距。

6.總結

不要亂用 background 屬性，自定義樣式的時候給 button 屬性設定選擇器，用正确的姿勢，你将省很多事。正确示例：

<RadioButton
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:paddingHorizontal="10dp"
     android:button="@drawable/selector_radio"
     android:text="你好嗎"
     android:textSize="14sp"
     android:textColor="@color/black"/>