RadioButton的简单实践

前言

今天来实现一个设计图中的tab切换按钮,只需要点击切换不需要滑动,所以我直接锁定了RadioButton来实现。

样式

背景图

上面的tab切换可以看见外观是矩形圆角,但是我用RadioButton是左右两个按钮,所以需要两个背景图。
manual_tab_radio_select

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

    <item
        android:state_checked="true">
        <shape >
            <solid android:color="@color/def_text_alert_blue" />

            <stroke android:width="@dimen/dp_1" android:color="@color/def_text_alert_blue" />

            <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" />

            <corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>

    <item >
        <shape>
            <solid android:color="@color/white" />

            <stroke android:width="@dimen/dp_1" android:color="@color/def_text_alert_blue" />

            <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="10dp" />

            <corners android:bottomRightRadius="5dp" android:topRightRadius="5dp" />
        </shape>
    </item>

</selector>

auto_tab_radio_select

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


    <item
        android:state_checked="true">
        <shape >
            <solid android:color="@color/def_text_alert_blue" />

            <stroke android:width="@dimen/dp_1" android:color="@color/def_text_alert_blue" />

            <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="1dp" />

            <corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" />
        </shape>
    </item>


    <item >
        <shape>
            <solid android:color="@color/white" />

            <stroke android:width="@dimen/dp_1" android:color="@color/def_text_alert_blue" />

            <padding android:bottom="1dp" android:left="1dp" android:right="1dp" android:top="10dp" />

            <corners android:bottomLeftRadius="5dp" android:topLeftRadius="5dp" />
        </shape>
    </item>

</selector>

字体颜色

可以看见字体颜色也是在状态不同的时候变色,这里也需要准备。
tab_text_color_select

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="true" />
    <item android:color="@color/def_text_alert_blue" android:state_checked="false" />
    <item android:color="@color/def_text_alert_blue"/>
</selector>

布局代码

我在编写好布局的时候,因为没有给radiobutton编写id,导致我在测试界面的时候,按钮是多选状态，后面尝试了下是因为布局控件没写Id（至少写一个id）。
只有tab的代码片段

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

        <RadioButton
            android:id="@+id/tab_radio_auto"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:button="@null"
            android:paddingTop="@dimen/dp_5"
            android:paddingBottom="@dimen/dp_5"
            android:background="@drawable/wb_sale_report_auto_tab_radio_select"
            android:textColor="@color/wb_sale_report_tab_color"
            android:checked="true"
            android:text="自动生成"/>

        <RadioButton
            android:id="@+id/tab_radio_manual"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/dp_5"
            android:paddingBottom="@dimen/dp_5"
            android:background="@drawable/wb_sale_report_manual_tab_radio_select"
            android:textColor="@color/wb_sale_report_tab_color"
            android:button="@null"
            android:gravity="center"
            android:text="手动输入">
        </RadioButton>

    </RadioGroup>

代码

        mRadioGroup = findViewById(R.id.radiogroup);
        mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.tab_radio_auto:
                        AppToastMgr.show(group.getContext(),"auto");
                        break;
                    case R.id.tab_radio_manual:
                        AppToastMgr.show(group.getContext(),"manual");
                        break;
                    default:
                        break;
                }
            }
        });

效果图