Android入门之路 - RadioGroup、RadioButton、CheckBox（单复选框）使用进阶

本文只为初级的Android新手而写，多掌握一份简单实用的技能，快速get吧，有问题就留言

2022：蓦然回首，已入行多年，人生的第二个迷茫阶段

初级 - 使用方式
- RadioGroup + RadioButton
- CheckBox
- Demo示例
CheckBox 自定义选中、取消样式
- selector 方式
- style 方式
- 修改选中状态的颜色
- CheckBox 点击无效
- 去除CheckBox默认边距

Let,s gogogo ~

初级 - 使用方式

RadioGroup + RadioButton

提醒：使用RadioGroup+RadioButton的时候，如果要实现向我们效果图中一样的效果，需以下操作

首先原有的Button需要设置为null，也就是Xml中的android:button="@null"
同时自己定义一个样式Drawable下创建一个selector，如（图片资源自己找哈）

<?xml version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/press_check" android:state_checked="true"></item><item android:drawable="@drawable/nomar_check"></item>
</selector>

xml

    <RadioGroupandroid:padding="5dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/rg_gender"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_boy"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="男"android:checked="true"android:button="@null"android:drawableLeft="@drawable/gender_bg"android:drawablePadding="5dp"/><RadioButtonandroid:id="@+id/rb_gril"android:layout_width="wrap_content"android:text="女"android:button="@null"android:drawablePadding="5dp"android:drawableLeft="@drawable/gender_bg"android:layout_marginLeft="10dp"android:layout_height="wrap_content" /></RadioGroup>

RadioGroup+RadioButton 使用方式

        //多个选项，仅支持单选（常见在主页UI架构）RadioGroup mGender = (RadioGroup) findViewById(R.id.rg_gender);RadioButton mGril = (RadioButton) findViewById(R.id.rb_gril);RadioButton mBoy = (RadioButton) findViewById(R.id.rb_boy);//初始化性别，并没有把下面监听的内容直接set进来，所以需要点击后生效，如果想操作可以在这里直接setTextmBoy.setChecked(true);//单选监听mGender.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {if(checkedId==mBoy.getId()){mGenderContent.setText("您老人家竟然是个男的");}else{mGenderContent.setText("您老人家竟然是个女的？？？");}}});

CheckBox

CheckBox 单独监听

        //复选框 - 单独监听mState.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){Toast.makeText(MainActivity.this,"看来你确实是人妖咯",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"你绝对不是人妖！",Toast.LENGTH_SHORT).show();}}});

初级写法

        //多个复选框CheckBox mState1 = (CheckBox) findViewById(R.id.cb_state1);CheckBox mState2 = (CheckBox) findViewById(R.id.cb_state2);CheckBox mState3 = (CheckBox) findViewById(R.id.cb_state3);//多个复选框   因为是初级操作，并没有全部放在list下进行数据集体显示 mState1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){mContent.setText(mState1.getText().toString().trim());Toast.makeText(MainActivity.this,"北京被选取",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"没有选取！",Toast.LENGTH_SHORT).show();}}});mState2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){mContent.setText(mState2.getText().toString().trim());Toast.makeText(MainActivity.this,"上海被选取",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"没有选取！",Toast.LENGTH_SHORT).show();}}});mState3.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){mContent.setText(mState3.getText().toString().trim());Toast.makeText(MainActivity.this,"广州被选取",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"没有选取！",Toast.LENGTH_SHORT).show();}}});}

常见写法

         //多个复选框CheckBox mState1 = (CheckBox) findViewById(R.id.cb_state1);CheckBox mState2 = (CheckBox) findViewById(R.id.cb_state2);CheckBox mState3 = (CheckBox) findViewById(R.id.cb_state3);mState1.setOnCheckedChangeListener(this);mState2.setOnCheckedChangeListener(this);mState3.setOnCheckedChangeListener(this);@Override public void onCheckedChanged(CompoundButton compoundButton, boolean b) {if(compoundButton.isChecked())Toast.makeText(this,compoundButton.getText().toString(),Toast.LENGTH_SHORT).show();}

Demo示例

MainActivity

