一、效果图

1、默认

在这里插入图片描述在这里插入图片描述

2、自定义

请添加图片描述请添加图片描述

二、上代码

1、创建thumb

shape_switch_thumb_true.xml

<?xml version="1.0" encoding="utf-8"?&gt;
<shape xmlns:android="http://schemas.android.com/apk/res/android"&gt;

    <!--设置大小--&gt;
    <size android:width="20dp"
        android:height="20dp"/&gt;

    <!--设置圆角--&gt;
    <corners android:radius="10dp"/>

    <!--设置背景颜色-->
    <solid android:color="@color/white"/>

    <!--设置边框-->
    <stroke android:width="2dp" android:color="@color/red"/>

</shape>

shape_switch_thumb_false.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!--设置大小-->
    <size android:width="20dp"
        android:height="20dp"/>

    <!--设置圆角-->
    <corners android:radius="10dp"/>

    <!--设置背景颜色-->
    <solid android:color="@color/white"/>

    <!--设置边框-->
    <stroke android:width="2dp" android:color="@color/silver"/>

</shape>

selector_switch_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--选中状态ture-->
    <item android:drawable="@drawable/shape_switch_thumb_true" android:state_checked="true"/>

    <!--选中状态false-->
    <item android:drawable="@drawable/shape_switch_thumb_false" android:state_checked="false"/>

</selector>

2、创建track

shape_switch_track_true.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!--设置大小-->
    <size android:width="40dp"
        android:height="20dp"/>

    <!--设置圆角-->
    <corners android:radius="10dp"/>

    <!--设置背景颜色-->
    <solid android:color="@color/red"/>

</shape>

shape_switch_track_false.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--设置大小-->
    <size android:width="40dp"
        android:height="20dp"/>

    <!--设置圆角-->
    <corners android:radius="10dp"/>

    <!--设置背景颜色-->
    <solid android:color="@color/silver"/>
</shape>

selector_switch_track.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--选中状态ture-->
    <item android:drawable="@drawable/shape_switch_track_true" android:state_checked="true"/>

    <!--选中状态false-->
    <item android:drawable="@drawable/shape_switch_track_false" android:state_checked="false"/>

</selector>

3、设置Swicth属性

<Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:thumb="@drawable/selector_switch_thumb"
        android:track="@drawable/selector_switch_track"
        tools:ignore="UseSwitchCompatOrMaterialXml" />

三、链接

1、Switch官方API:链接

2、shape详解链接

原文地址:https://blog.csdn.net/notthin/article/details/121898075

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_48294.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注