因原生的switch控件样式不符合UI要求,因此决定自定义Switch样式。通过修改switch的track和thumb属性实现,以最小的修改实现自定义switch样式。
1、布局中使用
<!-- switchMinWidth的值和my_switch_track_off.xml及my_switch_track_off.xml中宽度一致 -->
<Switch
android:id="@+id/switch_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:switchMinWidth="40dp"
android:thumb="@drawable/my_switch_thumb"
android:track="@drawable/my_switch_track"
android:showText="false"
android:background="@null"/>
2、res/drawable下新建6个文件:my_switch_thumb.xml,my_switch_track.xml,my_switch_thumb_off.xml,my_switch_thumb_on.xml,my_switch_track_off.xml,my_switch_track_on.xml。
具体内容如下:
my_switch_thumb.xml
<!-- res/drawable/my_switch_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/my_switch_thumb_on"/>
<item android:state_checked="false"
android:drawable="@drawable/my_switch_thumb_off">
</item>
</selector>
my_switch_track.xml
<!-- res/drawable/my_switch_track.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/my_switch_track_on" />
<item android:state_checked="false"
android:drawable="@drawable/my_switch_track_off">
</item>
</selector>
my_switch_thumb_off.xml
<!-- res/drawable/my_switch_thumb_off.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- 宽和高>=轨道高,若此处的宽和高==track的高则圆圈与轨道一样大,类似苹果switch样式 -->
<size
android:width="24dp"
android:height="24dp" />
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#ffffff"
android:endColor="#000000"
android:startColor="#ffffff"
android:gradientRadius="22dp"
android:type="radial" />
</shape>
my_switch_thumb_on.xml
<!-- res/drawable/my_switch_thumb_on.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<!-- 宽和高>=轨道高,若此处的宽和高==track的高则圆圈与轨道一样大,类似苹果switch样式 -->
<size
android:width="24dp"
android:height="24dp" />
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#ffffff"
android:endColor="#000000"
android:startColor="#ffffff"
android:gradientRadius="22dp"
android:type="radial" />
</shape>
my_switch_track_off.xml
<!-- res/drawable/my_switch_track_off.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center_vertical|center_horizontal">
<shape android:shape="rectangle">
<solid android:color="#d9d9d9" />
<!-- 宽度要和布局中switch控件最小宽度一致 -->
<size
android:width="40dp"
android:height="15dp" />
<!-- 半径为高度的一半 -->
<corners android:radius="8dp"/>
</shape>
</item>
</layer-list>
my_switch_track_on.xml
<!-- res/drawable/my_switch_track_on.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center_vertical|center_horizontal">
<shape android:shape="rectangle">
<solid android:color="#40caff" />
<!-- 宽度要和布局中switch控件最小宽度一致 -->
<size
android:width="40dp"
android:height="15dp" />
<!-- 半径为高度的一半 -->
<corners android:radius="8dp"/>
</shape>
</item>
</layer-list>