在 Android 开发中，Button 是最基础的 UI 元素之一。在 Material Design 中，Button 的设计风格更为简洁、扁平化，同时拥有了全新的点击效果 —— ripple 点击效果。
本文将为大家详细介绍如何实现 Material Design 风格的 Button，并加入 ripple 点击效果，最终实现一个完整的 Material Design 风格的 Button。同时，我们会讲解一些相关的概念和原理。希望读者能够通过本文的学习深入了解 Android 的 Material Design 设计风格，并能够将其应用到自己的项目中。
1. Material Design 风格的 Button 实现
Material Design 风格的 Button 在视觉上更为简洁、扁平化，并且使用了一种典型的颜色组合。通常我们会为 Button 设置两种状态：普通状态和按下状态，两种状态之间切换会有不同的颜色和背景。
下面是一个例子，展示了三个 Material Design 风格的 Button，它们分别处于普通状态、按下状态和不可用状态：
对于普通状态和按下状态，我们可以采用不同的背景和边框颜色。当然，这就要求我们提供两套不同的背景和边框资源。
1.1 快速实现一个 Material Design 风格的 Button
现在我们来快速实现一个 Material Design 风格的 Button。
我们在 xml 文件中定义一个 Button 元素，并为其设置圆角边框和背景色（这里以 Blue 为例）：
// javascriptcn.com 代码示例
<Button
android:id="@+id/btn_material_design"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Material Design"/>
<!--定义背景 shape-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#3F51B5" />
</shape>接下来，我们需要为 Button 设置按下状态的背景和边框颜色。同样地，我们需要定义一个新的 shape。此处我们为按下状态的 Button 设定一个深一点的颜色：
// javascriptcn.com 代码示例
<!--定义背景 shape-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_normal" android:state_pressed="false"/>
<item android:drawable="@drawable/bg_pressed" android:state_pressed="true"/>
</selector>
<!--定义背景 shape-->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="20dp" />
<solid android:color="#3F51B5" /> <!-- 按下状态时，将颜色调深一些 -->
<stroke android:width="2px"
android:color="#FFFFFF" />
</shape>到这里，我们就已经实现了一个基本的 Material Design 风格的 Button。但它还缺少了 ripple 点击效果。那么，接下来我们就来探讨如何为 Button 添加 ripple 点击效果。
2. ripple 点击效果
ripple 就是水波纹的意思。回忆一下当我们点击屏幕时，会发现一个白色的水波纹从我们手指的位置向四周扩散，这就是 ripple 点击效果。在 Material Design 中，ripple 点击效果十分重要，因为它给用户反馈，告诉用户他们点击了什么，以及他们点击的位置。
2.1 实现 ripple 选中效果
我们先来实现一个简单的 ripple 选中效果，以及在 Button 按下时显示 ripple 效果。
首先，我们在按钮的 xml 中添加属性：
// javascriptcn.com 代码示例
<Button
android:id="@+id/btn_ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Ripple Effect" />
<!--定义背景 shape-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_normal" android:state_pressed="false"/>
<item android:drawable="@drawable/bg_pressed" android:state_pressed="true"/>
<!--添加 ripple 效果-->
<item>
<ripple android:color="#3F51B5">
<item android:id="@android:id/mask">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</item>
</ripple>
</item>
</selector>代码中新添加了一个 ripple 元素，作为 StateListDrawable 的一个 item，它包含了一个 ShapeDrawable 和一个 mask，mask 用于限制 ripple 效果的范围。稍后，我们会继续讲解 mask 的作用。
现在，运行项目，你会看到即使没有按下按钮，你的 Button 也拥有了 ripple 效果：
2.2 更复杂的 ripple 效果实现
我们再来实现一个复杂一些的 ripple 效果。在这里，我们会使用 drawable 来创建一个圆形的 ripple 效果。
下面是在 xml 中实现 ripple 效果的代码：
// javascriptcn.com 代码示例
<!--定义背景 shape-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_normal" android:state_pressed="false"/>
<item android:drawable="@drawable/bg_pressed" android:state_pressed="true"/>
<!--定义 ripple 效果-->
<item>
<ripple
android:color="#3F51B5">
<!--添加 mask-->
<item android:id="@android:id/mask">
<shape android:shape="oval">
<solid android:color="#000000"/>
</shape>
</item>
<!--定义 ripple 效果的颜色和大小-->
<item android:id="@android:id/background">
<shape android:shape="oval">
<solid android:color="#FFFFFF"/>
</shape>
</item>
</ripple>
</item>
</selector>其中，我们定义了一个 oval 类型的 ShapeDrawable 作为 mask，以确保 ripple 效果在 Button 范围内进行。我们还定义了另一个 oval 类型的 ShapeDrawable，用于表示 Button 按下时的 ripple 效果。在这个实现的例子中，反馈效果的颜色是白色的，而 Button 的颜色是蓝色的。下面是实现的效果：
我们还可以在代码中动态添加 ripple 效果。接下来，我们会结合上述知识，为 Button 添加一个完整的 ripple 效果。
3. 完整的 Material Design 风格的 Button
现在，我们来组合上面讲解的所有内容，完成一个完整的 Material Design 风格的 Button。这个 Button 包含了如下特性：
- Material Design 风格的 Button
- 普通状态和按下状态
- ripple 点击效果
下面是 xml 的代码：
// javascriptcn.com 代码示例
<Button
android:id="@+id/btn_material_design_full"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Material Design Full"/>
<!--定义背景 shape-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_normal" android:state_pressed="false"/>
<item android:drawable="@drawable/bg_pressed" android:state_pressed="true"/>
<!--定义 ripple 效果-->
<item>
<ripple android:color="#3F51B5">
<!--添加 mask-->
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</item>
<!--定义 ripple 效果的颜色和大小-->
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</item>
</ripple>
</item>
</selector>Button 的普通状态和按下状态的实现方式与之前相同。在 Button 整体的 selector 中，我们新增了一个 ripple 子元素，并包含了 item 元素，其中定义了 CircleDrawable 和 ShapeDrawable。上述代码中，我们用矩形（rectangle） ShapeDrawable 作为 mask，而非前面实现 ripple 效果时所用的圆形 ShapeDrawable。
现在，我们已经完成了一个完美的 Material Design 风格的 Button，它包含了 ripple 点击效果、吸引人的特殊效果，以及普通状态和按下状态的差异化展示。在这个 Button 中，我们使用了 StateListDrawable 以及 RippleDrawable 来实现丰富、复杂的效果让 Button 更加炫酷。
总结
本文我们介绍了 Android Material Design 中 Button 的基本实现方法，并深入探讨了如何添加 ripple 点击效果。Material Design 风格的 Button 拥有简洁、扁平、使用颜色明亮的风格，并且拥有了更强烈的视觉效果。
在实际的开发过程中，我们可以自定义 Button 的各种属性来实现 Material Design 风格。同时，为 Button 添加 ripple 点击效果可以让应用更加易于操作和友好。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654b67a27d4982a6eb5427b8