Android 自定义 View：打造圆形图片控件，让你的 App 更有型

2023-12-01 14:08:24

在当今移动应用程序的时代，用户界面（UI）的吸引力和易用性变得至关重要。精心设计的 UI 元素可以增强用户体验，让你的应用程序在竞争激烈的市场中脱颖而出。其中一个常见的 UI 需求是创建圆形图片控件，用于展示用户头像、产品图像或其他类型的视觉内容。

本篇文章将深入探讨如何在 Android 中使用自定义 View 实现圆形图片控件。我们将深入研究实现过程，了解 PorterDuffXfermode 的工作原理，并提供一步一步的指南，让你可以轻松地在自己的应用程序中创建圆形图片控件。

了解 PorterDuffXfermode

PorterDuffXfermode 是 Android 中一个强大的工具，用于在画布上合成不同的图像或形状。它通过应用指定的 PorterDuff.Mode 来控制合成过程，该模式定义了如何组合源图像和目标图像中的像素。

对于圆形图片控件，我们将使用 PorterDuff.Mode.SRC_IN 模式。此模式仅显示与源图像重叠的目标图像部分。换句话说，它将源图像的形状“抠”到目标图像上。

创建自定义 View

要创建圆形图片控件，我们需要一个自定义 View，它继承自 View 类并覆盖其 onDraw() 方法。在 onDraw() 方法中，我们将使用 Canvas 对象来绘制圆形。

以下是如何创建自定义 View 的示例代码：

public class CircularImageView extends View {

    private Bitmap bitmap;
    private Paint paint;

    public CircularImageView(Context context) {
        super(context);
        init();
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    }

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

        if (bitmap != null) {
            int width = getWidth();
            int height = getHeight();

            // 计算圆的半径和中心点
            int radius = Math.min(width, height) / 2;
            float centerX = width / 2f;
            float centerY = height / 2f;

            // 创建一个与 View 大小相同的矩形
            Rect rect = new Rect(0, 0, width, height);

            // 创建一个圆形路径
            Path path = new Path();
            path.addCircle(centerX, centerY, radius, Path.Direction.CW);

            // 将圆形路径裁剪到画布上
            canvas.clipPath(path);

            // 绘制位图
            canvas.drawBitmap(bitmap, null, rect, paint);
        }
    }

    public void setBitmap(Bitmap bitmap) {
        this.bitmap = bitmap;
        invalidate();
    }
}

使用自定义 View

要使用自定义 View，只需在你的布局文件中声明它即可。例如：

<com.example.myapplication.CircularImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/profile_picture" />

你也可以使用 Java 代码动态创建自定义 View：

CircularImageView circularImageView = new CircularImageView(context);
circularImageView.setLayoutParams(new ViewGroup.LayoutParams(100, 100));
circularImageView.setImageBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.profile_picture));