老规矩,先放上一张图,对比一下安卓原生实现的Switch按钮和仿IOS实现的区别:
下面主要讲讲仿IOS Switch控件的实现,其实安卓Switch控件中提供了两个属性让我们去自定义控件的样式,分别是
android:thumb=""
和android:track=""
,要像实现IOS那样的效果,定义这两个属性即可,下面贴出代码:
<Switch
android:id="@+id/all_day_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="@dimen/border_space_nineteen"
android:thumb="@drawable/thumb"
android:track="@drawable/track"/>
下面是对应的xml文件:
① thumb.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/blue_thumb"/>
<item android:drawable="@drawable/gray_thumb"/>
</selector>
② track.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/blue_track"/>
<item android:drawable="@drawable/gray_track"/>
</selector>
③ blue_thumb.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- 高度30 -->
<size android:height="30dp" android:width="30dp"/>
<!-- 圆角弧度 15 -->
<corners android:radius="15dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<!--外圈颜色-->
<stroke android:width="1dp"
android:color="#388cff"/>
</shape>
④ blue_track.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 高度25 -->
<size android:height="25dp"/>
<!-- 圆角弧度 15 -->
<corners android:radius="15dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#388cff"
android:startColor="#388cff" />
</shape>
⑤ gray_thumb.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- 高度30 -->
<size android:height="30dp" android:width="30dp"/>
<!-- 圆角弧度 15 -->
<corners android:radius="15dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<!--外圈颜色-->
<stroke android:width="1dp"
android:color="#bbbbbb"/>
</shape>
⑥ gray_track.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<!-- 高度25 此处设置宽度无效-->
<size android:height="25dp"/>
<!-- 圆角弧度 15 -->
<corners android:radius="15dp"/>
<!-- 变化率 定义从左到右的颜色不变 -->
<gradient
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
<!--外圈颜色-->
<stroke android:width="1dp"
android:color="#bbbbbb"/>
</shape>
原理就是,首先定义四个shape标签文件,分别对应控件选中和未选中状态下中间那个圆和背景;然后在selector标签中将这四个标签合理的设置为选中和未选中的状态;最后将两个selector文件设置到控件的android:thumb=""
和android:track=""
属性中,用法和原生switch是一样的。