Android按钮状态的切换

1.概述

android中按钮控制页面切换的场景还是非常多的。实现的方式也是多种多样，下面介绍一种radioGroup实现，特别简单。效果图：



2。代码解析
其实很简单，设置最左侧的radioButton的左下和坐上的弧度显示，中间radioButton的弧度不显示和右侧radioButton的右下右上弧度显示而已。

第一步简单的布局，实现radioGroup嵌套radioButton,可以根据项目需求进行简单的页面调整。代码：

<RadioGroup
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:layout_centerInParent="true"
    android:background="@drawable/radiogroup_back"
    android:orientation="horizontal"
    android:padding="1dp">

    <RadioButton
        style="@style/buttonset"
        android:background="@drawable/button_selector"
        android:checked="true"
        android:text="昨天" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#0172c6" />

    <RadioButton
        style="@style/buttonset"
        android:background="@drawable/button_selector_middle"
        android:text="今天" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#0172c6" />

    <RadioButton
        style="@style/buttonset"
        android:background="@drawable/button_selector_right"
        android:text="明天" />

</RadioGroup>

第二步，设置radioGroup的background。radiogroup_back代码如下：

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

    <!--外部线的宽度和颜色设置-->
    <stroke
        android:width="1dp"
        android:color="#0172c6" />

    <!--外部线的弧度-->
    <corners android:radius="5dp" />

    <!--内部背景颜色-->
    <solid android:color="#ffffff" />
</shape>

第三步，设置radioButton的style，简单设置及文字变化，style buttonset代码如下：

<!--设置radiobutton的字体颜色-->
<style name="buttonset">
    <item name="android:layout_width">0dp</item>
    <item name="android:gravity">center</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_weight">1.0</item>
    <item name="android:button">@null</item>
    <item name="android:textColor">@drawable/textcolor_chose</item>
</style>

textcolor_chose 配置

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

    <!--选中状态-->
    <item android:color="#ffffff" android:state_selected="true" />
    <item android:color="#ffffff" android:state_checked="true" />
    <item android:color="#ffffff" android:state_pressed="true" />

    <!--默认状态-->
    <item android:color="#000000" />

</selector>

第四步：左边radioButton的背景设置 button_selector：

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

    <!--选中获得焦点状态-->

    <item android:drawable="@drawable/button_checked" android:state_focused="true" />    <item android:drawable="@drawable/button_checked" android:state_checked="true" />    <item android:drawable="@drawable/button_checked" android:state_pressed="true" />

    <!--默认未选中的状态-->

   <item android:drawable="@drawable/button_selector_shape" /></selector>

选中获得焦点的设置  button_checked :

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

    <!--内部背景颜色-->
    <solid android:color="#0172c6" />
    <!--外部线的颜色和弧度-->
    <corners
        android:bottomLeftRadius="4dp"
        android:topLeftRadius="4dp" />
</shape>

默认未选中状态 button_selector_shape:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--内部背景颜色-->
    <solid android:color="#ffffff" />
    <!--外部线的弧度-->
    <corners
        android:bottomLeftRadius="5dp"
        android:topLeftRadius="5dp" />
    <!--外部线的宽度和颜色设置-->
    <stroke
        android:width="1dp"
        android:color="#00000000" />
</shape>

第五步：中间radioButton的背景设置 button_selectormiddle 

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

    <!--选中获取焦点状态-->

   <item android:drawable="@drawable/button_selector_middle_shape" android:state_focused="true" />    <item android:drawable="@drawable/button_selector_middle_shape" android:state_checked="true" />    <item android:drawable="@drawable/button_selector_middle_shape" android:state_pressed="true" />

    <!--默认未选中状态-->
    <item android:drawable="@drawable/button_selector_middle_nomal" />

</selector>

选中获取焦点的drable设置 button_selector_middle_shape

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置背景颜色-->
    <solid android:color="#0172c6" />

</shape>

默认未选状态 button_selector_middle_nomal

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--内部背景颜色-->
    <solid android:color="#ffffff" />
    <!--设置外围宽度及颜色-->
    <stroke
        android:width="1dp"
        android:color="#00000000" />
</shape>

第六步：右侧radioButton的背景设置 button_selector_right

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--选中获取焦点的状态-->
    <item android:drawable="@drawable/button_right_shape" android:state_focused="true" />
    <item android:drawable="@drawable/button_right_shape" android:state_checked="true" />
    <item android:drawable="@drawable/button_right_shape" android:state_pressed="true" />
    <!--默认未选中状态-->
    <item android:drawable="@drawable/button_right_shape_nomal" />

</selector>

选中获取焦点的drable设置 button_right_shape

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--内部背景颜色-->
    <solid android:color="#0172c6" />
    <!--设置右下和右上的弧度-->
    <corners
        android:bottomRightRadius="4dp"
        android:topRightRadius="4dp" />
</shape>

默认未选中状态 button_right_shape_nomal

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#ffffff" />
    <!--设置右下右上弧度-->
    <corners
        android:bottomRightRadius="5dp"
        android:topRightRadius="5dp" />
    <!--设置外部线宽度和颜色不显示-->
    <stroke
        android:width="1dp"
        android:color="#00000000" />
</shape>