android switch控件通过thumb track简单实现IOS控件UISwitch,SwitchButton

之前用到Switch控件的时候一直用的安卓原生的，但是最近UI要求要实现和IOS类似的效果，然后发现了Switch控件的thumb和track属性。。。

先看效果，，，

thumb属性指的是：switch上面滑动的滑块。。。track属性是指switch的背景。。。设置好这两个属性就能把switch做成像IOS的UISwitch控件的样子了。。。看代码

 <Switch
                android:id="@+id/notification_allowed_switch2"
                android:layout_width="0pt"
                android:layout_height="match_parent"
                android:layout_gravity="center_vertical"
                android:layout_weight="5"
                android:background="@color/eCall_black"
                android:thumb="@drawable/thumb"
                android:track="@drawable/track" />

switch的其他写法就是和普通的switch写法一样。。。只是改变thum和track的样式就行。。。

先看thumb   

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

在不同的选择状态下呈现不同的颜色和样式，我做的是在选中时thumb外圈是绿色，没有选中时外圈是灰色，正好和背景的颜色一样。。。具体的green_thumb代码

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

    <!-- 高度40 -->
    <size android:height="25dp" android:width="25dp"/>
    <!-- 圆角弧度 20 -->
    <corners android:radius="20dp"/>


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

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

</shape>

这个时候thumb的样子是这样的

再看gray_thumb代码

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

    <!-- 高度40 -->
    <size android:height="25dp" android:width="25dp"/>
    <!-- 圆角弧度 20 -->
    <corners android:radius="20dp"/>


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

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

</shape>

这个时候thumb是这样的

现在再看track

<?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_tack" />

</selector

green_track代码如下

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

    <!-- 高度40 -->
    <size android:height="8pt"/>
    <!-- 圆角弧度 20 -->
    <corners android:radius="15dp"/>
    <!-- 变化率 -->
    <gradient
        android:endColor="#5CCB00"
        android:startColor="#5CCB00" />



</shape>

grey_track只是换个颜色而已

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

<!-- 高度30   此处设置宽度无效-->
<size android:height="8pt"/>
<!-- 圆角弧度 15 -->
<corners android:radius="15dp"/>


<!-- 变化率  定义从左到右的颜色不变 -->
<gradient
    android:endColor="#888888"
    android:startColor="#888888" />

</shape>

最后实现的preview中的效果是这样的