文档章节

设置ToggleButton、Switch、CheckBox和RadioButton的显示效果

自由的角马
 自由的角马
发布于 2015/01/10 13:58
字数 596
阅读 34
收藏 0
ToggleButton、Switch、CheckBox和RadioButton都是继承自android.widget.CompoundButton,意思是可选择的,因此它们的用法都很类似。CompoundButton有两个状态,分别是checked和not checked。Switch是android4.0后出现的控件。但是这几个组件的默认图标都不太好看,怎样设置自己的图标风格呢?以下就是我的一种解决方案。

先看一下效果图,如下:



按钮图片贡献如下:

      

实现过程:

1.建立/res/drawable/setting_checkbox_button.xml

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

    <item android:drawable="@drawable/on_button" android:state_checked="true"/>
    <item android:drawable="@drawable/off_button" android:state_checked="false"/>
</selector>

2、在values/styles.xml中添加如下代码:

<style name="MyToggleButton" parent="@android:style/Widget.CompoundButton">
        <item name="android:button">@drawable/setting_checkbox_button</item>
    </style>

3.layout布局文件/res/layout/togglebutton_switch2.xml如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/layout1"
    android:gravity="center_horizontal">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:text="toggle is checked..." />

    <ToggleButton
        android:id="@+id/togglebutton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/text1"
        android:background="#00000000"
        style="@style/MyToggleButton"
        android:checked="true"
        android:textOff="关闭"
        android:textOn="打开" />

     <Switch
        android:id="@+id/witch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_below="@id/togglebutton"
        android:layout_alignLeft="@id/togglebutton"
        android:checked="true"
        android:textOff="关闭"
        android:textOn="打开"
        android:thumb="@drawable/tb_thumb"
        android:track="@drawable/tb_track" />
    
    
    <CheckBox
        android:id="@+id/check"
        style="@style/MyToggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/witch"
        android:checked="true"
        android:textOff="关闭"
        android:textOn="打开" />

    <RadioButton
        android:id="@+id/redio"
        style="@style/MyToggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/check"
        android:checked="false"
        android:textOff="关闭"
        android:textOn="打开" />

    <ToggleButton
        android:id="@+id/togglebutton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/compound_button"
        android:layout_below="@id/redio"
        android:layout_alignLeft="@id/redio"
        android:visibility="gone"/>
    
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/redio"
        android:layout_gravity="center" 
        android:layout_alignLeft="@id/redio">

        <Switch
            android:id="@+id/witch"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:checked="true"
            android:textOff="关闭"
            android:textOn="打开"/>
    </FrameLayout>

</RelativeLayout>

以上写的还有一问题,就是最后控件RadioButton点不了;还有就是把android:layout_width="wrap_content"改成android:layout_width="match_parent"布局会出错。可能这个方法还不太好,我也是在学习中,欢迎大家一起讨论,有更好的实现方式请一定告诉我哦!微笑


有一个网友写的可以整个项目控制ToggleButton的风格,我看了一下,第2步 设置Style & Theme的地方看不太懂,写 /res/drawable/themes.xml这个文件时在我这里会报错。大家可以参考一下: http://blog.csdn.net/billpig/article/details/6634481


本文转载自:http://blog.csdn.net/luoweifu/article/details/11752035

自由的角马
粉丝 1
博文 269
码字总数 0
作品 0
文山
私信 提问
Egret入门学习日记 --- 第二十篇(书中 9.3~9.6 节 内容)

第二十篇(书中 9.4~9.6 节 内容)   昨天 9.3节 第四重点 的问题:     我还是看不懂。而且 9.3节 4重点中,并没提起 exml 和 ts 关联的问题。导致我以为还有别的自定义组件方式。  ...

DMC-尼禄
07/30
0
0
J2ME GUI实战之六 ----------LWUIT的Label、CheckBox、RadioButton

本文来自:http://blog.csdn.net/hellogv/ ,转载必须注明出处! 文章写到这里,想必大家也对LWUIT有个大概的了解了,至少也该知道LWUIT可以做些什么。九宫图只是LWUIT的Button控件的典型应用...

晨曦之光
2012/03/14
118
0
ViewPager+fragment用 FrameLayout(针布局)做每个fragment的返回的view,结果第一页不显示数据,但 当切换回第一页时,就加载出来了,不知道那里有问题?

ViewPager+fragment用 FrameLayout(针布局)做每个fragment的返回的view,结果第一页不显示数据,但 当切换回第一页时,就加载出来了,不知道那里有问题? 打日志后个人想法: 1.手动初始化...

simoluanbu
2016/12/21
223
0
ViewPager+RadioButton仿QQ效果

RadioButton是自己定制的, 设置android:button="@null" 然后再设置backgroud。 涉及到的问题: 1、如何让RadioGroup在底部,且RadioGroup和Viewpager互不遮挡: 先定义RadioGroup,设置ali...

亓斌哥哥
2014/09/21
10.2K
2
[Android开发]关于RadioButton的checked问题

在Android的UI控件中,关于RadioXX有两个控件,一个是RadioGroup,一个是RadioButton。 顾名思义,一般情况下,会使用RadioGroup作为RadioButton的父控件。 如何设置RadioButton的选中状态 ...

Haffe
2014/09/28
5
0

没有更多内容

加载失败,请刷新页面

加载更多

《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
今天
6
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
今天
7
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
今天
5
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
1K
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部