CheckBox选择Or不选,是个问题!
前言
前面我们讲过了RadioButton
与RadioGroup
,利用单选按钮组的属性来实现仿微信底部Tab
切换的效果。对比记忆一下,今天我们来讲解第二个类似的控件CheckBox
,按照惯例先看下它的类继承关系如下:
public class CheckBox extends CompoundButton
java.lang.Object
↳ android.view.View
↳ android.widget.TextView
↳ android.widget.Button
↳ android.widget.CompoundButton
↳ android.widget.CheckBox
我们发现CheckBox
与RadioButton
有相同的继承关系,所以CheckBox
也是一个具有选中效果的控件,通常我们称它为**复选框
**。
基本使用
先来展示一段代码,展示下效果。
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
app:layout_constraintHorizontal_chainStyle="packed"
android:id="@+id/cb_hobby"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
app:layout_constraintRight_toLeftOf="@id/tv_hobby"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_hobby"
android:layout_width="wrap_content"
android:layout_marginLeft="5dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@id/cb_hobby"
android:text="游泳"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
这里我们使用了前面博文内容讲到的
ConstraintLayout
,实现了CheckBox和TextView一起居中整个父布局的效果。如果你还不是很熟悉这个约束布局如何使用,可以查看之前博文内容《布局"大杀器"—ConstraintLayout》
实现效果如图所示:
这里默认设置CheckBox
的checked
属性为true
,则表示默认选中,那么在页面中如何获取这个控件是否被选中呢?当然是通过设置监听器,这里附上代码:
/**
* 演示CheckBox等用法
*
* @author xmkh
*/
public class CheckActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_check);
CheckBox cbHobby = findViewById(R.id.cb_hobby);
final TextView tvHobby = findViewById(R.id.tv_hobby);
//设置复选框的勾选状态监听器
cbHobby.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
tvHobby.setText(isChecked ? "已选中" : "未选中");
}
});
}
}
实现效果如图所示:
实践
实际效果中,我们一般不会使用自带的样式,同样的我们参照RadioButton
的方式来给它设置一个UI
样式。通常在注册界面总会看到是否同意《用户注册协议》的复选框,如果要实现下图的样式,我们怎么做呢?
我们来仿照这个效果实现一下界面布局。
我们准备选中和未选中2个图片ic_login_agreement_check.png
和ic_login_agreement_uncheck.png
在res/drawable/
文件夹下新建一个样式文件,selector_cb_login_agreement.xml
, 附上样式文件代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/ic_login_agreement_check" android:state_checked="true"/>
<item android:drawable="@mipmap/ic_login_agreement_uncheck" />
</selector>
设置CheckBox
的Button
样式,完整代码如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".RegisterCheckActivity">
<!--主要设置CheckBox的button样式为自定义的selector_cb_login_agreement即可-->
<CheckBox
android:id="@+id/cb_login_agreement"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:button="@drawable/selector_cb_login_agreement"
app:layout_constraintEnd_toStartOf="@+id/tv_login_agreement"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:textColor="#A6600C"
android:id="@+id/tv_login_agreement"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我已阅读并同意《XX用户注册协议》"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="@id/cb_login_agreement"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/cb_login_agreement"
app:layout_constraintTop_toTopOf="@id/cb_login_agreement" />
</android.support.constraint.ConstraintLayout>
最终实现效果如图所示:
结语
今天我们的CheckBox
分享就到此结束啦,希望各位小伙伴在学习Android
基础控件的时候,能够举一反三,多思考、多练习。坚持下去,相信你一定会从小白变成大牛的!也欢迎各位小伙伴加入我们的微信技术交流群,在公众号中回复微信群,就可以加入其中,也可以在公众号中回复视频,里面有一些初学者视频哦~
PS:如果还有未看懂的小伙伴,欢迎加入我们的QQ技术交流群:892271582,里面有各种大神回答小伙伴们遇到的问题,我们的微信群马上也将要和大家见面啦,届时希望大家踊跃加入其中~~