关于自定义 View 的那点事_自定义view的基本流程-优快云博客

本文链接：https://blog.youkuaiyun.com/qixiyang9412/article/details/146101105

文章目录

概要

在 Android 开发中，自定义 View 是一个非常重要的技能。通过自定义 View，您可以创建出独特、个性化的用户界面，提升用户体验。今天，就让我们一起探讨如何在 Android 中自定义 View，并优雅地处理手势交互。

一、自定义 View 的基本步骤

（一）创建自定义 View 类

继承 View 类或其子类，并重写构造函数：

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;

public class CustomView extends View {
    public CustomView(Context context) {
        super(context);
    }

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

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

（二）重写 onMeasure 方法

在 onMeasure 方法中设置 View 的大小：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int desiredWidth = 200;
    int desiredHeight = 200;

    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);

    width = MeasureSpec.getMode(widthMeasureSpec) == MeasureSpec.EXACTLY ? width : desiredWidth;
    height = MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY ? height : desiredHeight;

    setMeasuredDimension(width, height);
}

（三）重写 onDraw 方法

在 onDraw 方法中进行绘图操作：

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

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

    Paint paint = new Paint();
    paint.setColor(Color.RED);
    paint.setStyle(Paint.Style.FILL);

    canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, paint);
}

二、onMeasure 方法的详细分析

（一）MeasureSpec 的概念

onMeasure 方法的参数 widthMeasureSpec 和 heightMeasureSpec 是用于描述父布局对子 View 的尺寸要求的。它们是通过 MeasureSpec 类来定义的，MeasureSpec 包含了尺寸的模式和大小。

int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);

（二）测量逻辑

在 onMeasure 方法中，根据父布局的尺寸要求和自身的尺寸需求，计算出 View 的最终尺寸。常见的测量逻辑如下：

if (widthMode == MeasureSpec.EXACTLY) {
    // 父布局要求精确尺寸，使用父布局提供的尺寸
    width = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
    // 父布局要求最大尺寸，取父布局提供的尺寸和自身需求的最小值
    width = Math.min(desiredWidth, widthSize);
} else {
    // 父布局没有尺寸要求，使用自身需求的尺寸
    width = desiredWidth;
}

if (heightMode == MeasureSpec.EXACTLY) {
    height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
    height = Math.min(desiredHeight, heightSize);
} else {
    height = desiredHeight;
}

（三）设置测量后的尺寸

通过 setMeasuredDimension 方法设置测量后的尺寸：

setMeasuredDimension(width, height);

三、onDraw 方法的详细分析

（一）Canvas 和 Paint 的使用

在 onDraw 方法中，使用 Canvas 和 Paint 进行绘图操作。Canvas 提供了一系列的绘图方法，如 drawCircle、drawRect、drawText 等。Paint 用于设置绘图的样式，如颜色、线条粗细、填充样式等。

初始化画笔：在 init 方法中，设置画笔的颜色、样式、线条宽度和抗锯齿属性。
获取 View 尺寸：在 onDraw 方法中，获取 View 的宽度和高度。
绘制线条：使用 canvas.drawLine 方法绘制线条。
绘制文本：使用 canvas.drawText 方法绘制文本。
绘制矩形：使用 canvas.drawRect 方法绘制矩形。
绘制圆形：使用 canvas.drawCircle 方法绘制圆形。

Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);

canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, paint);

（二）绘制逻辑

在 onDraw 方法中，根据 View 的尺寸和状态，绘制出相应的图形或文字。可以绘制静态的图形，也可以根据用户的交互动态改变绘图内容。

四、实战应用Demo

（一）创建一个带有边框的圆形 View

通过自定义 View，创建一个带有边框的圆形 View：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

public class CircleView extends View {
    public CircleView(Context context) {
        super(context);
    }

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

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int desiredSize = (int) (100 * getResources().getDisplayMetrics().density);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width = measureDimension(desiredSize, widthMode, widthSize);
        int height = measureDimension(desiredSize, heightMode, heightSize);

        setMeasuredDimension(width, height);
    }

    private int measureDimension(int desiredSize, int mode, int size) {
        int result;
        if (mode == MeasureSpec.EXACTLY) {
            result = size;
        } else if (mode == MeasureSpec.AT_MOST) {
            result = Math.min(desiredSize, size);
        } else {
            result = desiredSize;
        }
        return result;
    }

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

        int width = getWidth();
        int height = getHeight();
        int radius = Math.min(width, height) / 2;

        Paint paint = new Paint();
        paint.setAntiAlias(true);

        // 绘制圆形
        paint.setColor(Color.BLUE);
        canvas.drawCircle(width / 2, height / 2, radius, paint);

        // 绘制边框
        paint.setColor(Color.BLACK);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5);
        canvas.drawCircle(width / 2, height / 2, radius - 2.5f, paint);
    }
}

在布局文件中使用这个自定义 View：

<com.example.CircleView
    android:layout_width="200dp"
    android:layout_height="200dp" />

（二）创建一个可拖动的 View

通过自定义 View 和手势交互，创建一个可拖动的 View：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;

public class DraggableView extends View {
    private int x = 0;
    private int y = 0;
    private GestureDetector gestureDetector;

    public DraggableView(Context context) {
        super(context);
        gestureDetector = new GestureDetector(context, new GestureListener());
    }

    public DraggableView(Context context, AttributeSet attrs) {
        super(context, attrs);
        gestureDetector = new GestureDetector(context, new GestureListener());
    }

    public DraggableView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        gestureDetector = new GestureDetector(context, new GestureListener());
    }

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

        Paint paint = new Paint();
        paint.setColor(Color.BLUE);
        paint.setStyle(Paint.Style.FILL);

        canvas.drawCircle(x, y, 50, paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return gestureDetector.onTouchEvent(event);
    }

    private class GestureListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            x = (int) e2.getX();
            y = (int) e2.getY();
            invalidate();
            return true;
        }
    }
}

在布局文件中使用这个自定义 View：

<com.example.DraggableView
    android:layout_width="200dp"
    android:layout_height="200dp" />

小结

通过以上方法，您可以轻松地在 Android 中自定义 View，并优雅地处理手势交互。希望这些方法和代码示例能够帮助您创建出独特、个性化的用户界面，提升用户体验。