專案中有一個這樣的需求：

下面三行點選某行即選中，顏色變深。自然的想到使用RadioButton因此決定使用RadioButton和RadioButton實現。

1、RadioButton實現上述效果

        <RadioButton
            android:id="@+id/rbAll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目一"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />
 

這個是RadioButton的實現：首先android:button="@null"，這個用於隱藏RadioButton預設的按鈕；android:drawableRight="@drawable/selector_tb"這個用於顯示自己定義的按鈕，也就是上圖右側的按鈕，當然，如果在左側，你可以設定android:drawableLeft="@drawable/selector_tb"等；然後就是文字的屬性。這樣就設定完畢了。android:drawableRight="@drawable/selector_tb"中的selector_tb是一個選擇器，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_rb_press" android:state_checked="true" />
    <item android:drawable="@drawable/ic_rb_unpress" android:state_checked="false" />
</selector>
 

完整的程式碼如下：

佈局檔案activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <RadioGroup
        android:id="@+id/rgRight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/rbAll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目一"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />

        <RadioButton
            android:id="@+id/rbLimit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目二"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />

        <RadioButton
            android:id="@+id/rbNone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目三"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />
    </RadioGroup>

</LinearLayout>
 

MainActivity.java：

public class MainActivity extends Activity implements OnCheckedChangeListener {
	private RadioGroup rgRight;
	private RadioButton rbAll, rbLimit, rbNone;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		rgRight = (RadioGroup) findViewById(R.id.rgRight);
		rgRight.setOnCheckedChangeListener(this);
		rbAll = (RadioButton) findViewById(R.id.rbAll);
		rbLimit = (RadioButton) findViewById(R.id.rbLimit);
		rbNone = (RadioButton) findViewById(R.id.rbNone);
	}

	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch (checkedId) {
		case R.id.rbAll:
			radioButtonInit();
			rbAll.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));
			break;
		case R.id.rbLimit:
			radioButtonInit();
			rbLimit.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));
			break;
		case R.id.rbNone:
			radioButtonInit();
			rbNone.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));
			break;
		default:
			break;
		}
	}

	private void radioButtonInit() {
		rbAll.setTextColor(getResources().getColor(android.R.color.primary_text_light));
		rbLimit.setTextColor(getResources().getColor(android.R.color.primary_text_light));
		rbNone.setTextColor(getResources().getColor(android.R.color.primary_text_light));
	}

}

2、問題

上面的程式碼執行後效果如下：

上面的Hello world！是居左的，但是下面的文字卻怎麼都不能靠邊。試了各種方法都不行。

最後，無意中給RadioButton新增一個backgroud屬性即可：

<RadioButton
            android:id="@+id/rbAll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目一"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />

最後實現了所需效果。

3、總結

雖然效果實現了，但是這個問題一直不明白為什麼，懷疑可能是RadioButton沒有真正的match_parent。因此寫了下面的測試程式碼：

<RadioGroup
        android:id="@+id/rgRight"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="vertical" >

        <RadioButton
            android:id="@+id/rbAll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目一"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />

        <RadioButton
            android:id="@+id/rbAll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:paddingLeft="0dp"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目一"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />

        <RadioButton
            android:id="@+id/rbLimit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:paddingLeft="4dp"
            android:text="測試條目二"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />

        <RadioButton
            android:id="@+id/rbNone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:padding="0dp"
            android:text="測試條目三"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />

        <RadioButton
            android:id="@+id/rbNone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:button="@null"
            android:drawableRight="@drawable/selector_tb"
            android:text="測試條目三"
            android:textColor="@android:color/primary_text_light"
            android:textSize="14sp" />
    </RadioGroup>

執行後效果如下：

通過對比，感覺應該是左面有padding。嘗試去列印下它的paddingleft：getCompoundPaddingLeft()，得到的結果是76，說明左側是有邊距的。但是，為什麼設定background也行呢？高手請指點，謝謝～～