Switch控件

修改Switch样式

用于修改全局Switch样式，如果要改单个的，可以单独引用主题；

一、 在style中定义Switch样式

<style name="SwitchStyle" parent="@style/Widget.AppCompat.CompoundButton.Switch">
    <item name="android:showText">false</item>
    <item name="android:thumb">@drawable/switch_thumb</item>
    <item name="android:track">@drawable/switch_track</item>
</style>

二、在对应的主题的引用

<style name="LoginThemeNoTitle" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#F5F0F0</item>
    <item name="colorPrimaryDark">#F5F0F0</item>
    <item name="colorAccent">#8F8B8B</item>
    <item name="android:switchStyle">@style/SwitchStyle</item>
</style>

三、滑块 drawable/switch_thumb

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

    <item
        android:id="@+id/switch_on"
        android:state_checked="true"
        android:drawable="@drawable/switch_thumb_on"/>
    <item
        android:id="@+id/switch_off"
        android:state_checked="false"
        android:drawable="@drawable/switch_thumb_off"/>

    <!-- 动画 没有动画的话 以下代码干掉 -->
    <transition
        android:fromId="@+id/switch_on"
        android:toId="@+id/switch_off">
        <animation-list>
            <item
                android:drawable="@drawable/switch_thumb_1"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_2"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_3"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_4"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_5"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_4"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_3"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_2"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_1"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_off"
                android:duration="30" />
        </animation-list>
    </transition>
    <transition
        android:fromId="@+id/switch_off"
        android:toId="@+id/switch_on">
        <animation-list>
            <item
                android:drawable="@drawable/switch_thumb_1"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_2"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_3"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_4"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_5"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_4"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_3"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_2"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_1"
                android:duration="30" />
            <item
                android:drawable="@drawable/switch_thumb_on"
                android:duration="30" />
        </animation-list>
    </transition>
    
</animated-selector>

四、滑块的ON/OFF

switch_thumb_on

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="@dimen/switch_thumb_size"
        android:height="@dimen/switch_thumb_size" />
    <solid android:color="@android:color/white" />
    <stroke
        android:width="@dimen/switch_thumb_stroke"
        android:color="#0000" />

</shape>

switch_thumb_off

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="@dimen/switch_thumb_size"
        android:height="@dimen/switch_thumb_size" />
    <solid android:color="@android:color/white" />
    <stroke
        android:width="@dimen/switch_thumb_stroke"
        android:color="#0000" />

</shape>

五、滑块的中间状态

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="@dimen/switch_thumb_size_1"
        android:height="@dimen/switch_thumb_size_1" />
    <solid android:color="@android:color/white" />
    <stroke
        android:width="@dimen/switch_thumb_stroke_1"
        android:color="#0000" />

</shape>

中间状态可以多设置几个，让动画看起来柔和；

改变滑块大小的动画，只要注意switch_thumb_size_1+switch_thumb_stroke_1=switch_thumb_size+switch_thumb_stroke即可；

六、背景/滑道 switch_track

<?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/switch_track_on"></item>
    <item
        android:state_checked="false"
        android:drawable="@drawable/switch_track_off"></item>
</selector>

七、滑道的ON/OFF

switch_track_on

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/orange" />
    <corners android:radius="@dimen/switch_track_radius" />
    <size
        android:width="@dimen/switch_track_width"
        android:height="@dimen/switch_track_height" />
</shape>

switch_track_off

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/darker_gray" />
    <corners android:radius="@dimen/switch_track_radius" />
    <size
        android:width="@dimen/switch_track_width"
        android:height="@dimen/switch_track_height" />
</shape>

监听状态变化

setOnCheckedChangeListener

写在后面

• 用到复杂的图形，需要UI提供；
• 就算知道了矢量图的语法，普通程序猿一般也写不出牛逼的矢量图动画；