因为系统的原因,Switch在不同的版本下和某些手机上的展示的样子满足不了自己,因此我需要自定义,
以下是本文的效果:
- 其实想要实现这个样式很简单,只需要了解Switch控件的两个属性就可以完美的自己自定义了
<Switch
android:id="@+id/sMoRen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:switchMinWidth="20dp"
android:track="@drawable/track"
android:thumb="@drawable/thumb"/>
- track控制Switch样色
- thumb控制中间滑块的样式
1、定义track,在drawable文件下创建track.xml文件
<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_track" />
</selector>
green_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 高度40 -->
<size android:height="25dp"/>
<!-- 圆角弧度 20 -->
<corners android:radius="15dp"/>
<!-- 变化率 -->
<gradient
android:endColor="@color/colorRed"
android:startColor="@color/colorRed" />
</shape>
gray_track.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- 高度30 此处设置宽度无效-->
<size android:height="25dp"/>
<!-- 圆角弧度 15 -->
<corners android:radius="15dp"/>
<!-- 变化率 定义从左到右的颜色不变 -->
<gradient
android:endColor="@color/pageColor"
android:startColor="@color/pageColor" />
</shape>
2、定义thumb,在drawable文件下创建thumb.xml文件
<?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>
green_thumb.xml
<?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="25dp"/>
<!-- 变化率 -->
<gradient
android:endColor="#eeeeee"
android:startColor="#eeeeee" />
<stroke android:width="1dp"
android:color="@color/colorRed"/>
</shape>
gray_thumb,xml
<?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="25dp"/>
<!-- 变化率 -->
<gradient
android:endColor="@color/white"
android:startColor="@color/white" />
<stroke android:width="1dp"
android:color="@color/pageColor"/>
</shape>
OK ! 本文完