Material Design 是一种现代化的设计语言，被 Google 用于 Android 平台上的应用程序设计。Material Design 标志着 Android 应用程序向一个更加具有动感、更加直观、更加美观的方向发展。在 Material Design 中，开关按钮是不可或缺的元素，能够让用户更好地掌控应用程序的功能。本文将介绍使用 Material Design 制作简单的开关按钮。
介绍 Material Design 的开关按钮
Material Design 的开关按钮具有如下特点：
- 使用有趣的动画效果，吸引用户的注意力；
- 外形酷炫，具有充足的设计灵活性；
- 体验良好，能够给用户带来良好的操作感受。
开发环境
在开始编写 Material Design 的开关按钮之前，需要准备下列环境：
- Android Studio 2.3 或以上版本；
- 设备分辨率为 360 x 640 的 Genymotion 模拟器；
- 最新版的 Android SDK。
建立项目
在 Android Studio 中建立一个新项目后，按照下列步骤执行操作：
- 建立一个新布局文件
_activity_main.xml_，并使用 RelativeLayout 作为根布局。 - 在布局文件中，运用一个
<Switch>标签来定义一个开关按钮。
<Switch
android:id="@+id/switchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:thumb="@drawable/switch_thumb"
android:track="@drawable/switch_track" />- 制作 drawable 文件夹，并在其中放置
switch_thumb.xml和switch_track.xml两个文件。 - 在
switch_thumb.xml文件中，使用shape元素为主按钮外形添加描边，并使用color属性呈现出深色按钮的外观。
-- -------------------- ---- -------
----- ------------- ------------------
------ ----------------------------------------------------------
---------------------
-------
-------------------
--------------------------------------
------
------------------------------------------------
-----
--------------------
-----------------------
--------- 在
switch_track.xml文件中，使用shape元素为按钮轨迹轮廓添加描边，并使用color属性呈现出淡色轮廓的外观。
-- -------------------- ---- -------
----- ------------- ------------------
------ ----------------------------------------------------------
--------------------------
-------
-------------------
------------------------------------ --
------
----------------------------------------------- --
-----
--------------------
--------------------- --
--------添加动画效果
现在我们已经完成了 Material Design 开关按钮的外观设计，接下来我们在按钮动作时，为其添加一些动画效果。在按钮动作时，我们需要为按钮本身和背景添加动画效果。
在上面的布局文件中，我们添加一个 <RelativeLayout> 标签，并用其包含 <Switch> 标签。我们接下来要向该 RelativeLayout 中添加动画效果。
为了实现动画效果，我们使用下列动画文件：
switch_on.xml：用于启动时，开启按钮的动画效果；switch_off.xml：用于启动时，关闭按钮的动画效果；switch_thumb.xml：用于启动时，动态调整按钮的外观。
在实现具体动画效果时，主要是运用 setInterpolator()、setDuration() 和 startAnimation() 等操作。
-- -------------------- ---- -------
------- ---- --------------------------- ---------- -
-- ----------- -
------------ ---- - -------------- -------------------------------------
--------- --------- - ----------------------------------------------------- ------------------
----------------------------------------------------------------------------------
------------------
-----------------------------
- ---- -
------------ ---- - -------------- -------------------------------------
--------- --------- - ----------------------------------------------------- -------------------
------------------------------------------------------------------------------
------------------
-----------------------------
-
-尝试运行应用程序
一切准备就绪，我们可以开始运行我们的应用程序了。启动应用程序时，您应该能够看到一个美丽动人的开关按钮，它具有美妙的动画效果。此代码不仅仅是一个开关按钮，还是 Material Design 中许多复杂元素的基础。
在完成了这个简单的练习之后，您可能有更多的灵感，可以通过了解更多的 Material Design 元素来实现对应的功能。
总结
在本文中，我们学习了如何使用 Material Design 制作开关按钮。我们通过改变该按钮的形状和外观，提升了底层应用程序设计的质量。如果您正在开发一个 Android 应用程序，并且想要将 UI 设计得更加酷炫、更加易于使用，请始终关注 Material Design。Material Design 将使您的应用程序看起来更加专业和好看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450e50a980a9b385b9c55d3