Android 自定义样式实现好看的SwitchCompat效果

时光一去不在

已于 2022-07-20 18:36:29 修改

阅读量4.8k

点赞数 7

分类专栏： Android 文章标签： android

于 2022-07-20 18:32:10 首次发布

本文链接：https://blog.csdn.net/qq_39048075/article/details/125897923

版权

Android 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

SwitchCompat自定义样式笔记

UI设计图加粗样式

按钮效果图

原生的控件一般是thumb(滑块)比滑道要稍微大一点,这里只能是通过图片或者自己画drawable实现
如标题所言,这里肯定是通过代码实现了

xml代码

<androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switch_check"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="20dp"
        android:thumb="@drawable/switch_common_thumb"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:switchMinWidth="60dp"
        app:track="@drawable/switch_common_track" />

thumb代码

这里使用stroke属性将边缘设置成透明就可以实现滑块比滑道小的效果

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/dialog_sync" />
    <size
        android:width="30dp"
        android:height="30dp" />
    <stroke
        android:width="10dp"
        android:color="#00000000" />
    <corners android:radius="15dp" />
</shape>

滑块代码和效果图

track代码

滑道看效果图的话,一个drawable实现不了,因此这里通过layer-list叠加画出,底层是一个中间透明,边缘蓝色的矩形,上层是一个外部透明,中间淡蓝色的矩形,这样子就叠加出滑块的效果图了

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00000000" />
            <size android:height="30dp" />
            <stroke
                android:width="3dp"
                android:color="@color/dialog_sync" />
            <corners android:radius="15dp" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#255A9FFF" />
            <size android:height="20dp" />
            <stroke
                android:width="12dp"
                android:color="#00000000" />
            <corners android:radius="15dp" />
        </shape>
    </item>
</layer-list>

关闭时的滑块效果

滑道因为有开关两种状态,上面已经实现了关闭时的效果,因此还需要实现一个打开时的效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00000000" />
            <size android:height="30dp" />
            <stroke
                android:width="3dp"
                android:color="@color/dialog_sync" />
            <corners android:radius="15dp" />
        </shape>
    </item>

    <item >
        <shape android:shape="rectangle">
            <solid android:color="#A85A9FFF" />
            <size android:height="20dp" />
            <stroke
                android:width="12dp"
                android:color="#00000000" />
            <corners android:radius="15dp" />
        </shape>
    </item>
</layer-list>

打开时的滑块效果

最后通过选择器将他们组合在一起,就实现了最上面的效果了

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/switch_common_track_selected" android:state_checked="true" />
    <item android:drawable="@drawable/switch_common_track_unselected" android:state_checked="false" />
</selector>