Android控件篇 修改原生Switch组件的样式

一、效果展示

关闭状态效果：

开启状态效果：

二、修改样式

• 第一步：添加Switch控件

 <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerInParent="true"
        android:thumb="@drawable/selector_switch_thumb"
        android:track="@drawable/selector_switch_truck"/>

样式解析：

“ track ” 和 “ thumb ”这2个属性,前者是设置开关的背景图,后者是设置开关的滑块图

样式一：设置开关的背景图

android:thumb="@drawable/selector_switch_thumb"

新建 selector_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" >
        <shape android:shape="oval">
            <!-- 圆圈大小调整 -->
            <size android:width="@dimen/dp_20"
                android:height="@dimen/dp_20"/>
            <solid android:color="@color/white"/>
            <stroke android:width="2dp" android:color="#545FFD"/>
        </shape>
    </item>

    <!-- 控制内圈颜色 -->
    <item  android:state_checked="false" >
        <shape android:shape="oval">
            <!-- 圆圈大小调整 -->
            <size android:width="@dimen/dp_20"
                android:height="@dimen/dp_20"/>
            <solid android:color="#999999"/>
            <!-- 外圈颜色 -->
            <stroke android:width="3dp" android:color="@color/white"/>
        </shape>
    </item>
</selector>

样式二：设置开关的滑块图

android:track="@drawable/selector_switch_truck"

新建 selector_switch_truck.xml，进行调用

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--设置开关的背景图-->
    <item  android:state_checked="true" >
        <shape>
            <size android:width="@dimen/dp_15"
                android:height="@dimen/dp_5"/>
            <solid android:color="#545FFD"/>
            <corners android:radius="@dimen/dp_18"/>
        </shape>
    </item>

    <item  android:state_checked="false" >
        <shape>
            <size
                  android:width="@dimen/dp_15"
                  android:height="@dimen/dp_5"/>
            <solid android:color="#999999"/>
            <corners android:radius="@dimen/dp_18"/>
        </shape>
    </item>
</selector>