当前位置:   article > 正文

选项卡radiobutton+drawableTop切换改变文字颜色和图片_radiobutton drawabletop 选择器

radiobutton drawabletop 选择器

实现效果:radiobutton使用drawableTop显示图片,(xml中使用drawableTop选择器和文字颜色改变的选择器)代码中做图片大小的设置)




放上这6张图片(未选中  ,  选中)

recommend_unselected      recommend_selected

                         

smile_unselected                    smile_selected

                         

video_unselected                    video_selected

                              

activity_main.xml的布局

  1. <LinearLayout
  2. android:layout_width="match_parent"
  3. android:layout_height="100dp"
  4. >
  5. <RadioGroup
  6. android:id="@+id/radio_group"
  7. android:layout_width="match_parent"
  8. android:layout_height="wrap_content"
  9. android:orientation="horizontal" >
  10. <RadioButton
  11. android:checked="true"
  12. android:textColor="@drawable/radio_textcolor_selector"
  13. android:drawableTop="@drawable/recommend_selector"
  14. android:textSize="21sp"
  15. android:id="@+id/radio_recommend"
  16. android:gravity="center"
  17. android:padding="8dp"
  18. android:button="@null"
  19. android:layout_width="0dp"
  20. android:layout_height="wrap_content"
  21. android:layout_weight="1"
  22. android:text="推荐" />
  23. <RadioButton
  24. android:textColor="@drawable/radio_textcolor_selector"
  25. android:drawableTop="@drawable/smile_selector"
  26. android:gravity="center"
  27. android:padding="8dp"
  28. android:button="@null"
  29. android:textSize="21sp"
  30. android:id="@+id/radio_smile"
  31. android:layout_width="0dp"
  32. android:layout_height="wrap_content"
  33. android:layout_weight="1"
  34. android:text="段子" />
  35. <RadioButton
  36. android:drawableTop="@drawable/video_selector"
  37. android:textColor="@drawable/radio_textcolor_selector"
  38. android:gravity="center"
  39. android:padding="8dp"
  40. android:button="@null"
  41. android:textSize="21sp"
  42. android:id="@+id/radio_video"
  43. android:layout_width="0dp"
  44. android:layout_height="wrap_content"
  45. android:layout_weight="1"
  46. android:text="视频" />
  47. </RadioGroup>
  48. </LinearLayout>
布局中的两个选择器 ,文字颜色改变的选择器,和drawableTop改变图片的选择器

文字颜色改变的选择器 radio_textcolor_seletor.xml,(res-drawable-New-Drawable resource file目录下建)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:state_checked="false" android:color="@color/radio_unselect"/>
  4. <item android:state_checked="true" android:color="@color/radio_select"/>
  5. <item android:color="@color/radio_unselect"/>
  6. </selector>

value下面colors.xml里面放两个颜色,一个是选中时候的颜色,一个是未选中的颜色

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <color name="radio_unselect">#BFBFBF</color>
  4. <color name="radio_select">#03A9F4</color>
  5. </resources>

drawableTop图片改变的选择器,有三个,因为有三张图片(res-drawable-New-Drawable resource file目录下建)

第一个 推荐 的选择器recommend_selector.xml

  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2. <item android:state_checked="true" android:drawable="@drawable/recommend_selected"/>
  3. <item android:state_checked="false" android:drawable="@drawable/recommend_unselected"/>
  4. <item android:drawable="@drawable/recommend_unselected"/>
  5. </selector>

第二个 段子 的选择器smile_selector.xml

  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2. <item android:state_checked="true" android:drawable="@drawable/smile_selected"/>
  3. <item android:state_checked="false" android:drawable="@drawable/smile_unselected"/>
  4. <item android:drawable="@drawable/smile_unselected"/>
  5. </selector>
第三个 视频 的选择器video_selector.xml

  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  2. <item android:state_checked="true" android:drawable="@drawable/video_selected"/>
  3. <item android:state_checked="false" android:drawable="@drawable/video_unselected"/>
  4. <item android:drawable="@drawable/video_unselected"/>
  5. </selector>
