Android CheckBox控件去除图标 样式改造
2023-02-18 16:38:33 时间
有个UI需要实现下面这种效果,但我之前是使用的CheckBox,本着能改就改的原则,还是把CheckBox改造一份,终于是实现了图中的效果
过程
1.去除CheckBox的左侧图标
CheckBox默认左侧会有个正方形的小框框,来展示勾选的状态,我们得先把这个去除了,去除的代码其实只需要在xml布局文件中,将button设置为null即可
android:button="@null"
代码:
<CheckBox
android:layout_weight="1"
android:id="@+id/cb1"
android:layout_width="400dp"
android:layout_height="0dp"
android:background="@drawable/selector_checkbox"
android:button="@null"
android:text="需提供办事指南之外的申报材料" />
2.设置背景
这里选择使用Android中的selector作为背景,可以设置CheckBox选中和未选中的状态
选中状态:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color="#3791e0"/>
</shape>
默认状态:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color="@color/white"/>
</shape>
selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/shape_checkbox_checked"/>
<item android:state_checked="false" android:drawable="@drawable/shape_checkbox_normal"/>
</selector>
设置背景:
<CheckBox
android:layout_weight="1"
android:id="@+id/cb1"
android:layout_width="400dp"
android:layout_height="0dp"
android:button="@null"
android:background="@drawable/selector_checkbox"
android:text="需提供办事指南之外的申报材料" />
3.设置文字颜色
由于上面的背景选择并不能应用到文字上去,设置文字颜色我们只能通过代码来设置
CheckBox提供了一个状态改变的监听器,通过这个监听器,我们可以动态对CheckBox的文字进行修改,代码如下:
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@SuppressLint("ResourceAsColor")
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if (b) {
checkBox.setTextColor(getResColor(R.color.white));
} else {
checkBox.setTextColor(getResColor(R.color.black));
}
}
});
private int getResColor(int resColor) {
int color;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.M) {
color = getColor(resColor);
} else {
color = getResources().getColor(resColor);
}
return color;
}
PS:getResColor是封装的方法,主要用来获取颜色的二进制
4.调整文字偏移
调整文字偏移的话其实很简单,使用padding的属性即可,自己看着调整即可
<CheckBox
android:layout_weight="1"
android:id="@+id/cb1"
android:layout_width="400dp"
android:layout_height="0dp"
android:paddingLeft="20dp"
android:paddingStart="30dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:layout_marginBottom="8dp"
android:background="@drawable/selector_checkbox"
android:button="@null"
android:text="需提供办事指南之外的申报材料" />
代码示例
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color="#3791e0"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp"/>
<solid android:color="@color/white"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/shape_checkbox_checked"/>
<item android:state_checked="false" android:drawable="@drawable/shape_checkbox_normal"/>
</selector>
<CheckBox
android:layout_weight="1"
android:id="@+id/cb1"
android:layout_width="400dp"
android:layout_height="0dp"
android:paddingLeft="20dp"
android:paddingStart="30dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:layout_marginBottom="8dp"
android:background="@drawable/selector_checkbox"
android:button="@null"
android:text="需提供办事指南之外的申报材料" />
相关文章
- 移动安全-安卓frida hook基础篇
- 微信开放Donut,我们的App也能像微信跑小程序了
- Android Activity Deeplink启动来源获取源码分析
- Android构建工具--AAPT2源码解析(一)
- Android模块化开发实践
- 手把手教你实现Android编译期注解
- 打通“任督二脉”:Android 应用安装优化实战
- Android系统Bitmap内存分配原理与优化
- Android客户端网络预连接优化机制探究
- Android内存泄露检测 LeakCanary2.0(Kotlin版)的实现原理
- 存量用户运营企业微信的“用户端小程序”优化方案
- 一文帮你搞懂 Android 文件描述符
- Android NativeCrash 捕获与解析
- axios的简单使用
- IDEA整合Android
- 羊了个羊逆天改命过关法!PC小程序抓包教程
- AndroidQ兼容性适配指南
- AndroidR兼容性适配指南
- Android代码静态检查(lint、Checkstyle、ktlint、Detekt)
- 开发时遇到监听的事件处理机制和SoundPool播放音效解决方法以及外部类的使用【Android】