Android 自定义 UI 的那些事儿 - 清爽好看的 Swi

好看的 UI 对于 APP 来说是很重要的，那就让我们一起看看如何自定义漂亮的 UI 吧。

前言

我们都知道，Switch 控件有开启和关闭两种状态，可以用来设置某项功能是否启用等等。但是原生的 Switch 控件未免太过单调，下面我们就来自定义一个清爽好看的吧。

先上效果图：

效果图

实现步骤

1.我们先在 drawable 文件夹中定义 Switch 控件的 thumb 和 track。

res/drawable/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">
        <shape>
            <size android:width="18dp" android:height="18dp" />
            <corners android:radius="10dp" />
            <solid android:color="@color/theme" />
            <stroke android:width="4.5dp" android:color="@color/transparent" />
        </shape>
    </item>

    <item>
        <shape>
            <size android:width="18dp" android:height="18dp" />
            <corners android:radius="10dp" />
            <solid android:color="@color/gray_light" />
            <stroke android:width="12dp" android:color="@color/transparent" />
        </shape>
    </item>
</selector>

thumb，简单来说就是控件左右的那个圆圈。

res/drawable/switch_track.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="38dp" android:height="18dp" />
    <corners android:radius="10dp" />
    <solid android:color="@color/white" />
</shape>

track，简单来说就是控件上那个长长的轨道。

但是到这里还不够，我们只是把控件的两个属性做完了，灰色的描边还没有呢。

2.使用 include 布局将 Switch 控件放到 LinearLayout 中，设置上我们刚才写的两个属性，并且为 LinearLayout 设置灰色背景的描边。

res/layout/include_switch.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/white_bg_r20dp_s2dp"
    android:paddingLeft="3.2dp"
    android:paddingRight="2dp"
    android:paddingTop="1.5dp"
    android:paddingBottom="1.5dp">

    <Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:switchMinWidth="40dp"
        android:thumb="@drawable/switch_thumb"
        android:track="@drawable/switch_track"
        android:id="@+id/switch_widget"/>

</LinearLayout>

res/drawable/white_bg_r20dp_s2dp.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="20dp"/>
    <stroke
        android:width="2dp"
        android:color="@color/gray_light" />
    <solid android:color="@color/white"/>
</shape>

3.以上代码用到的颜色值：
res/values/colors.xml

<resources>
    <color name="theme">#FF1F7DF7</color>
    <color name="transparent">#00000000</color>
    <color name="gray_light">#FFE0E0E0</color>
    <color name="white">#FFFFFFFF</color>
</resources>

使用

1.在布局文件的里添加以下代码。

<include
    layout="@layout/include_switch"
    android:id="@+id/item_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

2.在代码文件中找到我们添加好的 Switch 控件。

// 查找 include 的 id, 其实找到的是 res/layout/include_switch.xml 的根布局
LinearLayout layout=findViewById(R.id.item_switch);

// 在上面的根布局上, 再次查找 Switch 的 id, 就能找到我们的 Switch 控件了
Switch layout_switch=layout.findViewById(R.id.switch_widget);

3.再来看一遍效果图：

开启状态 关闭状态

文章到这里就结束了，如果帮到了你，别忘了点个赞哦。