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

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

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

recommend_unselected      recommend_selected

                         

smile_unselected                    smile_selected

                         

video_unselected                    video_selected

                              

activity_main.xml的布局

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        >

        <RadioGroup
            android:id="@+id/radio_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <RadioButton
                android:checked="true"
                android:textColor="@drawable/radio_textcolor_selector"
                android:drawableTop="@drawable/recommend_selector"
                android:textSize="21sp"
                android:id="@+id/radio_recommend"
                android:gravity="center"
                android:padding="8dp"
                android:button="@null"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="推荐" />

            <RadioButton
                android:textColor="@drawable/radio_textcolor_selector"
                android:drawableTop="@drawable/smile_selector"
                android:gravity="center"
                android:padding="8dp"
                android:button="@null"
                android:textSize="21sp"
                android:id="@+id/radio_smile"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="段子" />

            <RadioButton
                android:drawableTop="@drawable/video_selector"
                android:textColor="@drawable/radio_textcolor_selector"
                android:gravity="center"
                android:padding="8dp"
                android:button="@null"
                android:textSize="21sp"
                android:id="@+id/radio_video"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="视频" />

        </RadioGroup>
    </LinearLayout>

布局中的两个选择器 ,文字颜色改变的选择器,和drawableTop改变图片的选择器

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false" android:color="@color/radio_unselect"/>
    <item android:state_checked="true" android:color="@color/radio_select"/>
    <item android:color="@color/radio_unselect"/>

</selector>

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="radio_unselect">#BFBFBF</color>
    <color name="radio_select">#03A9F4</color>
  </resources>

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

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

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

    <item android:state_checked="true" android:drawable="@drawable/recommend_selected"/>
    <item android:state_checked="false" android:drawable="@drawable/recommend_unselected"/>
    <item android:drawable="@drawable/recommend_unselected"/>

</selector>

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

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

    <item android:state_checked="true" android:drawable="@drawable/smile_selected"/>
    <item android:state_checked="false" android:drawable="@drawable/smile_unselected"/>
    <item android:drawable="@drawable/smile_unselected"/>

</selector>

第三个 视频 的选择器video_selector.xml

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

    <item android:state_checked="true" android:drawable="@drawable/video_selected"/>
    <item android:state_checked="false" android:drawable="@drawable/video_unselected"/>
    <item android:drawable="@drawable/video_unselected"/>

</selector>

代码中通过butterknife找完id以后,先设置drawableTop初始值,默认是推荐选中,

 //主页底部radiobutton的drawabletop设置图片大小
        //初始值给的这些图片
        //推荐
       /* Drawable drawable_recommend_unselected = getResources().getDrawable(R.drawable.recommend_unselected);
        drawable_recommend_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
        radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected, null, null);*/
        Drawable drawable_recommend_selected = getResources().getDrawable(R.drawable.recommend_selected);
        drawable_recommend_selected.setBounds(0, 0, 60, 60);//60,60为宽高
        radioRecommend.setCompoundDrawables(null, drawable_recommend_selected, null, null);

        //段子
        Drawable drawable_smile_unselected = getResources().getDrawable(R.drawable.smile_unselected);
        drawable_smile_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
        radioSmile.setCompoundDrawables(null, drawable_smile_unselected, null, null);
        //视频
        Drawable drawable_video_unselected = getResources().getDrawable(R.drawable.video_unselected);
        drawable_video_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
        radioVideo.setCompoundDrawables(null, drawable_video_unselected, null, null);

radiobutton的选中状态改变 drawableTop图片也改变(当选中其中一个radiobutton时候,另外两个换成灰色的图片)

//radiogroup的选择切换改变
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup radioGroup, int i) {
                switch (i){
                    case R.id.radio_recommend://推荐按钮,选中推荐,把其他的变灰
                        Drawable drawable_recommend_selected = getResources().getDrawable(R.drawable.recommend_selected);
                        drawable_recommend_selected.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioRecommend.setCompoundDrawables(null, drawable_recommend_selected, null, null);
                       //把另外两个的变灰
                        Drawable drawable_smile_unselected = getResources().getDrawable(R.drawable.smile_unselected);
                        drawable_smile_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioSmile.setCompoundDrawables(null, drawable_smile_unselected, null, null);

                        Drawable drawable_video_unselected = getResources().getDrawable(R.drawable.video_unselected);
                        drawable_video_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioVideo.setCompoundDrawables(null, drawable_video_unselected, null, null);

                        break;
                    case R.id.radio_smile://段子按钮,选中段子,把其他的变灰
                        Drawable drawable_smile_selected = getResources().getDrawable(R.drawable.smile_selected);
                        drawable_smile_selected.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioSmile.setCompoundDrawables(null, drawable_smile_selected, null, null);
                         //把另外两个的变灰
                        Drawable drawable_recommend_unselected = getResources().getDrawable(R.drawable.recommend_unselected);
                        drawable_recommend_unselected.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected, null, null);

                        Drawable drawable_video_unselected1 = getResources().getDrawable(R.drawable.video_unselected);
                        drawable_video_unselected1.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioVideo.setCompoundDrawables(null, drawable_video_unselected1, null, null);

                        break;
                    case R.id.radio_video://视频按钮,选中视频,把其他的变灰
                        Drawable drawable_video_selected= getResources().getDrawable(R.drawable.video_selected);
                        drawable_video_selected.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioVideo.setCompoundDrawables(null, drawable_video_selected, null, null);
                        //把另外两个的变灰
                        Drawable drawable_recommend_unselected1 = getResources().getDrawable(R.drawable.recommend_unselected);
                        drawable_recommend_unselected1.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioRecommend.setCompoundDrawables(null, drawable_recommend_unselected1, null, null);
                        Drawable drawable_smile_unselected1 = getResources().getDrawable(R.drawable.smile_unselected);
                        drawable_smile_unselected1.setBounds(0, 0, 60, 60);//60,60为宽高
                        radioSmile.setCompoundDrawables(null, drawable_smile_unselected1, null, null);

                        break;
                }
            }
        });