如何自定义 Material Design 下 CheckBox 的勾选图标效果

随着 Material Design 的流行，很多网站和应用开始使用 Material Design 风格来提升用户体验。在 Material Design 中，CheckBox 是常见的表单控件之一，但是默认的勾选图标效果并不一定符合产品需求。因此，本文将介绍如何自定义 Material Design 下 CheckBox 的勾选图标效果。

Material Design 的 CheckBox

在 Material Design 中，默认的 CheckBox 勾选图标是一个实心的圆形，选中时中间有一个白色的勾，如下图所示：

可以看到，这个勾选图标非常简洁明了，符合 Material Design 的设计原则：简单、明了、直白。

自定义 CheckBox

然而，在实际的产品开发中，我们常常会遇到需要自定义 CheckBox 勾选图标的情况。比如，我们需要将 CheckBox 勾选图标变成一个上传的文件图标，或者是一个喜欢的心形图标。

在这种情况下，我们需要自定义 CheckBox 勾选图标。下面，我将介绍两种方法来实现这个目标。

方法一：使用自定义图片

第一种方法是使用自定义图片作为 CheckBox 的勾选图标。具体步骤如下：

1. 准备好你想要使用的图片，在项目中添加资源文件。

2. 在布局文件中使用 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。

1. 重新编译应用，在运行时就可以看到自定义的 CheckBox 勾选图标了。

使用自定义图片的好处是可以在设计师的帮助下，制作出精美的图标。不足之处是需要准备好图片资源，并在布局文件中进行设置，增加代码量。

方法二：使用自定义 Drawable

第二种方法是使用自定义 Drawable 来实现 CheckBox 的勾选图标。使用自定义 Drawable 的好处是可以更加灵活地控制绘制过程，可以实现复杂的图形、动画效果。

这种方法的核心是编写自定义 Drawable，其中最关键的是实现 draw 方法。下面是一个简单的 CheckBoxDrawable 类，用于绘制一个简单的勾选框：

public class CheckBoxDrawable extends Drawable {

  private Rect mBounds;
  private Paint mPaint;

  public CheckBoxDrawable(int color) {
    mPaint = new Paint();
    mPaint.setColor(color);
    mPaint.setStrokeWidth(10);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setAntiAlias(true);
  }

  @Override
  public void draw(Canvas canvas) {
    if (mBounds == null) {
      mBounds = getBounds();
    }
    canvas.drawRect(mBounds, mPaint);

    float x1 = mBounds.left + mBounds.width() / 4;
    float y1 = mBounds.top + mBounds.height() / 2;
    float x2 = mBounds.left + mBounds.width() / 2;
    float y2 = mBounds.bottom - mBounds.height() / 4;
    float x3 = mBounds.right - mBounds.width() / 4;
    float y3 = mBounds.top + mBounds.height() / 4;

    Path path = new Path();
    path.moveTo(x1, y1);
    path.lineTo(x2, y2);
    path.lineTo(x3, y3);
    canvas.drawPath(path, mPaint);
  }

  @Override
  public void setAlpha(int alpha) {
    mPaint.setAlpha(alpha);
    invalidateSelf();
  }

  @Override
  public void setColorFilter(@Nullable ColorFilter colorFilter) {
    mPaint.setColorFilter(colorFilter);
    invalidateSelf();
  }

  @Override
  public int getOpacity() {
    return PixelFormat.TRANSLUCENT;
  }
}

在上面的 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 的展示状态。

View customCheckbox = findViewById(R.id.custom_checkbox);
customCheckbox.setOnClickListener(new OnClickListener() {
  @Override
  public void onClick(View v) {
    isChecked = !isChecked;
    CheckBoxDrawable drawable = (CheckBoxDrawable) customCheckbox.getBackground();
    if (isChecked) {
      drawable.setColor(Color.GREEN);
    } else {
      drawable.setColor(Color.RED);
    }
  }
});

可以看到，使用自定义 Drawable 的好处是可以自由地绘制各种形状的图标，并且可以实现复杂的动画效果。不足之处在于需要编写一定的代码，并且在一些低版本的 Android 系统中可能存在兼容性问题。

总结

本文介绍了如何自定义 Material Design 下 CheckBox 的勾选图标效果。其中，使用自定义图片和使用自定义 Drawable 两种方式各有优缺点。在实际的开发中，需要根据产品需求和技术难度作出选择，以达到最佳的用户体验。

附：完整代码

GitHub 代码

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65950094eb4cecbf2d9430ca