安卓自定義Switch顯示效果

效果

xml中使用

<Switch
                android:id="@+id/isNotifyMe"
                android:textOn=""
                android:textOff=""
                android:thumb="@drawable/thumb"
                android:track="@drawable/track"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
複製代碼

依賴的其餘資源

thumb

<?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>
複製代碼

green_thumb

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

    <!-- 高度40 -->
    <size android:height="@dimen/x28" android:width="@dimen/x28"/>
    <!-- 圓角弧度 20 -->
    <corners android:radius="@dimen/x14"/>


    <!-- 變化率 -->
    <gradient
            android:endColor="#ffffff"
            android:startColor="#ffffff" />

    <stroke android:width="1dp"
            android:color="#00d5b1"/>

</shape>
複製代碼

gray_thumb

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

    <!-- 高度40 -->
    <size android:height="@dimen/x28" android:width="@dimen/x28"/>
    <!-- 圓角弧度 20 -->
    <corners android:radius="@dimen/x14"/>


    <!-- 變化率 -->
    <gradient
            android:endColor="#ffffff"
            android:startColor="#ffffff" />

    <stroke android:width="1dp"
            android:color="#E5E5EA"/>

</shape>
複製代碼

track

<?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>
複製代碼

green_track

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

    <!-- 高度30 -->
    <size android:height="@dimen/x30"/>
    <!-- 圓角弧度 20 -->
    <corners android:radius="15dp"/>
    <!-- 變化率 -->
    <gradient
            android:endColor="#00d5b1"
            android:startColor="#00d5b1" />
</shape>
複製代碼

gray_track

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >
    <!-- 高度30   此處設置寬度無效-->
    <size android:height="@dimen/x30"/>
    <!-- 圓角弧度 15 -->
    <corners android:radius="@dimen/x15"/>
    <!-- 變化率  定義從左到右的顏色不變 -->
    <gradient
            android:endColor="#E5E5EA"
            android:startColor="#E5E5EA" />
</shape>
複製代碼