安卓自定义Switch样式,简单易懂。

因原生的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>

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页