自定义switch实现以下两种方式

总体的xml

 

图1

 

图2

<Switch
    android:id="@+id/switc_time_type"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="@dimen/dp_15"
    android:background="@null"
    android:checked="true"
    android:thumb="@drawable/switch_selector_green"
    android:track="@drawable/switch_white_circle_selector" />

其中android:track是轨道， android:thumb是滑块,都在drawable中创建

switch_selector_green.xml：  滑块

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

switch_white_circle_selected.xml:选中的样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="#4CD579" android:width="2dp"/>

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

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

</shape>

switch_white_circle_normal.xml :未选中样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke android:color="@color/white" android:width="2dp"/>

    <solid android:color="#AFBCC8" />

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

</shape>

switch_white_circle_selector.xml  :轨道

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

switch_bg_selected.xml ：选中时轨道样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#ff3985ff"/>
<!--    <size  android:width="42dp"-->
<!--        android:height="20dp"/>-->    此处放开，下面的stoke注释掉效果为图2效果反之为图1
    <stroke
        android:width="8dp"
        android:color="#00000000" />
    <corners android:radius="20dp"/>

</shape>

switch_bg_normal.xml ：未选中是轨道样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#ffe7ecf4"/>
    <stroke
        android:width="8dp"
        android:color="#00000000" />
<!--    <size  android:width="42dp"-->
<!--        android:height="20dp"/>-->
    <corners android:radius="20dp"/>

</shape>