AndroidRadioGroup&CheckBox基操与进阶

Android – RadioGroup & CheckBox 基操与进阶

先上效果图（全部demo)：

一. 认识RadioButton 和 RadiaoGroup:

1. RadioButton：一个自带图标样式的Button, 具有两种状态，选中或未选中；(单个RadioButton在选中后，无法通过点击变为未选中)

   
   



2. RadioGroup：当需要多个RadioButton, 但每次仅需选中其中一个时，使用其管理内部的RadioButton。

   基本使用：使用默认图标，自定义选中和未选中状态下字体颜色

   <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="@dimen/padding_15"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="default"android:textSize="@dimen/text_size_20"android:padding="@dimen/padding_5"/><RadioGroupandroid:id="@+id/rGroup1"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><RadioButtonandroid:id="@+id/rButton1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Male"android:textColor="@drawable/selector_text"android:checked="true" /><RadioButtonandroid:id="@+id/rButton2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Female"android:textColor="@drawable/selector_text"/>RadioGroup>
LinearLayout>


   selector_txt.xml

   
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="true" android:color="@color/colorPrimary"/><item android:state_checked="false" android:color="@color/colorBlack"/>
selector>

   

二. 了解CheckBox:

1. CheckBox: 具有两种状态，选中或未选中；具有独立性，多个可同时选中，适用于多种效果叠加；与RadioButton属于同一级别。


2. 与RadioButton的区别:
   
   
   
   1. 单个CheckBox在选中后，可以通过再次点击变为未选中状态；
   
   
   2. 一组CheckBox，可同时选中多个；
   
   
   
   

基本使用：使用默认图标，自定义选中和未选中状态下字体颜色

<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"><CheckBoxandroid:id="@+id/checkbox1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="貂蝉"android:textColor="@drawable/selector_text"/><CheckBoxandroid:id="@+id/checkbox2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="孙尚香"android:textColor="@drawable/selector_text"/><CheckBoxandroid:id="@+id/checkbox3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="公孙离"android:textColor="@drawable/selector_text"/>LinearLayout>


三. 进阶：自定义选中样式

1. 样式一：隐藏图标，随当前状态改变文字背后的背景
   

   <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="@dimen/padding_15"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="self icon"android:textSize="@dimen/text_size_20"android:padding="@dimen/padding_5"/><RadioGroupandroid:id="@+id/rGroup2"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rButton3"android:layout_width="50dp"android:layout_height="wrap_content"android:layout_margin="@dimen/margin_10"android:background="@drawable/selector_check_bg"android:button="@null"android:checked="true"android:gravity="center"android:text="Male" /><RadioButtonandroid:id="@+id/rButton4"android:layout_width="50dp"android:layout_height="wrap_content"android:layout_margin="@dimen/margin_10"android:gravity="center"android:text="Female"android:button="@null"android:background="@drawable/selector_check_bg" />RadioGroup>
LinearLayout>


   selector_check_bg.xml

   
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="true"><shape android:shape="rectangle"><stroke android:color="@color/colorPrimary"android:width="1dp"/><solid android:color="@color/colorPrimary"/><corners android:radius="5dp"/>shape>item><item android:state_checked="false"><shape android:shape="rectangle"><stroke android:color="@color/colorGery"android:width="1dp"/><solid android:color="@color/colorGery"/><corners android:radius="5dp"/>shape>item>
selector>

   




2. 样式二：使用自己的状态图标
   

   <LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:padding="@dimen/padding_15"><RadioGroupandroid:id="@+id/rGroup3"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rButton5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="@dimen/margin_10"android:text="Male"android:textColor="@drawable/selector_text"android:gravity="center"android:button="@drawable/radio_button_style"android:checked="true"/><RadioButtonandroid:id="@+id/rButton6"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="@dimen/margin_10"android:gravity="center"android:text="Female"android:textColor="@drawable/selector_text"android:button="@drawable/radio_button_style"/>RadioGroup>
LinearLayout>


   radio_button_style.xml

   
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_checked="true" android:state_enabled="true" android:state_pressed="true"android:drawable="@drawable/icon_locate_blue"/><item android:state_checked="false" android:state_enabled="true" android:state_pressed="true"android:drawable="@drawable/icon_locate_blue"/><item android:state_checked="true" android:state_enabled="true" android:drawable="@drawable/icon_locate_blue"/><item android:state_checked="false" android:state_enabled="true" android:drawable="@drawable/icon_locate_gery"/><item android:state_checked="true" android:state_enabled="false" android:drawable="@drawable/icon_locate_blue"/><item android:state_checked="false" android:state_enabled="false" android:drawable="@drawable/icon_locate_gery"/>
selector>


   CheckBox（与RadioButton可用同一配置文件）:
   

   <LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="vertical"android:padding="@dimen/padding_15"><CheckBoxandroid:id="@+id/checkbox4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="@dimen/padding_5"android:text="阿离"android:textColor="@drawable/selector_text"android:button="@drawable/radio_button_style"/><CheckBoxandroid:id="@+id/checkbox5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="@dimen/padding_5"android:text="苏苏"android:textColor="@drawable/selector_text"android:button="@drawable/radio_button_style"/>
LinearLayout>``