package com.example.dow.statelistener;import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;
import android.widget.Toast;import java.util.ArrayList;
import java.util.List;public class MainActivity extends AppCompatActivity {private CheckBox mState1;private CheckBox mState2;private CheckBox mState3;private CheckBox mState;private RadioButton mBoy;private RadioButton mGril;private RadioGroup mGender;private TextView mGenderContent;private TextView mContent;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//内容展示区mGenderContent = (TextView) findViewById(R.id.tv_gender);//单选框mGender = (RadioGroup) findViewById(R.id.rg_gender);mGril = (RadioButton) findViewById(R.id.rb_gril);mBoy = (RadioButton) findViewById(R.id.rb_boy);//复选框mState = (CheckBox) findViewById(R.id.cb_state);//多个复选框mState1 = (CheckBox) findViewById(R.id.cb_state1);mState2 = (CheckBox) findViewById(R.id.cb_state2);mState3 = (CheckBox) findViewById(R.id.cb_state3);mContent = (TextView) findViewById(R.id.tv_content);//初始化性别，并没有把下面监听的内容直接set进来，所以需要点击后生效，如果想操作可以在这里直接setTextmBoy.setChecked(true);//单选监听mGender.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {if(checkedId==mBoy.getId()){mGenderContent.setText("您老人家竟然是个男的");}else{mGenderContent.setText("您老人家竟然是个女的？？？");}}});//复选框 - 单独监听mState.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){Toast.makeText(MainActivity.this,"看来你确实是人妖咯",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"你绝对不是人妖！",Toast.LENGTH_SHORT).show();}}});//多个复选框   因为是初级操作，并没有全部放在list下进行数据集体显示 mState1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){mContent.setText(mState1.getText().toString().trim());Toast.makeText(MainActivity.this,"北京被选取",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"没有选取！",Toast.LENGTH_SHORT).show();}}});mState2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){mContent.setText(mState2.getText().toString().trim());Toast.makeText(MainActivity.this,"上海被选取",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"没有选取！",Toast.LENGTH_SHORT).show();}}});mState3.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {if (isChecked){mContent.setText(mState3.getText().toString().trim());Toast.makeText(MainActivity.this,"广州被选取",Toast.LENGTH_SHORT).show();}else{Toast.makeText(MainActivity.this,"没有选取！",Toast.LENGTH_SHORT).show();}}});}
}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.dow.statelistener.MainActivity"><TextViewandroid:layout_width="match_parent"android:id="@+id/tv_gender"android:padding="5dp"android:layout_height="wrap_content"android:text="性别展示区：" /><RadioGroupandroid:padding="5dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/rg_gender"android:orientation="horizontal" ><RadioButtonandroid:id="@+id/rb_boy"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="男"android:checked="true"android:button="@null"android:drawableLeft="@drawable/gender_bg"android:drawablePadding="5dp"/><RadioButtonandroid:id="@+id/rb_gril"android:layout_width="wrap_content"android:text="女"android:button="@null"android:drawablePadding="5dp"android:drawableLeft="@drawable/gender_bg"android:layout_marginLeft="10dp"android:layout_height="wrap_content" /></RadioGroup><LinearLayoutandroid:layout_marginTop="30dp"android:layout_width="match_parent"android:orientation="horizontal"android:layout_height="wrap_content"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="你是不是人妖？"/><CheckBoxandroid:layout_width="wrap_content"android:id="@+id/cb_state"android:layout_height="wrap_content" /></LinearLayout><TextViewandroid:layout_width="match_parent"android:id="@+id/tv_content"android:padding="5dp"android:layout_height="wrap_content"android:text="展示区：" /><CheckBoxandroid:layout_width="wrap_content"android:id="@+id/cb_state1"android:text="北京"android:layout_height="wrap_content" /><CheckBoxandroid:layout_width="wrap_content"android:id="@+id/cb_state2"android:text="上海"android:layout_height="wrap_content" /><CheckBoxandroid:layout_width="wrap_content"android:id="@+id/cb_state3"android:text="广州"android:layout_height="wrap_content" />
</LinearLayout>

CheckBox 自定义选中、取消样式

这些都是在2022年补入的一些东西，虽然初级，但是还是很常用的... 真实不知不觉这么多年了

selector 方式

drawable 创建 selector 选择器 （我在项目中创建了selector 选择器 - select_login_state）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:state_enabled="true"android:state_checked="false"android:drawable="@drawable/ic_login_unselected"/><itemandroid:state_enabled="true"android:state_checked="true"android:drawable="@drawable/ic_login_selected"/>
</selector>

