Switch 組件在日常生常中比較常用,尤其是在配置頁面

網上也有很多自定義的例子，主要是原生的太。。。；

用圖片，在適配中，經常出現拉伸變形的情況, 試著用一下強大的shape

話不多說，上代碼

UI xml

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="@dimen/item_layout_margin_Top"
        android:layout_marginBottom="@dimen/item_layout_margin_left_Top"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="@string/settings_close_back_camera"
            android:textColor="@color/settings_text_color"
            android:textSize="@dimen/setting_content_textsize" />

        <Switch
            android:id="@+id/settings_closeBackCamera"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:thumb="@drawable/switch_thumb"
            android:track="@drawable/switch_track"
            android:switchMinWidth="@dimen/item_switchMinWidth"
            android:paddingTop="10dp"
            android:paddingBottom="10dp" />

    </RelativeLayout>

其中以下標紅地方為重要的樣式配置項
<Switch
    android:id="@+id/settings_closeBackCamera"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:thumb="@drawable/switch_thumb"
    android:track="@drawable/switch_track"
    android:switchMinWidth="@dimen/item_switchMinWidth"
    android:paddingTop="10dp"
    android:paddingBottom="10dp" />

switch_thumb.xml

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

<?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/item_switchSelectwidth" android:width="@dimen/item_switchSelectwidth"/>
    <!-- 圓角弧度 20 -->
    <corners android:radius="@dimen/item_switchSelectRadius"/>


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

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

</shape>

gray_thumb.xml

<?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/item_switchSelectwidth" android:width="@dimen/item_switchSelectwidth"/>
    <!-- 圓角弧度 20 -->
    <corners android:radius="@dimen/item_switchSelectRadius"/>


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

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

</shape>

第二個軌道配置

switch_track.xml

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

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

    <!-- 高度40 -->
    <size android:height="30dp"/>
    <!-- 圓角弧度 20 -->
    <corners android:radius="15dp"/>
    <!-- 變化率 -->
    <gradient
        android:endColor="#415ff4"
        android:startColor="#415ff4" />

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

</shape>

green_track.xml

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

    <!-- 高度30   此處設置寬度無效-->
    <size android:height="30dp"/>
    <!-- 圓角弧度 15 -->
    <corners android:radius="15dp"/>


    <!-- 做透明 -->
    <!-- 變化率  定義從左到右的顏色不變 -->
   <!-- <gradient
        android:endColor="#888888"
        android:startColor="#888888" />-->

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

?

大家有什么好的案例也可以拿出來分享一下