Android Switch控件修改样式
Android中自带的Switch控件在很多时候总觉得和整体系统风格不符,很多时候,自定义Switch是一种方法。
但其实不用这么麻烦,安卓自带的Switch通过修改一些属性,也可以达到和自定义Switch差不多的一个效果。
个人感觉,Switch的属性设置和其他控件还是有挺大区别的。因此,写下此文,方便有需要的同学参考。
先上效果图:
以上便是修改后效果 与 原生Switch的效果对比。代码在文章底部给出
实现方式:
1.底部滑动条,在开关打开状态为绿色,开关关闭状态为灰色
在 res/drawable 文件夹下面,写两个滑动条的底图 ,通过一个选择器selector进行控制。
gray_track.xml :非打开状态,灰色的底图
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><!-- 高度30 此处设置宽度无效--><size android:height="30dp"/><!-- 圆角弧度 15 --><corners android:radius="15dp"/><!-- 变化率 定义从左到右的颜色不变 --><gradientandroid:endColor="#888888"android:startColor="#888888" /></shape>
green_track.xml:打开状态下,绿色的底图。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" ><!-- 高度40 --><size android:height="30dp"/><!-- 圆角弧度 20 --><corners android:radius="15dp"/><!-- 变化率 --><gradientandroid:endColor="#33da33"android:startColor="#33da33" /></shape>
选择器 track.xml 用于控制Switch不同状态下,滑动条的底图
<?xml version="1.0" encoding="utf-8"?>
<!-- 底层下滑条的样式选择器,可控制Switch在不同状态下,底下下滑条的颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="@drawable/green_track" />
<item android:drawable="@drawable/gray_track" /></selector>
2. 滑动按钮:底色我用的接近白色的淡灰色,打开时,边上的一圈线条为灰色,关闭时,边上的一圈线条为绿色
实现方式和底部滑动一致
gray_thumb.xml :关闭状态,按钮边上一圈颜色为深灰色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><!-- 高度40 --><size android:height="40dp" android:width="40dp"/><!-- 圆角弧度 20 --><corners android:radius="20dp"/><!-- 变化率 --><gradientandroid:endColor="#eeeeee"android:startColor="#eeeeee" /><stroke android:width="1dp"android:color="#666666"/></shape>
green_thumb.xml : 打开状态,按钮边上一圈的颜色为绿色
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><!-- 高度40 --><size android:height="40dp" android:width="40dp"/><!-- 圆角弧度 20 --><corners android:radius="20dp"/><!-- 变化率 --><gradientandroid:endColor="#eeeeee"android:startColor="#eeeeee" /><stroke android:width="1dp"android:color="#33da33"/></shape>
选择器 thumb.xml 用于控制Switch不同状态下,按钮的显示状态
<?xml version="1.0" encoding="utf-8"?>
<!-- 按钮的选择器,可以设置按钮在不同状态下的时候,按钮不同的颜色 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" ><item android:state_checked="true" android:drawable="@drawable/green_thumb" />
<item android:drawable="@drawable/gray_thumb" />
</selector>
3. 将以上选择器设置给Switch,就好了
界面 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><Switchandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:switchMinWidth="20dp"android:textOn=" "android:textOff=" "android:thumb="@drawable/thumb"android:track="@drawable/track" /><!-- 用于对比使用的不设置任何属性的Switch --><Switch android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>
4.高度,宽度的设置
细心的同学会发现,修改 android:layout_width , android:layout_height 这两个属性,并不会实际修改Switch的大小
设置大了,边上会出现空白部分,设置小了,Switch显示不全。
实际设置高度方法:
上面定义滑动条和按钮底图的地方相信大家都注意到, <size android:height="30dp"/> 这行代码,
修改 green_track.xml,gray_track.xml 中的高度,即可修改高度(修改green_thumb.xml gray_thumb.xml 中的高度貌似无效)。
实际修改宽度的方法:
(1)修改滑动按钮的宽度:滑动按钮的宽度和按钮上的文字有关,
想要按钮变长,在按钮显示的文字上添加几个空字符串即可,想要按钮变短的话,减少按钮上显示的字即可(修改按钮上字体大小也可以试试)
Switch的属性
android:textOn=" "
android:textOff=" "
(2)修改按钮 打开,关闭 两种状态之间滑动距离(貌似小到一定程度,再改小就无效了)
Switch的属性
android:switchMinWidth="20dp"
通过以上的设置,相信能满足大部分实际使用的需求了,希望对大家有帮助。
相信源代码才是大家最关注的吧,哈哈,我也是!
下载地址: http://download.csdn.net/detail/qq_34763699/9751234
百度网盘:http://pan.baidu.com/s/1slp1CZV
Android Switch控件修改样式相关推荐
- wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
- android switch控件的大小,关于Android Action Bar 上的 Switch控件
是这样的: 因为要在Action Bar 上弄个 Switch 按钮,所以我照 http://stackoverflow.com/questions/12107031/how-to-add-a-swi ...
- android switch 未定义,源生Switch控件在Android4.4无法显示?
首先,layout.xml代码如下: xmlns:tools="http://schemas.android.com/tools" android:layout_width=&qu ...
- Android图表控件MPAndroidChart——LineChart实现 XY轴、原点线的直尺刻度样式
接上文: Android图表控件MPAndroidChart--曲线图LineChart的使用(多条曲线) 其他相关文章: Android图表控件MPAndroidChart的简单介绍(MPAndro ...
- Android 4.0 Switch 控件用源代码实现
最近项目需要,在4.0 以前的版本上实现一个android 4.0 上的Switch控件,上网找了些例子,都不尽如人意.自己动手,丰衣足食.于是便翻看源码,找到4.0源码中Switch实现的方法.照样 ...
- android开发原点表框架,Android图表控件MPAndroidChart——LineChart实现 XY轴、原点线的直尺刻度样式...
接上文: Android图表控件MPAndroidChart--曲线图LineChart的使用(多条曲线) 其他相关文章: Android图表控件MPAndroidChart的简单介绍(MPAndro ...
- android学习笔记---50_样式与主题,给控件使用样式,给应用使用主题
50_样式与主题 android学习笔记---50_样式与主题,给控件使用样式,给应用使用主题 2013/5/12 50_样式与主题 ----------------- android样式和主题(st ...
- android 横向滚轮控件,Android滚轮控件,基于ListView实现,可以自定义样式。
Android滚轮控件,基于ListView实现,可以自定义样式. Features 支持自定义滚轮样式 支持common和holo两种皮肤 支持文本和图文混排两中数据模版 支持循环显示数据 支持选中 ...
- Android 原生控件之一 TextView
Android 原生控件之一 TextView 前言 来源 开始 XML属性 1.android:allowUndo 2.android:autoLink 3.android:autoSizeMaxT ...
最新文章
- 自动驾驶汽车数据闭环方法分析
- 人工智能 机器学习系列 2:代价函数
- IBM人工智能将“掌舵”全球首个跨大西洋自主驾驶船舶
- 自定义ImageLinkButton美化提交按钮
- Spring框架中的Quartz定时任务使用笔记(通过@Scheduled注解的方式实现)
- C语言 const、volatile、const volatile限定符理解
- C++对象模型:单继承,多继承,虚继承
- svg的transform-matrix详解
- string.join用法
- Hadoop原理讲解(面试题)
- Windows平台下使用ffmpeg和segmenter实现m3u8直播点播
- 【Mathematica】 曲面的绘制
- 宝塔linux webshell提权,linux提权 Root权限WebShell提权
- Tight WCRT Analysis of Synchronous C Programs
- LeetCode:183.Customers Who Never Order
- 制图操作案例:在Pro画水墨画
- 无人机测量技术在房地一体项目中的应用
- 香港城市大学赵翔宇招收AI机器学习数据挖掘 全奖PhD/博后/RA
- 扦插技术图解_爱之蔓平卧扦插法(图解)
- ios 开发常用第三方框架