自定义样式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.微信红包,微信扫一扫即可领取红包

 

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

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
如果您想在 Vue 小程序使用 `checkbox-group`,并去掉 checkbox 的边自定义样式,可以使用以下的代码示例: ```html <template> <div class="checkbox-group"> <label v-for="(option, index) in options" :key="index" class="checkbox-wrapper"> <input type="checkbox" :value="option.value" v-model="selectedOptions" class="checkbox"> <span class="label">{{ option.label }}</span> </label> </div> </template> <style> .checkbox-group { display: flex; flex-direction: column; } .checkbox-wrapper { display: flex; align-items: center; margin-bottom: 10px; } .checkbox { position: absolute; opacity: 0; cursor: pointer; } .label { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.5; color: #333; } .label:before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 1px solid #ccc; box-sizing: border-box; border-radius: 2px; } .checkbox:checked + .label:before { background-color: #007aff; border-color: #007aff; } .checkbox:checked + .label:before:after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } </style> <script> export default { data() { return { options: [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ], selectedOptions: [], } }, } </script> ``` 在这个示例,我们使用了 `checkbox-group` 组件来管理多个 checkbox选中状态。我们使用 CSS 样式自定义 checkbox 的外观,包括去掉边自定义背景颜色、自定义选中时的背景颜色等。在每个 checkbox 的 label ,我们使用了 `before` 伪元素来绘制 checkbox 的外观。同时,我们使用了 Vue 的数据绑定功能来管理 checkbox选中状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

程序员Android

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

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

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

打赏作者

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

抵扣说明:

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

余额充值