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 相关文章推荐
springboot @ConfigurationProperties和@PropertySource的区别
Jun 11 Java/Android
Java 将PPT幻灯片转为HTML文件的实现思路
Jun 11 Java/Android
java中重写父类方法加不加@Override详解
Jun 21 Java/Android
springboot项目以jar包运行的操作方法
Jun 30 Java/Android
新手初学Java List 接口
Jul 07 Java/Android
使用@Value值注入及配置文件组件扫描
Jul 09 Java/Android
Java数据开发辅助工具Docker与普通程序使用方法
Sep 15 Java/Android
Java中Quartz高可用定时任务快速入门
Apr 03 Java/Android
Java详细解析==和equals的区别
Apr 07 Java/Android
Spring Boot 实现 WebSocket
Apr 30 Java/Android
OpenFeign实现远程调用
Aug 14 Java/Android
JDK8中String的intern()方法实例详细解读
Sep 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
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP实现返回JSON和XML的类分享
2015/01/28 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
python把转列表为集合的方法
2019/06/28 Python
使用python实现滑动验证码功能
2019/08/05 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
30年同学聚会感言
2014/01/30 职场文书
财务出纳岗位职责
2014/02/03 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
个人总结怎么写
2015/02/26 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
php去除deprecated的实例方法
2021/11/17 PHP
SQL Server使用导出向导功能
2022/04/08 SQL Server
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python