Android UI开发 View自绘控件 分享

本文将详细讲解如何在Android UI开发中使用View自绘控件。我们将会了解在Android中View自绘控件的基本概念、View的绘制流程、自定义View的实现方法以及自定义View示例。

基本概念

View

View是Android UI开发中最基础的控件，是构成用户界面的元素之一。View是一个矩形区域，可以接收用户的触摸、点击等事件。View本身具有一些默认的绘制行为，可以在布局文件中设定其位置、大小等属性。

Canvas

Canvas是Android中的画布对象，可以在其上进行2D绘制。Canvas提供了一系列的绘制操作方法，如绘制直线、矩形、圆形等。

Paint

Paint是Android中的画笔对象，可以设置绘制颜色、字体、线条宽度等属性。可以在Canvas对象上使用Paint对象进行绘制。

View的绘制流程

View的绘制流程可以分为三个阶段，分别是测量、布局和绘制。

测量

在View的测量阶段中，系统会调用onMeasure()方法来确定视图的大小。在onMeasure()方法中，View会根据其内容计算出所需要的宽度和高度，然后将这些尺寸信息记录下来，并传递给下一阶段——布局。

布局

在View的布局阶段中，系统会调用onLayout()方法来确定View的位置。在onLayout()方法中，可以通过设置View的左上角点的坐标和右下角点的坐标来确定View所在的位置。

绘制

在View的绘制阶段中，系统会调用onDraw()方法来进行绘制操作。在onDraw()方法中，可以使用Canvas和Paint对象来进行自定义的绘制操作。当绘制完成后，View就会显示在屏幕上。

自定义View的实现方法

可以通过继承View或其子类来实现自定义View。当需要自定义View时，需要重写以下方法：

• onMeasure(int widthMeasureSpec, int heightMeasureSpec)：重写该方法来测量View的大小。
• onLayout(boolean changed, int left, int top, int right, int bottom)：重写该方法来设定View的位置。
• onDraw(Canvas canvas)：重写该方法来进行绘制操作。

以下是一个简单的自定义View示例：

public class MyView extends View {
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

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

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

    private void init() {
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        RectF oval = new RectF(0, 0, getWidth(), getHeight());
        canvas.drawOval(oval, mPaint);
    }
}

示例说明

示例1：绘制正弦曲线图

以下是一个绘制正弦曲线图的自定义View示例：

public class SinWaveView extends View {
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    private Path mPath = new Path();
    private int mWaveWidth = 100; //正弦曲线波浪宽度
    private int mWaveHeight = 60; //正弦曲线波浪高度
    private int mWavesCount;  //正弦曲线波浪数量
    private float mPhase; //正弦曲线相位
    private int mWidth; //View的宽度
    private int mHeight; //View的高度

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

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

    private void init() {
        mPaint.setStrokeWidth(4);
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w; //记录View的宽度
        mHeight = h; //记录View的高度
        mWavesCount = (int) Math.round(mWidth * 1.0f / mWaveWidth + 1.5);
    }

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

        //设置起点
        mPath.moveTo(-mWaveWidth + mPhase, mHeight / 2f);

        //绘制正弦曲线
        for (int i = 0; i < mWavesCount; i++) {
            float x = i * mWaveWidth + mPhase;
            float y = (float) (mHeight / 2f + mWaveHeight * Math.sin(x * Math.PI / mWaveWidth));
            mPath.lineTo(x, y);
        }

        canvas.drawPath(mPath, mPaint);
    }

    public void setPhase(float phase) {
        mPhase = phase;
        invalidate();
    }
}

在该示例中，我们使用了Path类来绘制正弦曲线。在onDraw()方法中，我们通过计算正弦曲线上每个点的x、y坐标来绘制出一条完整的正弦曲线。通过设置mPhase的值来实现正弦曲线的滚动效果。

示例2：绘制饼图

以下是一个绘制饼图的自定义View示例：

public class PieChartView extends View {
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private List<PieSlice> mPieSlices = new ArrayList<>();
    private float mMaxValue; //数据中的最大值
    private float mTotalValue; //数据的总和
    private int mStrokeWidth = 60; //饼图圆环的宽度

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

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

    private void init() {
        mPaint.setStrokeWidth(mStrokeWidth);
    }

    public void setData(List<PieSlice> pieSlices) {
        //计算最大值和总和
        mMaxValue = 0;
        mTotalValue = 0;
        for (PieSlice slice : pieSlices) {
            mMaxValue = Math.max(mMaxValue, slice.value);
            mTotalValue += slice.value;
        }

        //计算每个扇形的绘制角度
        float startAngle = 0;
        for (PieSlice slice : pieSlices) {
            float sweepAngle = slice.value / mTotalValue * 360;
            mPaint.setColor(slice.color);
            mPieSlices.add(new PieSlice(startAngle, sweepAngle, slice.value, slice.label, slice.color));
            startAngle += sweepAngle;
        }
        invalidate();
    }

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

        float centerX = getWidth() / 2f;
        float centerY = getHeight() / 2f;

        float outerRadius = (Math.min(getWidth(), getHeight()) - mStrokeWidth) / 2f;
        float innerRadius = outerRadius * 0.75f;

        RectF rectF = new RectF(centerX - outerRadius, centerY - outerRadius, centerX + outerRadius, centerY + outerRadius);
        RectF rectF1 = new RectF(centerX - innerRadius, centerY - innerRadius, centerX + innerRadius, centerY + innerRadius);

        //绘制扇形
        for (PieSlice slice : mPieSlices) {
            mPaint.setColor(slice.color);
            canvas.drawArc(rectF, slice.startAngle, slice.sweepAngle, false, mPaint);
            canvas.drawArc(rectF1, slice.startAngle, slice.sweepAngle, false, mPaint);
        }
    }

    public static class PieSlice {
        public float startAngle;
        public float sweepAngle;
        public float value;
        public String label;
        public int color;

        public PieSlice(float startAngle, float sweepAngle, float value, String label, int color) {
            this.startAngle = startAngle;
            this.sweepAngle = sweepAngle;
            this.value = value;
            this.label = label;
            this.color = color;
        }
    }
}

在该示例中，我们使用了Canvas的drawArc()方法来绘制饼图中的每个扇形。通过计算每个扇形的绘制角度，然后在onDraw()方法中使用drawArc()方法进行绘制。外圆和内圆之间的距离通过mStrokeWidth参数进行控制。在setData()方法中，我们根据传入的饼图数据计算出每个扇形的绘制角度，并记录在mPieSlices中。然后，在onDraw()方法中遍历mPieSlices，使用drawArc()方法绘制每个扇形。