本文只为初级的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" />