绘制自定义视图

Question

我想创建一个在圆圈内有复选标记的自定义视图。参考下图。

画圆很容易。我需要一些关于绘制刻度线的建议。

感谢任何帮助。

Answer 1

使用 LayerDrawable 您可以绘制一个可绘制对象数组，其中具有最大索引的元素将被绘制在顶部。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/circle" />
    <item android:drawable="@drawable/check" />
</layer-list>

或者您可以使用 VectorDrawable，右键单击可绘制文件夹 > 新建 > 矢量资产 > 图标 > 搜索 "check circle"。

Answer 2

如果您没有创建自定义视图的特定要求，我建议您只使用矢量可绘制对象：

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:pathData="M0 12a12 12 0 1 1 0 0.01z"
        android:fillColor="#8ab88c"/>

    <path
        android:pathData="M5.25 12l4.5 4.5l9 -9"
        android:strokeColor="#ffffff"
        android:strokeWidth="2.5"/>

</vector>

第一个<path>元素使用椭圆弧命令绘制圆，第二个使用两个"lineto"命令绘制检查

这可以在 ImageView 中使用，具有您喜欢的任何尺寸，并且可以很好地缩放。

如果您必须实现自定义视图，我会在 onDraw() 实现中使用相同的通用技术：

@Override
protected void onDraw(Canvas canvas) {
    rectF.set(getLeft(), getTop(), getRight(), getBottom());
    canvas.drawOval(rectF, fillPaint);

    float checkmarkWidth = getWidth() * 0.5626f;
    float delta = checkmarkWidth / 3.0f;

    float initialX = (getWidth() - checkmarkWidth) / 2.0f;
    float initialY = getHeight() / 2.0f;

    path.reset();
    path.moveTo(initialX, initialY);
    path.rLineTo(delta, delta);
    path.rLineTo(2 * delta, -2 * delta);

    strokePaint.setStrokeWidth(getWidth() / 9);
    canvas.drawPath(path, strokePaint);
}

绘制自定义视图

Drawing Custom View

android

android-custom-view

shape