引用方式 android:button="@drawable/select 选择器"

 <CheckBoxandroid:id="@+id/iv_check"android:layout_width="wrap_content"android:button="@drawable/select_login_state"android:layout_height="wrap_content" />

style 方式

创建 CheckBox的style

CheckBox 无边距（常用）

    <style name="checkboxStyle" parent="Theme.AppCompat.Light"><item name="android:button">@drawable/select_login_state</item></style>

或者 CheckBox 有默认边距

  <style name="checkboxStyle" parent="@android:style/Widget.CompoundButton.CheckBox"><item name="android:button">@drawable/select_login_state</item></style>

xml引用方式 style="@style/checkboxStyle"

 <CheckBoxandroid:id="@+id/iv_check"android:layout_width="wrap_content"style="@style/checkboxStyle"android:layout_height="wrap_content" />

修改选中状态的颜色

场景：按理我设置选择器后，选中后为黑色图标，但是老师显示蓝色图标（theme原因）

创建 CheckBox的style

CheckBox 无边距（常用 - UI美观，但有bug）

    <style name="checkboxStyle" parent="Theme.AppCompat.Light"><item name="colorControlNormal">@color/gray</item><item name="colorControlActivated">@color/black</item><item name="android:button">@drawable/select_login_state</item></style>

或者 CheckBox 有默认边距

    <style name="checkboxStyle" parent="@android:style/Widget.CompoundButton.CheckBox"><item name="colorControlNormal">@color/gray</item><item name="colorControlActivated">@color/black</item></style>

xml引用方式 android:theme="@style/checkboxStyle""，android:theme是修改选中颜色的关键属性

 <CheckBoxandroid:id="@+id/iv_check"android:layout_width="wrap_content"android:theme="@style/checkboxStyle"android:button="@drawable/select_login_state"android:layout_height="wrap_content" />

CheckBox 点击无效

首先要看一下发生这个问题的场景是否设置了theme或引用了一些自定义的style?

别人的解决方式：有人说在xml中设置：android:clickable="true" ，但是对我无效!

 <CheckBoxandroid:id="@+id/iv_check"android:layout_width="wrap_content"android:button="@drawable/select_login_state"android:clickable="true"android:theme="@style/checkboxStyle"android:layout_height="wrap_content" />

我的解决方式

提示：首先我设置checkBox的方式，都是通过上面的操作实现的

  <CheckBoxandroid:id="@+id/iv_check"android:layout_width="wrap_content"android:button="@drawable/select_login_state"android:theme="@style/checkboxStyle"android:layout_height="wrap_content" />

因为问题主要在theme用到的style，我都说一下

theme style = parent="Theme.AppCompat.Light"，导致CheckBox点击无效

    <style name="checkboxStyle" parent="Theme.AppCompat.Light"><item name="colorControlNormal">@color/gray</item><item name="colorControlActivated">@color/black</item><item name="android:button">@drawable/select_login_state</item></style>

将theme style 改为 parent="@android:style/Widget.CompoundButton.CheckBox"，可正常点击，但会出现视图间距、边距(想解决这点,继续往下看)

    <style name="checkboxStyle" parent="@android:style/Widget.CompoundButton.CheckBox"><item name="colorControlNormal">@color/gray</item><item name="colorControlActivated">@color/black</item></style>

去除CheckBox默认边距

关于默认边距问题，主要使用以下俩个属性

 android:minHeight="0dp"android:minWidth="0dp"

例如（不过这样设置过后，有可能点击又无效了）

<CheckBoxandroid:id="@+id/iv_check"android:layout_width="wrap_content"android:button="@drawable/select_login_state"android:theme="@style/checkboxStyle"android:minWidth="@dimen/dp_0"android:minHeight="@dimen/dp_0"android:layout_height="wrap_content" />

仅设置android:minWidth="0dp" 属性，可解决CheckBox无法点击的问题

<CheckBoxandroid:id="@+id/iv_check"android:layout_width="wrap_content"android:button="@drawable/select_login_state"android:theme="@style/checkboxStyle"android:minWidth="@dimen/dp_0"android:layout_height="wrap_content" />