用 CustomPainter 实现微信视频录制按钮

Android

2024-02-10 11:30:00

引言

在移动应用程序开发中，按钮是用户交互的关键元素。为了提升用户体验，开发者经常会创建具有独特视觉效果的按钮。微信视频录制按钮就是一个很好的例子，它在用户长按时会发生动态变化。

CustomPainter 类概述

CustomPainter 是 Android 中一个功能强大的类，它允许您自定义视图的绘制过程。通过使用 Canvas 对象，您可以创建自定义形状、图像和动画。

实现微信视频录制按钮

微信视频录制按钮由两个同心圆组成：

背景圆： 一个半透明的白色圆，在按钮长按时扩大。
按钮圆： 一个较小的红色圆，在按钮长按时缩小。

步骤 1：创建 CustomPainter 子类

首先，创建一个 CustomPainter 子类的类。该类将处理按钮的绘制逻辑：

public class VideoRecordButtonPainter extends CustomPainter {
    // ...
}

步骤 2：绘制按钮圆

在 onDraw() 方法中，使用 drawCircle() 方法绘制按钮圆：

@Override
public void onDraw(Canvas canvas) {
    // 绘制按钮圆
    canvas.drawCircle(cx, cy, buttonRadius, buttonPaint);
}

步骤 3：绘制背景圆

使用 drawCircle() 方法绘制背景圆。当按钮长按时，它的半径会动态变化：

// 绘制背景圆
canvas.drawCircle(cx, cy, backgroundRadius, backgroundPaint);

步骤 4：处理长按事件

在 onTouchEvent() 方法中，处理按钮的长按事件，并相应调整背景圆和按钮圆的半径：

@Override
public boolean onTouchEvent(MotionEvent event) {
    // ...
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        // 按钮按下时，背景圆扩大，按钮圆缩小
        backgroundRadius += 10;
        buttonRadius -= 10;
    }
    // ...
}

步骤 5：创建 View

创建一个 View 类，并将 CustomPainter 设置为其背景：

public class VideoRecordButtonView extends View {
    private VideoRecordButtonPainter painter;
    
    // ...
    
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        painter.draw(canvas);
    }
}

步骤 6：将按钮添加到布局

在 XML 布局文件中，将 VideoRecordButtonView 添加到布局中：

<com.example.myapp.ui.VideoRecordButtonView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

示例代码

完整示例代码如下：

// CustomPainter 子类
public class VideoRecordButtonPainter extends CustomPainter {

    private Paint buttonPaint;
    private Paint backgroundPaint;
    private float cx, cy;
    private float buttonRadius, backgroundRadius;

    public VideoRecordButtonPainter(Context context) {
        // 初始化画笔和圆心坐标
        buttonPaint = new Paint();
        buttonPaint.setColor(Color.RED);
        buttonPaint.setStyle(Paint.Style.FILL);
        backgroundPaint = new Paint();
        backgroundPaint.setColor(Color.WHITE);
        backgroundPaint.setAlpha(128);
        backgroundPaint.setStyle(Paint.Style.FILL);
        cx = cy = 0;
        buttonRadius = 30;
        backgroundRadius = 40;
    }

    @Override
    public void onDraw(Canvas canvas) {
        // 绘制按钮圆
        canvas.drawCircle(cx, cy, buttonRadius, buttonPaint);

        // 绘制背景圆
        canvas.drawCircle(cx, cy, backgroundRadius, backgroundPaint);
    }
}

// View 类
public class VideoRecordButtonView extends View {

    private VideoRecordButtonPainter painter;

    public VideoRecordButtonView(Context context) {
        super(context);
        painter = new VideoRecordButtonPainter(context);
    }

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

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            // 按钮按下时，背景圆扩大，按钮圆缩小
            painter.setBackgroundRadius(painter.getBackgroundRadius() + 10);
            painter.setButtonRadius(painter.getButtonRadius() - 10);
            invalidate();
        }
        return true;
    }
}