android使用shape自定义Switch组件

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>

 

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