在 HarmonyOS 中实现 CircleImageView 库

CircleImageView 是一个常见的 Android 库，用于显示圆形图片。在 HarmonyOS 中也可以很方便地实现。

实现步骤

1. 创建一个自定义的 View 类，继承于 Component。
2. 在该 View 中重写 onDraw() 方法，绘制圆形图片。
3. 在使用该 View 的地方，设置图片资源或者 Drawable，并将该 View 加入到布局中。

创建自定义的 View

import ohos.agp.components.Component;
import ohos.agp.components.Image;
import ohos.agp.render.Canvas;
import ohos.agp.utils.Color;
import ohos.agp.utils.RectFloat;
import ohos.agp.utils.RectInt;
import ohos.app.Context;

public class CircleImageView extends Component {
    private Image mImage;

    public CircleImageView(Context context) {
        super(context);
    }

    public CircleImageView(Context context, AttrSet attrs) {
        super(context, attrs);
    }

    public CircleImageView(Context context, AttrSet attrs, String defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setImage(Image image) {
        mImage = image;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        Color oldColor = canvas.getColor();
        canvas.setColor(Color.GRAY);

        // 获取 view 的边界
        RectFloat rect = getBoundRect();
        RectInt rectInt = new RectInt(rect.left, rect.top, rect.right, rect.bottom);

        // 绘制圆形的边框
        canvas.drawCircle(rect.getCenterX(), rect.getCenterY(), rect.width / 2, getBorderPaint());

        if (mImage != null) {
            // 绘制圆形图片
            canvas.drawCircle(rect.getCenterX(), rect.getCenterY(), rect.width / 2 - 4,
                getImagePaint(mImage, rectInt));
        }

        canvas.setColor(oldColor);
    }

    private Paint getBorderPaint() {
        Paint paint = new Paint();
        paint.setStrokeWidth(4);
        paint.setStyle(Paint.Style.STROKE_STYLE);
        paint.setAntiAlias(true);
        return paint;
    }

    private Paint getImagePaint(Image image, RectInt dstRect) {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        ImageShader shader = image.createShader();
        paint.setShader(shader);
        Matrix matrix = new Matrix();
        matrix.setScale(
            (float) dstRect.width() / image.getImageInfo().size.width,
            (float) dstRect.height() / image.getImageInfo().size.height);
        shader.setLocalMatrix(matrix);
        return paint;
    }
}

上述代码中，主要实现了以下几个功能：

• 绘制圆形的边框。
• 绘制圆形的图片，使用了 Shader 来实现图片的缩放和剪裁。
• 可以通过 setImage() 方法设置要显示的 Image 对象。

在布局中使用 CircleImageView

布局文件可以使用 XML 或者 Java 代码创建，这里演示一下使用 XML 来创建。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">

    <com.example.app.CircleImageView
        ohos:id="$+id:circle_image_view"
        ohos:width="100vp"
        ohos:height="100vp"
        ohos:margin="16vp"
        ohos:padding="8vp"
        ohos:background_element="$color:white"/>

</DirectionalLayout>

在使用 CircleImageView 的地方，需要在 XML 文件中声明该 View，并给出其属性，包括宽高、边距、内边距和背景颜色等。如果需要显示图片，则调用 setImage() 方法设置图片资源。

总结

本文分别介绍了在 HarmonyOS 中实现 CircleImageView 库的步骤以及相应的代码实现。总的来说，在 HarmonyOS 中绘制圆形图片与 Android 中大致相同，但是需要使用 HarmonyOS 的 API 来完成实现。如有不同之处，将在具体实现过程中详细介绍。