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

作者：  发布日期：2014-02-13 21:00:45

我来说两句(0)

0

Tag标签：RadioButton  左侧  显示  

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

  

  下面三行点击某行即选中，颜色变深。自然的想到使用RadioButton因此决定使用RadioButton和RadioButton实现。

  1、RadioButton实现上述效果

   

  view sourceprint?

  01.<RadioButton

  02.android:id="@+id/rbAll"

  03.android:layout_width="match_parent"

  04.android:layout_height="wrap_content"

  05.android:button="@null"

  06.android:drawableRight="@drawable/selector_tb"

  07.android:text="测试条目一"

  08.android:textColor="@android:color/primary_text_light"

  09.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是一个选择器，代码如下：

   

   

  view sourceprint?

  1.<?xml version="1.0" encoding="utf-8"?>

  2.<selector xmlns:android="http://schemas.android.com/apk/res/android">

  3.<item android:drawable="@drawable/ic_rb_press" android:state_checked="true" />

  4.<item android:drawable="@drawable/ic_rb_unpress" android:state_checked="false" />

  5.</selector>

   

  完整的代码如下：

  布局文件activity_main.xml：

   

  view sourceprint?

  01.<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

  02.xmlns:tools="http://schemas.android.com/tools"

  03.android:layout_width="match_parent"

  04.android:layout_height="match_parent"

  05.android:orientation="vertical"

  06.android:background="@android:color/white"

  07.tools:context=".MainActivity" >

  08. 

  09.<TextView

  10.android:layout_width="wrap_content"

  11.android:layout_height="wrap_content"

  12.android:text="@string/hello_world" />

  13. 

  14.<RadioGroup

  15.android:id="@+id/rgRight"

  16.android:layout_width="match_parent"

  17.android:layout_height="wrap_content"

  18.android:layout_marginTop="8dp"

  19.android:orientation="vertical" >

  20. 

  21.<RadioButton

  22.android:id="@+id/rbAll"

  23.android:layout_width="match_parent"

  24.android:layout_height="wrap_content"

  25.android:background="@android:color/white"

  26.android:button="@null"

  27.android:drawableRight="@drawable/selector_tb"

  28.android:text="测试条目一"

  29.android:textColor="@android:color/primary_text_light"

  30.android:textSize="14sp" />

  31. 

  32.<RadioButton

  33.android:id="@+id/rbLimit"

  34.android:layout_width="match_parent"

  35.android:layout_height="wrap_content"

  36.android:background="@android:color/white"

  37.android:button="@null"

  38.android:drawableRight="@drawable/selector_tb"

  39.android:text="测试条目二"

  40.android:textColor="@android:color/primary_text_light"

  41.android:textSize="14sp" />

  42. 

  43.<RadioButton

  44.android:id="@+id/rbNone"

  45.android:layout_width="match_parent"

  46.android:layout_height="wrap_content"

  47.android:button="@null"

  48.android:drawableRight="@drawable/selector_tb"

  49.android:text="测试条目三"

  50.android:textColor="@android:color/primary_text_light"

  51.android:textSize="14sp" />

  52.</RadioGroup>

  53. 

  54.</LinearLayout>
  
  MainActivity.java：

   

   

  view sourceprint?

  01.public class MainActivity extends Activity implements OnCheckedChangeListener {

  02.private RadioGroup rgRight;

  03.private RadioButton rbAll, rbLimit, rbNone;

  04. 

  05.@Override

  06.protected void onCreate(Bundle savedInstanceState) {

  07.super.onCreate(savedInstanceState);

  08.setContentView(R.layout.activity_main);

  09. 

  10.rgRight = (RadioGroup) findViewById(R.id.rgRight);

  11.rgRight.setOnCheckedChangeListener(this);

  12.rbAll = (RadioButton) findViewById(R.id.rbAll);

  13.rbLimit = (RadioButton) findViewById(R.id.rbLimit);

  14.rbNone = (RadioButton) findViewById(R.id.rbNone);

  15.}

  16. 

  17.@Override

  18.public void onCheckedChanged(RadioGroup group, int checkedId) {

  19.switch (checkedId) {

  20.case R.id.rbAll:

  21.radioButtonInit();

  22.rbAll.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));

  23.break;

  24.case R.id.rbLimit:

  25.radioButtonInit();

  26.rbLimit.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));

  27.break;

  28.case R.id.rbNone:

  29.radioButtonInit();

  30.rbNone.setTextColor(getResources().getColor(android.R.color.secondary_text_dark));

  31.break;

  32.default:

  33.break;

  34.}

  35.}

  36. 

  37.private void radioButtonInit() {

  38.rbAll.setTextColor(getResources().getColor(android.R.color.primary_text_light));

  39.rbLimit.setTextColor(getResources().getColor(android.R.color.primary_text_light));

  40.rbNone.setTextColor(getResources().getColor(android.R.color.primary_text_light));

  41.}

  42. 

  43.}
  
  

   

  2、问题

   

  上面的代码运行后效果如下：

  

  上面的Hello world！是居左的，但是下面的文字却怎么都不能靠边。试了各种方法都不行。

  最后，无意中给RadioButton添加一个backgroud属性即可：

   

  view sourceprint?

  01.<RadioButton

  02.android:id="@+id/rbAll"

  03.android:layout_width="match_parent"

  04.android:layout_height="wrap_content"

  05.android:background="@android:color/white"

  06.android:button="@null"

  07.android:drawableRight="@drawable/selector_tb"

  08.android:text="测试条目一"

  09.android:textColor="@android:color/primary_text_light"

  10.android:textSize="14sp" />
  
  最后实现了所需效果。

   

  3、总结

   

  虽然效果实现了，但是这个问题一直不明白为什么，怀疑可能是RadioButton没有真正的match_parent。因此写了下面的测试代码：

   

  view sourceprint?

  01.<RadioGroup

  02.android:id="@+id/rgRight"

  03.android:layout_width="match_parent"

  04.android:layout_height="wrap_content"

  05.android:layout_marginTop="8dp"

  06.android:orientation="vertical" >

  07. 

  08.<RadioButton

  09.android:id="@+id/rbAll"

  10.android:layout_width="match_parent"

  11.android:layout_height="wrap_content"

  12.android:layout_margin="4dp"

  13.android:button="@null"

  14.android:drawableRight="@drawable/selector_tb"

  15.android:text="测试条目一"

  16.android:textColor="@android:color/primary_text_light"

  17.android:textSize="14sp" />

  18. 

  19.<RadioButton

  20.android:id="@+id/rbAll"

  21.android:layout_width="match_parent"

  22.android:layout_height="wrap_content"

  23.android:layout_margin="4dp"

  24.android:paddingLeft="0dp"

  25.android:button="@null"

  26.android:drawableRight="@drawable/selector_tb"

  27.android:text="测试条目一"

  28.android:textColor="@android:color/primary_text_light"

  29.android:textSize="14sp" />

  30. 

  31.<RadioButton

  32.android:id="@+id/rbLimit"

  33.android:layout_width="match_parent"

  34.android:layout_height="wrap_content"

  35.android:button="@null"

  36.android:drawableRight="@drawable/selector_tb"

  37.android:paddingLeft="4dp"

  38.android:text="测试条目二"

  39.android:textColor="@android:color/primary_text_light"

  40.android:textSize="14sp" />

  41. 

  42.<RadioButton

  43.android:id="@+id/rbNone"

  44.android:layout_width="match_parent"

  45.android:layout_height="wrap_content"

  46.android:button="@null"

  47.android:drawableRight="@drawable/selector_tb"

  48.android:padding="0dp"

  49.android:text="测试条目三"

  50.android:textColor="@android:color/primary_text_light"

  51.android:textSize="14sp" />

  52. 

  53.<RadioButton

  54.android:id="@+id/rbNone"

  55.android:layout_width="match_parent"

  56.android:layout_height="wrap_content"

  57.android:background="@android:color/white"

  58.android:button="@null"

  59.android:drawableRight="@drawable/selector_tb"

  60.android:text="测试条目三"

  61.android:textColor="@android:color/primary_text_light"

  62.android:textSize="14sp" />

  63.</RadioGroup>
  运行后效果如下：

   

  
   

  通过对比，感觉应该是左面有padding。但是，为什么设置background也行呢？高手请指点，谢谢～～