Android控件<第五篇>：Switch

Switch是Android组件之一，它本质上是一个按钮。在很多项目上都会用到这个组件实现仿IOS开关的效果。

那么IOS的开关效果是什么样子的呢？

如图所示：

157.gif

【第一步】 尝试给Switch添加背景图来实现IOS开关效果

准备好两张图片，并且给Switch添加背景，代码如下：

<Switch
    android:id="@+id/switch_bt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/swich_bg"
    android:text="开关" />

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/open" android:state_checked="true"></item>
    <item android:drawable="@mipmap/close" android:state_checked="false"></item>
</selector>

效果如下：

156.gif

然而，效果并不是想象中的那样，那么得出结论：直接设置背景，并不能修改Switch原本的样子。

Switch有两个重要的属性：thumb和track，thumb是Switch中间圆的背景，track是Switch底部长条背景，使用代码绘制这两个图形，效果如下：（文字比较碍事，先去掉）

157.gif

代码实现如下：

<Switch
    android:id="@+id/switch_bt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/thumb_bg"
    android:track="@drawable/track_bg" />

thumb_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/thumb_open" android:state_checked="true" />
    <item android:drawable="@drawable/thumb_close" />
</selector>

thumb_open.xml

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

    <!--设置圆的半径-->
    <size android:height="50dp" android:width="50dp"/>

    <!--设置圆空心部分的背景色 -->
    <solid android:color="#eeeeee"/>

    <!--设置圆边的背景色-->
    <stroke
        android:width="1dp"
        android:color="#33da33"/>
</shape>

thumb_close.xml

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

    <!--设置圆的半径-->
    <size android:height="50dp" android:width="50dp"/>

    <!--设置圆空心部分的背景色 -->
    <solid android:color="#eeeeee"/>

    <!--设置圆边的背景色-->
    <stroke
        android:width="1dp"
        android:color="#CCCECC"/>
</shape>

track_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/track_open" android:state_checked="true" />
    <item android:drawable="@drawable/track_close" />
</selector>

track_open.xml

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

    <!--设置圆角矩形的高-->
    <size android:height="50dp"/>

    <!--设置圆角矩形的圆角半径-->
    <corners android:radius="25dp"/>

    <solid android:color="#33da33"/>

    <!--设置圆边的背景色-->
    <stroke
        android:width="1dp"
        android:color="#33da33"/>
</shape>

track_close.xml

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

    <!--设置圆角矩形的高-->
    <size android:height="50dp"/>

    <!--设置圆角矩形的圆角半径-->
    <corners android:radius="25dp"/>

    <solid android:color="#eeeeee"/>

    <!--设置圆边的背景色-->
    <stroke
        android:width="1dp"
        android:color="#CCCECC"/>
</shape>

以上最重要的两个属性已经演示完毕，接下来说一下其它属性吧：

• textOff、textOn、showText

textOff：设置关闭状态文本
textOn：设置打开状态文本
showText：这个属性默认为false，只有将这个属性设置为true才能显示textOff和textOn

代码如下：

<Switch
    android:id="@+id/switch_bt"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/thumb_bg"
    android:track="@drawable/track_bg"
    android:textOff="关灯"
    android:textOn="开灯"
    android:showText="true" />

效果如下：

158.gif

当然，为了更为美观，或者为了模仿IOS，一般这里不设置状态文本。

• switchMinWidth

设置开关的最小宽度

• switchPadding

设置开关灯的padding

• splitTrack

设置光学边界，这个值默认为false，如果设置了光学边界之后，thumb和track之间会有光学边界效果，如图：

159.gif

剩下的属性基本用不到了，就此省略。

[本章完...]