Android Switch 自定义

发表于   |   分类于

Switch常用属性

1
2
3
4
5
6
7
8
9
10
11
android:showText：设置on/off的时候是否显示文字,boolean
android:splitTrack：是否设置一个间隙，让滑块与底部图片分隔,boolean
android:switchMinWidth：设置开关的最小宽度
android:switchPadding：设置滑块内文字的间隔
android:switchTextAppearance：设置开关的文字外观，暂时没发现有什么用...
android:textOff：按钮没有被选中时显示的文字
android:textOn：按钮被选中时显示的文字
android:textStyle：文字风格，粗体，斜体写划线那些
android:track：底部的图片
android:thumb：滑块的图片
android:typeface：设置字体

自定义方式就是创建一些XML文件

然后在XML文件里面来定义颜色

Switch可以看成两个部分

一个是底部椭圆的背景

一个上面的圆

因为涉及到开关两种状态

所以每种状态都是一个XML

底部椭圆加上上边的圆再加上开关状态

所以至少需要四个颜色文件

还有两个XML文件把这四个文件分开

先创建两个底部的颜色文件switch_bg_selected.xml和switch_bg_normal.xml

选中的颜色switch_bg_selected.xml

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/blue_00"/>
    <size  android:width="26dp"
        android:height="15dp"/>
    <corners android:radius="15dp"/>

</shape>

没选中的颜色switch_bg_normal.xml

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/hui_d8"/>
    <size  android:width="26dp"
        android:height="15dp"/>

    <corners android:radius="15dp"/>

</shape>

还有一个把他们合并到一起的XML文件

switch_white_circle_selector.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/switch_bg_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/switch_bg_normal" android:state_checked="false"/>

</selector>

紧接着就是自定义顶部的小圆了

先建一个选中的XML

switch_white_circle_selected.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="@color/blue_00" android:width="1dp"/>

    <solid android:color="@color/white" />

    <size
        android:width="13dp"
        android:height="13dp" />

</shape>

再建一个没有选中的XML

switch_white_circle_normal.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="@color/hui_d8" android:width="1dp"/>

    <solid android:color="@color/white" />

    <size
        android:width="13dp"
        android:height="13dp" />

</shape>

再建一个XML把他们合并到一起

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/switch_white_circle_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/switch_white_circle_normal" android:state_checked="false"/>

</selector>

使用方法

1
2
android:track="@drawable/switch_selector_green"
android:thumb="@drawable/switch_white_circle_selector"