好看的 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.再来看一遍效果图:
文章到这里就结束了,如果帮到了你,别忘了点个赞哦。