代码中通过butterknife找完id以后,先设置drawableTop初始值,默认是推荐选中,

  1. //主页底部radiobutton的drawabletop设置图片大小
  2. //初始值给的这些图片
  3. //推荐
  4. /* Drawable drawable_recommend_unselected = getResources().getDrawable(R.drawable.recommend_unselected);
  5. drawable_recommend_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
  6. radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected, null, null);*/
  7. Drawable drawable_recommend_selected = getResources().getDrawable(R.drawable.recommend_selected);
  8. drawable_recommend_selected.setBounds(0, 0, 60, 60);//60,60为宽高
  9. radioRecommend.setCompoundDrawables(null, drawable_recommend_selected, null, null);
  10. //段子
  11. Drawable drawable_smile_unselected = getResources().getDrawable(R.drawable.smile_unselected);
  12. drawable_smile_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
  13. radioSmile.setCompoundDrawables(null, drawable_smile_unselected, null, null);
  14. //视频
  15. Drawable drawable_video_unselected = getResources().getDrawable(R.drawable.video_unselected);
  16. drawable_video_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
  17. radioVideo.setCompoundDrawables(null, drawable_video_unselected, null, null);
radiobutton的选中状态改变 drawableTop图片也改变(当选中其中一个radiobutton时候,另外两个换成灰色的图片)

  1. //radiogroup的选择切换改变
  2. radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
  3. @Override
  4. public void onCheckedChanged(RadioGroup radioGroup, int i) {
  5. switch (i){
  6. case R.id.radio_recommend://推荐按钮,选中推荐,把其他的变灰
  7. Drawable drawable_recommend_selected = getResources().getDrawable(R.drawable.recommend_selected);
  8. drawable_recommend_selected.setBounds(0, 0, 60, 60);//60,60为宽高
  9. radioRecommend.setCompoundDrawables(null, drawable_recommend_selected, null, null);
  10. //把另外两个的变灰
  11. Drawable drawable_smile_unselected = getResources().getDrawable(R.drawable.smile_unselected);
  12. drawable_smile_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
  13. radioSmile.setCompoundDrawables(null, drawable_smile_unselected, null, null);
  14. Drawable drawable_video_unselected = getResources().getDrawable(R.drawable.video_unselected);
  15. drawable_video_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
  16. radioVideo.setCompoundDrawables(null, drawable_video_unselected, null, null);
  17. break;
  18. case R.id.radio_smile://段子按钮,选中段子,把其他的变灰
  19. Drawable drawable_smile_selected = getResources().getDrawable(R.drawable.smile_selected);
  20. drawable_smile_selected.setBounds(0, 0, 60, 60);//60,60为宽高
  21. radioSmile.setCompoundDrawables(null, drawable_smile_selected, null, null);
  22. //把另外两个的变灰
  23. Drawable drawable_recommend_unselected = getResources().getDrawable(R.drawable.recommend_unselected);
  24. drawable_recommend_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
  25. radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected, null, null);
  26. Drawable drawable_video_unselected1 = getResources().getDrawable(R.drawable.video_unselected);
  27. drawable_video_unselected1.setBounds(0, 0, 60, 60);//60,60为宽高
  28. radioVideo.setCompoundDrawables(null, drawable_video_unselected1, null, null);
  29. break;
  30. case R.id.radio_video://视频按钮,选中视频,把其他的变灰
  31. Drawable drawable_video_selected= getResources().getDrawable(R.drawable.video_selected);
  32. drawable_video_selected.setBounds(0, 0, 60, 60);//60,60为宽高
  33. radioVideo.setCompoundDrawables(null, drawable_video_selected, null, null);
  34. //把另外两个的变灰
  35. Drawable drawable_recommend_unselected1 = getResources().getDrawable(R.drawable.recommend_unselected);
  36. drawable_recommend_unselected1.setBounds(0, 0, 60, 60);//60,60为宽高
  37. radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected1, null, null);
  38. Drawable drawable_smile_unselected1 = getResources().getDrawable(R.drawable.smile_unselected);
  39. drawable_smile_unselected1.setBounds(0, 0, 60, 60);//60,60为宽高
  40. radioSmile.setCompoundDrawables(null, drawable_smile_unselected1, null, null);
  41. break;
  42. }
  43. }
  44. });






声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/733734
推荐阅读
相关标签
  

闽ICP备14008679号