Android开发手册自定义Switch开关按钮控件


Posted in Java/Android onJune 10, 2022

?自定义Switch外观

外观定制这块属于基操了,我们利用属性 android:track 和 android:thumb 定制 Switch 的背景图片和滑块图片,UI那能直接切图肯定做起来更快,此方式实现极其简单指定图片就行,所以今天我们实操的是自定义drawable的形式。

Android开发手册自定义Switch开关按钮控件

布局样式

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/selector_switch_thumb"
    android:layout_margin="16dp"
    android:track="@drawable/selector_switch_track" />

Drawable代码

<?xml version="1.0" encoding="utf-8"?><!--switch的自定义轨道-->
<!--selector_switch_track.xml文件-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/track_on" android:state_checked="true" />
    <item android:drawable="@drawable/track_off" android:state_checked="false" />
</selector>
<?xml version="1.0" encoding="utf-8"?><!--switch的自定义圆钮-->
<!--selector_switch_thumb.xml文件-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/thumb_on" android:state_checked="true" />
    <item android:drawable="@drawable/thumb_off" android:state_checked="false" />
</selector>
<?xml version="1.0" encoding="utf-8"?>
<!--track_on.xml文件-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#BB00FF00" />
    <!-- 这个是用来实现轨道高度小于圆钮高度的,值越大轨道越细-->
    <!-- 同理,若thumb有stroke,track没有,可实现圆钮在轨道里的伪效果-->
    <stroke
        android:width="8dp"
        android:color="#00000000" />
    <corners android:radius="20dp" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<!--track_off.xml文件-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#E4E4E4" />
    <!-- 这个是用来实现轨道高度小于圆钮高度的,值越大轨道越细-->
    <stroke
        android:width="8dp"
        android:color="#00000000" />
    <corners android:radius="20dp" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<!--thumb_on.xml文件-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFFF00" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<!--thumb_off.xml文件-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#AAAAAA" />
    <size
        android:width="20dp"
        android:height="20dp" />
</shape>

要想实现下图效果:

Android开发手册自定义Switch开关按钮控件

就是小空在代码中注释所述,在开关按钮上增加一个透明的边框,轨道的高度会自动变化。

除了Switch还有另一个开关ToggleButton,该控件无thumb和track,相比Switch缺少了滑动的动画效果。在使用上和Switch基本一致,同样可以自定义。

Android开发手册自定义Switch开关按钮控件

以上就是Android开发手册自定义Switch开关按钮控件的详细内容,更多关于Android开发自定义Switch控件的资料请关注三水点靠木其它相关文章!


Tags in this post...

Java/Android 相关文章推荐
源码解读Spring-Integration执行过程
Jun 11 Java/Android
springBoot基于webSocket实现扫码登录
Jun 22 Java/Android
eclipse创建项目没有dynamic web的解决方法
Jun 24 Java/Android
Java 中的 Unsafe 魔法类的作用大全
Jun 26 Java/Android
Java移除无效括号的方法实现
Aug 07 Java/Android
Java Spring 控制反转(IOC)容器详解
Oct 05 Java/Android
springboot 多数据源配置不生效遇到的坑及解决
Nov 17 Java/Android
使用Java去实现超市会员管理系统
Mar 18 Java/Android
MybatisPlus EntityWrapper如何自定义SQL
Mar 22 Java/Android
Spring IOC容器Bean的作用域及生命周期实例
May 30 Java/Android
java实现自定义时钟并实现走时功能
Jun 21 Java/Android
阿里面试Nacos配置中心交互模型是push还是pull原理解析
Jul 23 Java/Android
java实现面板之间切换功能
Jun 10 #Java/Android
Spring Boot项目如何优雅实现Excel导入与导出功能
Jun 10 #Java/Android
解决spring.thymeleaf.cache=false不起作用的问题
Jun 10 #Java/Android
Android开发手册Chip监听及ChipGroup监听
Jun 10 #Java/Android
Java实现带图形界面的聊天程序
Jun 10 #Java/Android
Android中View.post和Handler.post的关系
Android Canvas绘制文字横纵向对齐
Jun 05 #Java/Android
You might like
php 代码优化之经典示例
2011/03/24 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Cookie 小记
2010/04/01 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
车工岗位职责
2013/11/26 职场文书
项目投资意向书
2014/04/01 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
教师三严三实心得体会
2014/10/11 职场文书
工作会议通知
2015/04/15 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL