自定义样式View(一)--自定义CheckBox样式

Android中自带的CheckBox 样式比较丑,为了美化CheckBox 可使用一下方法。
实现效果如下:

未选中状态

未选中状态

选中状态

选中状态

  1. 自定义样式
  2. 自定义选择器效果
  3. 自定义素材
  4. 为CheckBox标签自定义样式

欢迎关注微信公众号:程序员Android
公众号ID:ProgramAndroid
获取更多信息

微信公众号:ProgramAndroid

微信公众号:ProgramAndroid

我们不是牛逼的程序员,我们只是程序开发中的垫脚石。
我们不发送红包,我们只是红包的搬运工。

1. 自定义样式

在values 中自定义Style样式(CustomCheckboxTheme)

    <!-- 自定义CheckBox 样式 -->
    <style name="CustomCheckboxTheme" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/custom_checkbox_selector</item>
    </style>

2. 自定义选择器效果

自定义选择器,可以实现不同状态下显示不同的图片
custom_checkbox_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/btn_checkbox_press" android:state_checked="true"/>
    <item android:drawable="@drawable/btn_checkbox_normal" android:state_checked="false"/>
    <item android:drawable="@drawable/btn_checkbox_normal"/>

</selector>

3. 自定义素材

btn_checkbox_press.png

btn_checkbox_press.png


btn_checkbox_normal.png

btn_checkbox_normal.png

4. 为CheckBox标签自定义样式

为CheckBox 设置自定义样式 CustomCheckboxTheme

    <CheckBox
        style="@style/CustomCheckboxTheme"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="自定义Checkbox样式" />

至此,本篇已结束,如有不对的地方,欢迎您的建议与指正。同时期待您的关注,感谢您的阅读,谢谢!

如有侵权,请联系小编,小编对此深感抱歉,届时小编会删除文章,立即停止侵权行为,请您多多包涵。

既然都看到这里,领两个红包在走吧!
以下两个红包每天都可以领取

1.支付宝搜索 522398497,或扫码支付宝红包海报。

支付宝扫一扫,每天领取大红包

2.微信红包,微信扫一扫即可领取红包

 

微信扫一扫,每天领取微信红包

小礼物走一走,来简书关注我

<think>嗯,用户的问题是关于如何在uView框架中自定义u-checkbox-group组件的内容。我需要先回顾下用户提供的引用内容,特别是引用2和4,因为它们提到了uViewCheckbox组件和自定义的例子。 首先,用户可能已经尝试过设置placement属性但无效,如引用2所说,他们可能遇到了排列方向的问题。所以,在回答时需要提到如何正确设置placement,并解释可能的注意事项,比如版本兼容性或父容器的影响。 然后,引用4中的示例使用了u-radio组件,并自定义了标题、副标题和图标。这可能适用于u-checkbox-group,因为两者结构类似。需要将radio的例子转换为checkbox的使用方法,展示如何自定义内容,比如添加图片、标题和副标题。 接下来,用户的需求是自定义内容,可能包括布局调整和样式修改。需要分步骤说明,例如如何覆盖默认样式,使用slot插槽,以及动态绑定数据。同时,要注意提醒用户检查uView版本,因为引用2提到的问题可能在旧版本中存在,可能需要升级或应用特定解决方案。 还需要考虑代码示例的正确性,确保语法正确,比如使用:key和v-for的正确方式,以及如何绑定checked属性。此外,提醒用户处理可能出现的布局问题,比如父容器的flex设置影响placement属性,或者样式冲突需要深度选择器。 最后,生成的相关问题应覆盖常见的使用场景和问题,比如样式覆盖、动态数据绑定、版本问题等,帮助用户进步解决问题。要确保回答结构清晰,步骤详细,并引用提供的参考资料来增强可信度。</think>### uView框架中u-checkbox-group自定义内容方法 根据uView组件库文档和实际开发经验[^2][^4],实现u-checkbox-group自定义内容的步骤如下: #### 1. 基础结构设置 ```html <u-checkbox-group v-model="selectedValues" placement="column" <!-- row/column控制排列方向 --> > <u-checkbox v-for="item in checkboxList" :key="item.value" :name="item.value" :checked="item.checked" > <!-- 自定义内容区域 --> <view class="custom-content"> <image :src="item.icon" class="icon"/> <view class="text-area"> <text class="title">{{ item.title }}</text> <text class="subtitle">{{ item.subtitle }}</text> </view> </view> </u-checkbox> </u-checkbox-group> ``` #### 2. 数据绑定配置 ```javascript data() { return { selectedValues: [], checkboxList: [ { title: '选项1', subtitle: '描述信息1', value: 1, icon: '/static/icon1.png', checked: false }, { title: '选项2', subtitle: '描述信息2', value: 2, icon: '/static/icon2.png', checked: true } ] } } ``` #### 3. 样式覆盖技巧 ```css /* 深度覆盖uview默认样式 */ ::v-deep .u-checkbox__icon-wrap { margin-right: 20rpx !important; } .custom-content { display: flex; align-items: center; .icon { width: 60rpx; height: 60rpx; margin-right: 20rpx; } .title { font-size: 32rpx; color: #333; } .subtitle { font-size: 24rpx; color: #999; } } ``` #### 注意事项: 1. 若`placement`属性失效,检查父容器是否限制布局方向[^2] 2. 使用`v-model`进行双向绑定,`:name`必须对应数据项的value值 3. 自定义内容需要使用scoped样式覆盖,推荐`::v-deep`选择器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员Android

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值