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

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


Let,s gogogo ~

android 单选标签选择 android单选框样式_RadioGroup

初级 - 使用方式

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

<RadioGroup
        android:padding="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/rg_gender"
        android:orientation="horizontal"
        >
        
    <RadioButton
            android: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"
            />
    <RadioButton
            android: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进来，所以需要点击后生效，如果想操作可以在这里直接setText
        mBoy.setChecked(true);

        //单选监听
        mGender.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                if(checkedId==mBoy.getId()){
                    mGenderContent.setText("您老人家竟然是个男的");
                }else{
                    mGenderContent.setText("您老人家竟然是个女的？？？");
                }
            }
        });
CheckBox

CheckBox 单独监听

//复选框 - 单独监听
        mState.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public 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() {
            @Override
            public 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() {
            @Override
            public 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() {
            @Override
            public 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;
    @Override
    protected 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进来，所以需要点击后生效，如果想操作可以在这里直接setText
        mBoy.setChecked(true);

        //单选监听
        mGender.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                if(checkedId==mBoy.getId()){
                    mGenderContent.setText("您老人家竟然是个男的");
                }else{
                    mGenderContent.setText("您老人家竟然是个女的？？？");
                }
            }
        });
        
        //复选框 - 单独监听
        mState.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public 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() {
            @Override
            public 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() {
            @Override
            public 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() {
            @Override
            public 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">

    <TextView
        android:layout_width="match_parent"
        android:id="@+id/tv_gender"
        android:padding="5dp"
        android:layout_height="wrap_content"
        android:text="性别展示区：" />
        
    <RadioGroup
        android:padding="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/rg_gender"
        android:orientation="horizontal" >
        
    <RadioButton
            android: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"
            />
            
    <RadioButton
            android: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>

    <LinearLayout
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="你是不是人妖？"/>
            
    <CheckBox
        android:layout_width="wrap_content"
        android:id="@+id/cb_state"
        android:layout_height="wrap_content" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:id="@+id/tv_content"
        android:padding="5dp"
        android:layout_height="wrap_content"
        android:text="展示区：" />
        
    <CheckBox
        android:layout_width="wrap_content"
        android:id="@+id/cb_state1"
        android:text="北京"
        android:layout_height="wrap_content" />
        
    <CheckBox
        android:layout_width="wrap_content"
        android:id="@+id/cb_state2"
        android:text="上海"
        android:layout_height="wrap_content" />
        
    <CheckBox
        android: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">
    <item
        android:state_enabled="true"
        android:state_checked="false"
        android:drawable="@drawable/ic_login_unselected"/>
    <item
        android:state_enabled="true"
        android:state_checked="true"
        android:drawable="@drawable/ic_login_selected"/>
</selector>

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

<CheckBox
    android: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"

<CheckBox
    android:id="@+id/iv_check"
    android:layout_width="wrap_content"
    style="@style/checkboxStyle"
    android:layout_height="wrap_content" />
修改选中状态的颜色

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

android 单选标签选择 android单选框样式_Android_02

创建 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是修改选中颜色的关键属性

<CheckBox
    android: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" ，但是对我无效!

<CheckBox
   android: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的方式，都是通过上面的操作实现的

<CheckBox
    android: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"

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

<CheckBox
  android: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无法点击的问题

<CheckBox
  android: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" />