RadioButton 左侧显示文字，右侧显示按钮时文字不靠边的问题解决

本文链接：https://blog.youkuaiyun.com/ttdevs/article/details/19166147

项目中有一个这样的需求：

下面三行点击某行即选中，颜色变深。自然的想到使用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>

运行后效果如下：