安卓自定义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>

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值