Android CheckBox控件去除图标 样式改造
2021-05-23 17:01
1401 查看
有个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="需提供办事指南之外的申报材料" />
相关文章推荐
- Android控件之CheckBox换图标、焦点问题
- Android 常用控件自定义样式RadioButton、CheckBox、ProgressBar、
- Android 常用控件自定义样式RadioButton、CheckBox、ProgressBar、
- android之修改CheckBox左侧图标样式
- android 控件之checkbox自定义样式
- android实现不同样式的日历控件(MaterialCalendarView的改造工程)
- Android中checkbox控件的自定义样式设置
- Android 为CheckBoxPreference Preference 控件添加样式
- 使用easyui框架form控件,单选按钮radio或复选框checkbox样式问题
- css 设置 checkbox复选框控件的对勾√样式
- Android控件RadioButton&RadioGroup&CheckBox
- android控件之CheckBox
- Android开发——去除actionbar左上角的图标,只显示标题
- android checkbox设置自定义的样式
- Android系统中自带的图标&一些预定义样式&Android 系统颜色值
- Android:自己定义PopupMenu的样式(显示图标/设置RadioButton图标)
- android style设置控件样式
- Android中通过样式来去除app的头及界面全屏(备忘)的实现方法
- android控件开发之Radio(单选按钮)和CheckBox(多选按钮)开发
- 修改Delphi 10.1.2 edit控件在android的复制、剪切和粘贴样式