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

目录
  • 自定义Switch外观
    • 布局样式
    • Drawable代码

自定义Switch外观

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

布局样式

<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>

要想实现下图效果:

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

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

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

(0)

相关推荐

  • Android开关控件Switch的使用案例

    在很多app的设置页面,或者是一些功能的开关界面,我们常常用到 Switch(开关) 来展示状态,今天说说Switch控件. (1)布局文件代码 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_pare

  • Android开发实现Switch控件修改样式功能示例【附源码下载】

    本文实例讲述了Android开发实现Switch控件修改样式功能.分享给大家供大家参考,具体如下: Android中自带的Switch控件在很多时候总觉得和整体系统风格不符,很多时候,自定义Switch是一种方法. 但其实不用这么麻烦,安卓自带的Switch通过修改一些属性,也可以达到和自定义Switch差不多的一个效果. 个人感觉,Switch的属性设置和其他控件还是有挺大区别的.因此,写下此文,方便有需要的同学参考. 先上效果图: 以上便是修改后效果 与 原生Switch的效果对比.代码在文

  • Android开发之ImageSwitcher相册功能实例分析

    本文实例讲述了Android开发之ImageSwitcher相册功能.分享给大家供大家参考,具体如下: 简介: 1.ImageSwitcher是viewSwitcher的子类,所以ImageSwitcher继承了ViewSwitcher素有的特性 2.作为ViewSwitcher的子类,它比ViewSwitcher使用更加方便,主要体现在:①. 重写了setNext() ②. 重写了showPrevious()方法.所以其实用起来,要比ViewSwitcher更为方便. 3.中重要的是:Imag

  • Android中Gallery和ImageSwitcher的使用实例

    效果如下: 布局文件activity_main.xml如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match

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

    目录 自定义Switch外观 布局样式 Drawable代码 自定义Switch外观 外观定制这块属于基操了,我们利用属性 android:track 和 android:thumb 定制 Switch 的背景图片和滑块图片,UI那能直接切图肯定做起来更快,此方式实现极其简单指定图片就行,所以今天我们实操的是自定义drawable的形式. 布局样式 <Switch android:layout_width="wrap_content" android:layout_height=

  • Android开发手册RatingBar星级评分控件实例

    目录 实践过程 初识 基本属性 点击事件 自定义样式 实践过程 初识 RatingBar是基于SeekBar和ProgressBar的扩展,用星型来显示等级评定. 通常应用场景是在用户评价那,如淘宝评价,打车订餐评价等等. 使用RatingBar的默认大小时,用户可以触摸/拖动或使用键来设置评分,它有两种样式(小风格用ratingBarStyleSmall,大风格用ratingBarStyleIndicator),其中大的只适合指示,不适合于用户交互. 基本属性 [android:isIndic

  • Android开发之自定义星星评分控件RatingBar用法示例

    本文实例讲述了Android开发之自定义星星评分控件RatingBar用法.分享给大家供大家参考,具体如下: 星级评分条RatingBar类似于SeekBar.ProgressBar'等等都可以自定义样式 它的主要用途就比如淘宝.景点 满意度等 这里给出两种自定义效果 如图所示 第一种是通过RatingBar获得分数 第二个是通过RatingBar动态调节控件属性(透明度) 由于RatngBar使用简单 自定义样式方法和 https://www.jb51.net/article/158338.h

  • Android开发实现布局中为控件添加选择器的方法

    本文实例讲述了Android开发实现布局中为控件添加选择器的方法.分享给大家供大家参考,具体如下: 在开发过程中,动态交互的一些展示效果可以通过布局中添加选择器实现,这样就可减少Activity等的代码数量,MVP开发中降低耦合性,使开发人员在写代码时只需要关注逻辑处理. 比如:一个按钮,原本背景图片为红色,字体为黑色,点击时候背景图片为黄色,字体改为白色. 这类简单效果在布局时就可以实现: <Button android:id="@+id/btn_start" android:

  • Android进阶篇-自定义图片伸缩控件具体实例

    ZoomImageView.java: 复制代码 代码如下: /** * @author gongchaobin *  *  自定义可伸缩的ImageView */public class ZoomImageView extends View{    /** 画笔类  **/    private Paint mPaint; private Runnable mRefresh = null;    /** 缩放手势监听类  **/    private ScaleGestureDetector

  • Android开发中自定义ProgressBar控件的方法示例

    本文实例讲述了Android开发中自定义ProgressBar控件的方法.分享给大家供大家参考,具体如下: 很简单,首先加载Drawable,在onMeasure设置好其区域大小, 然后使用canvas.clipRect绘图 public class ProgressView extends ImageView { private Drawable maskDraw; /** * 加载的进度 0-100 */ private int mProcess = 20; public ProgressV

  • Android开发之开关按钮控件ToggleButton简单用法示例

    本文实例讲述了Android开发之开关按钮控件ToggleButton简单用法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: res/layout/activity_main.xml文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo

  • Android开发手册TextView控件及阴影效果实现

    目录 实践过程 初识 文字阴影 TextView是Android中最简单也是最常见的控件.今天小空就带大家会会她. 实践过程 初识 经过前两篇常用属性和不常用属性的讲解,是不是有些懵了,不要慌,真实开发中用到的属性其实连五分之一都到不了. 我们先来创建个基本的文本控件 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • Android开发自定义实时图表控件实现示例

    目录 概述 演示 环境 实现 第一步:新建项目RealTimeChartDemo 第二步:新建RealTimeChart类 第三步:添加自定义变量 第四步:初始化基础参数 第五步:初始化宽高等参数 第六步:定义添加坐标点方法 第七步:定义坐标偏移方法 第八步:定义绘制网格线方法 第九步:定义绘制X轴标签方法 第十步:定义绘制坐标点方法 第十一步:绘制 第十二步:在activity_main.xml中使用控件 第十三步:在MainActivity中模拟添加数据点 概述 有时我们需要实时滚动显示一段

  • Android 自定义Switch开关按钮的样式实例详解

    封面 GitHub传送门 1.写在前面 本文主要讲的是在Android原生Switch控件的基础上进行样式自定义,内容很简单,但是在实现的过程中还是遇到了一些问题,在此记录下来,希望对大家能够有所帮助,看下效果图: 自定义样式 2.自定义样式 2.1 原生样式 首先看下原生的效果(Android 7.1): 原生效果 布局文件如下: <Switch android:layout_width="wrap_content" android:layout_height="wr

随机推荐