之前用到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中的效果是这样的