自定义Switch（秒懂）

效果图

---

两个单词

1.thumb:指的是可以滚动的圆球
2.track:指的是圆球下面的轨道
如果看不懂,那再看两张图

---

不难看出我们需要定义4个xml文件,分别是

closed_track.xml：用于按钮关闭时,track的样式
open_track.xml：用于按钮打开时,track的样式
closed_thumb.xml：用于按钮关闭时,thumb的样式
open_thumb.xml：用于按钮打开时,thumb的样式

另外我们还需要一个track选择器和thumb选择器，用于告诉按钮
此时应该去调用哪一个xml（上面定义了4个）

最终最终我们需要定义6个xml（4个样式+2个选择器）

---

xml都放在drawable文件下

第1个closed_track.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--设置高度,这里设置宽度没有用-->
    <size android:height="40dp" />
    <!--设置弧度-->
    <corners android:radius="20dp" />
    <!--设置渐变,两个颜色一样则没有渐变效果-->
    <gradient
        android:endColor="#888888"
        android:startColor="#888888" />
</shape>

---

第2个open_track.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--设置高度-->
    <size android:height="40dp"/>
    <!--设置弧度-->
    <corners android:radius="20dp"/>
    <!--设置渐变,两个颜色一样则没有渐变效果-->
    <gradient
        android:endColor="#33da33"
        android:startColor="#33da33"/>
</shape>

---

第3个closed_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--设置高度,注意要设置宽度-->
    <size
        android:width="40dp"
        android:height="40dp" />
    <!--设置弧度-->
    <corners android:radius="20dp" />
    <!--设置渐变,两个颜色一样则没有渐变效果-->
    <gradient
        android:endColor="#fff"
        android:startColor="#fff" />
    <!--边缘一层灰色-->
    <stroke
        android:width="2dp"
        android:color="#888888" />
</shape>

---

第4个closed_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--设置高度-->
    <size android:height="40dp" />
    <!--设置弧度-->
    <corners android:radius="20dp"/>
    <!--设置渐变,两个颜色一样则没有渐变效果-->
    <gradient
        android:endColor="#eeeeee"
        android:startColor="#eeeeee"/>
    <!--边缘一层绿色-->
    <stroke
        android:width="2dp"
        android:color="#33da33" />
</shape>

---

第5个track.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/open_track" android:state_checked="true" />
    <item android:drawable="@drawable/closed_track" android:state_checked="false" />
</selector>

---

第6个thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/open_thumb" android:state_checked="true" />
    <item android:drawable="@drawable/closed_thumb" android:state_checked="false" />
</selector>

---

最后在布局文件引用下选择器就可以了

<?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:gravity="center"
    android:orientation="vertical">

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:thumb="@drawable/thumb"
        android:track="@drawable/track" />
</LinearLayout>

https://blog.csdn.net/qq_34763699/article/details/54954394