Android UI之选择器-ToggleButton、Switch、CheckBox和RadioButton

ToggleButton、Switch、CheckBox和RadioButton都是继承自android.widget.CompoundButton,意思是可选择的,因此它们的用法都很类似。CompoundButton有两个状态,分别是checked和not checked。

Switch是android4.0后出现的控件,可以滑动;ToggleButton、CheckBox可点击选择状态。Switch用户体验效果最佳。

先看一下效果图,如下:

Android UI之选择器-ToggleButton、Switch、CheckBox和RadioButton_第1张图片

图片如下:
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

实现过程:
1.建立/res/drawable/setting_checkbox_button.xml

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

    <item android:drawable="@mipmap/on_button" android:state_checked="true" />
    <item android:drawable="@mipmap/off_button" android:state_checked="false" />
</selector> 

2、在values/styles.xml中添加如下代码:

<style name="MyToggleButton" parent="@android:style/Widget.CompoundButton"> <item name="android:button">@drawable/setting_checkbox_button</item> </style>

3.layout布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/layout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal">

    <ToggleButton  android:id="@+id/togglebutton" style="@style/MyToggleButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:background="#00000000" android:checked="true" android:textOff="" android:textOn="" />

    <Switch  android:id="@+id/witch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@id/togglebutton" android:layout_below="@id/togglebutton" android:layout_marginTop="16dp" android:checked="true" android:gravity="center" android:textOff="" android:textOn="" android:thumb="@mipmap/tb_thumb" android:track="@mipmap/tb_track" />

    <Switch  android:id="@+id/witch2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/witch" android:layout_gravity="left" android:layout_marginTop="16dp" android:checked="true" android:textOff="" android:textOn="" />

    <CheckBox  android:id="@+id/check" style="@style/MyToggleButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/witch2" android:layout_marginTop="16dp" android:checked="true" android:textOff="" android:textOn="" />

    <RadioButton  android:id="@+id/redio" style="@style/MyToggleButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/check" android:layout_marginTop="16dp" android:checked="true" android:textOff="" android:textOn="" />

</RelativeLayout>  

你可能感兴趣的:(Android UI之选择器-ToggleButton、Switch、CheckBox和RadioButton)