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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

作者：发布日期：2014-02-13 21:00:45
我来说两句(0)

Tag标签： RadioButton 左侧显示

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

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

1、RadioButton实现上述效果

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

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：

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：

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属性即可：

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。因此写了下面的测试代码：

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也行呢？高手请指点，谢谢～～