如何自定义CheckBox多选框的样式

原创 2016年08月31日 09:11:48

安卓自带的CheckBox有时候不能满足项目需求,这时候就需要自己定制一套样式出来。具体实现方法如下:

第一:首先需要找几张自己想要定义成的图片:
这里写图片描述 这里写图片描述
这里写图片描述 这里写图片描述

把上面的图片放到drawable-xhdpi或者mipmap目录下。

第二:在res目录下面创建drawable文件夹,drawable下面创建xml文件checkbox_selector.xml代码如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false"
        android:state_pressed="true"
        android:drawable="@drawable/grid_check_off_press"></item>
    <item android:state_checked="false"
        android:drawable="@drawable/grid_check_off"></item>
    <item android:state_checked="true"
        android:state_pressed="true"
        android:drawable="@drawable/grid_check_on_press" />
    <item android:state_checked="true"
        android:drawable="@drawable/grid_check_on"></item>

</selector>

到这里工作已经完成1/2了。

第三:在stytle文件中新建样式:

<style name="mycheckbox" parent="@android:style/Widget.CompoundButton.CheckBox">
        <item name="android:button">@drawable/checkbox_selectors</item>
        <item name="android:paddingLeft">10.0dip</item>
        <item name="android:height">35.0dip</item>
</style>

第四:在布局中使用就好啦,引入stytle样式。

<CheckBox
        android:id="@+id/checkBox1"
        style="@style/mycheckbox"
        android:layout_width="wrap_content"
        android:layout_height="35dp"
        android:layout_alignLeft="@+id/tv"
        android:layout_below="@+id/tv"
        android:layout_marginTop="84dp"
        android:text="自定义样式" />

点此下载源码

自定义复选框checkbox样式

复选框作为网页中比较常见的一个组件,有的时候我们需要对它进行美化,但是我们无法直接为其定义样式,所以我们需要一些其它的办法。表单元素中有label 元素和 for属性,当我们点击label 标签时,对...
  • u014291497
  • u014291497
  • 2016年07月31日 23:33
  • 15400

自定义复选框,复选框样式修改,重写复选框

改变复选框原有样式,使得变得好看起来
  • liujunxin11
  • liujunxin11
  • 2016年01月11日 12:58
  • 4575

html自定义复选框

自定义复选框的素材: icon-check-circle.png icon-checked.png checkbox.html(为了方便起见,这里使用到了jQuery) 自定...
  • qq_15096707
  • qq_15096707
  • 2016年04月02日 14:14
  • 1248

漂亮的checkbox样式 (多选框)

说起来汗颜,如此常用的checkbox我改变样式,居然需要百度,而且百度很久,更可气的是百度很久找不到可行的解决方案。 后来在csscheckbox.com上找到很多样式,结果一测兼容性IE不行。如此...
  • linlin_juejue
  • linlin_juejue
  • 2013年08月07日 10:35
  • 50279

织梦dedecms多选checkbox字段值独立输出样式调用方法

前言 我们在开发织梦模板,自定义多选checkbox类型的字段时,选择了多个值,在前端模板输出时,默认都是以英文,链接的多个checkbox选择值一次性输出。用户体验非常不好。可以按照以下调用方法,...
  • dededao
  • dededao
  • 2017年08月23日 11:30
  • 309

设置input 的 checkbox样式

简单的设置input 的 checkbox样式
  • shanyanwt
  • shanyanwt
  • 2017年07月01日 18:16
  • 561

Jquery实现自定义复选框样式

checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了。...
  • qq_32340877
  • qq_32340877
  • 2017年01月16日 14:10
  • 584

纯css3自定义复选框checkbox样式

html:部分: css:部分 .tiaojianlist03{ position: relative; } .tiaojianlist03 input[type=check...
  • Sandkin
  • Sandkin
  • 2015年06月19日 11:48
  • 1288

android 完美自定义 checkbox 样式

最新做项目需求自定义CheckBox 的样式,总结了以下几个步骤: 1.首先在drawable文件夹中添加drawable文件checkbox_style.xml ...
  • xz475399320
  • xz475399320
  • 2015年08月21日 13:58
  • 1482

修改复选框默认样式

我们都知道表单的复选框是有默认样式的,这里就不贴图了, 如果希望把复选框样式修改美观一些呢?为如下图所示: 实现方法:用label标签关联复选框,把复选框设置为透明(opacity:0;), ...
  • ye_mingjia
  • ye_mingjia
  • 2015年01月04日 19:37
  • 1211
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何自定义CheckBox多选框的样式
举报原因:
原因补充:

(最多只允许输入30个字)