Android radiobutton 利用 SpannableString 实现图文混排 实现 iOS segmentcontrol效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_16624353/article/details/69791120

IOS上有个控件是segmentcontrol,但是android没有。。。但是android有各种第三方的segmentcontrol实现的第三方，但是现成的里面的都是文字，所以需要稍微更改一下，用SpannableString来实现图文混排的效果，而按压的效果，我是通过代码动态控制的。。。

先看下效果

两个radiobutton外面套的是第三方的 SegmentedGroup,下面是布局文件

   <info.hoang8f.android.segmented.SegmentedGroup
        android:id="@+id/segment"
        android:layout_width="120dp"
        android:layout_height="match_parent"
        fresco:sc_corner_radius="5dp"
        fresco:sc_border_width="1dp"
        fresco:sc_checked_text_color="@color/title_color"
        fresco:sc_tint_color="@color/home_search"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"
        android:layout_gravity="center_horizontal">
        <RadioButton
            android:id="@+id/sex_man"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            style="@style/RadioButton"
            android:textSize="12.8sp"
            android:textColor="@color/title_color" />
        <RadioButton
            android:id="@+id/sex_women"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            style="@style/RadioButton"
            android:textSize="12.8sp"
            android:textColor="@color/home_search"

            />
    </info.hoang8f.android.segmented.SegmentedGroup>

最后是代码，这个是外层的segmentedgroup的监听。用于切换图片

 segmentgroup.setOnCheckedChangeListener((radioGroup, i) -> {
            switch (i)
            {
                case R.id.sex_man:
                    Gender = 1;
                    setManSpan(R.drawable.boy_24);
                    setGirlSpan(R.drawable.girl_24h);
                    break;
                case R.id.sex_women:
                    Gender = 0;
                    setGirlSpan(R.drawable.girl_24);
                    setManSpan(R.drawable.boy_24h);
                    break;
            }
        });

下面是如何设置SpannableString的图文混排

public void setGirlSpan(int Drawble){
        SpannableString spannableStringImg=new SpannableString("女生 (图片)");//此处留有空格是为了为图片和文字间留出空挡，(图片)这个等下会被图片代替
        Drawable drawable=getResources().getDrawable(Drawble);
        drawable.setBounds(0,0,(int)getResources().getDimension(R.dimen.dimen_22),(int)getResources().getDimension(R.dimen.dimen_21));//后面的两个参数设置图片的宽高
        ImageSpan imageSpan=new ImageSpan(drawable);
        spannableStringImg.setSpan(imageSpan,3,7,Spannable.SPAN_INCLUSIVE_INCLUSIVE);//3,7是"女生 (图片)"这个字符串从3-7位所占位置被图片替换，后面的属性是前后都包括。
        sex_women.setText(spannableStringImg);
    }

    public void setManSpan(int Drawable){
        SpannableString spannableStringImg=new SpannableString("男生 (图片)");
        Drawable drawable=getResources().getDrawable(Drawable);
        drawable.setBounds(0,0,(int)getResources().getDimension(R.dimen.dimen_22),(int)getResources().getDimension(R.dimen.dimen_21));
        ImageSpan imageSpan=new ImageSpan(drawable);
        spannableStringImg.setSpan(imageSpan,3,7,Spannable.SPAN_INCLUSIVE_INCLUSIVE);
        sex_man.setText(spannableStringImg);
    }