首页 > 代码库 > (转)RadioButton左侧显示文字,右侧显示按钮时文字不靠边的问题解决

(转)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也行呢?高手请指点,谢谢~~

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