随着 Material Design 的流行，很多网站和应用开始使用 Material Design 风格来提升用户体验。在 Material Design 中，CheckBox 是常见的表单控件之一，但是默认的勾选图标效果并不一定符合产品需求。因此，本文将介绍如何自定义 Material Design 下 CheckBox 的勾选图标效果。
Material Design 的 CheckBox
在 Material Design 中，默认的 CheckBox 勾选图标是一个实心的圆形，选中时中间有一个白色的勾，如下图所示：
可以看到，这个勾选图标非常简洁明了，符合 Material Design 的设计原则：简单、明了、直白。
自定义 CheckBox
然而，在实际的产品开发中，我们常常会遇到需要自定义 CheckBox 勾选图标的情况。比如，我们需要将 CheckBox 勾选图标变成一个上传的文件图标，或者是一个喜欢的心形图标。
在这种情况下，我们需要自定义 CheckBox 勾选图标。下面，我将介绍两种方法来实现这个目标。
方法一：使用自定义图片
第一种方法是使用自定义图片作为 CheckBox 的勾选图标。具体步骤如下：
准备好你想要使用的图片，在项目中添加资源文件。
在布局文件中使用 CheckBox 控件，并设置 android:button 属性为自定义图片。
<CheckBox android:id="@+id/checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:button="@drawable/custom_checkbox_icon" android:text="自定义 CheckBox"/>
在这里，我们使用的自定义图片资源是 custom_checkbox_icon。
- 重新编译应用，在运行时就可以看到自定义的 CheckBox 勾选图标了。
使用自定义图片的好处是可以在设计师的帮助下，制作出精美的图标。不足之处是需要准备好图片资源，并在布局文件中进行设置，增加代码量。
方法二：使用自定义 Drawable
第二种方法是使用自定义 Drawable 来实现 CheckBox 的勾选图标。使用自定义 Drawable 的好处是可以更加灵活地控制绘制过程，可以实现复杂的图形、动画效果。
这种方法的核心是编写自定义 Drawable，其中最关键的是实现 draw 方法。下面是一个简单的 CheckBoxDrawable 类，用于绘制一个简单的勾选框：
-- -------------------- ---- -------
------ ----- ---------------- ------- -------- -
------- ---- --------
------- ----- -------
------ -------------------- ------ -
------ - --- --------
-----------------------
--------------------------
------------------------------------
--------------------------
-
---------
------ ---- ----------- ------- -
-- -------- -- ----- -
------- - ------------
-
------------------------ --------
----- -- - ------------ - --------------- - --
----- -- - ----------- - ---------------- - --
----- -- - ------------ - --------------- - --
----- -- - -------------- - ---------------- - --
----- -- - ------------- - --------------- - --
----- -- - ----------- - ---------------- - --
---- ---- - --- -------
--------------- ----
--------------- ----
--------------- ----
--------------------- --------
-
---------
------ ---- ------------ ------ -
-----------------------
-----------------
-
---------
------ ---- ------------------------ ----------- ------------ -
-----------------------------------
-----------------
-
---------
------ --- ------------ -
------ ------------------------
-
-在上面的 CheckBoxDrawable 类中，我们首先定义了一个颜色变量和一个 Paint 对象，然后在构造方法中初始化对象。在 draw 方法中，我们首先绘制一个框框，然后使用三条线段绘制出一个勾选的图形。
为了实现自定义 Drawable，我们还需要在布局文件中使用 View 控件代替 CheckBox 控件，并且使用自定义 Drawable 作为 View 的背景。具体来说，我们可以将 CheckBoxDrawable 和 View 组合，实现自定义 CheckBox。
<View android:id="@+id/custom_checkbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/custom_checkbox_drawable" android:clickable="true" android:focusable="true" />
在代码中，我们需要对 View 控件设置 ClickListener，并在处理勾选逻辑时，手动控制 Drawable 的展示状态。
-- -------------------- ---- -------
---- -------------- - -----------------------------------
------------------------------------- ----------------- -
---------
------ ---- ------------ -- -
--------- - -----------
---------------- -------- - ------------------ -------------------------------
-- ----------- -
-------------------------------
- ---- -
-----------------------------
-
-
---可以看到，使用自定义 Drawable 的好处是可以自由地绘制各种形状的图标，并且可以实现复杂的动画效果。不足之处在于需要编写一定的代码，并且在一些低版本的 Android 系统中可能存在兼容性问题。
总结
本文介绍了如何自定义 Material Design 下 CheckBox 的勾选图标效果。其中，使用自定义图片和使用自定义 Drawable 两种方式各有优缺点。在实际的开发中，需要根据产品需求和技术难度作出选择，以达到最佳的用户体验。
附：完整代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65950094eb4cecbf2d9430ca