Android自定义视图绘制实战指南 - 深入理解自定义View的绘制过程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01062/article/details/148416745

Android自定义视图绘制实战指南 - 深入理解自定义View的绘制过程

android-training-course-in-chinese Android官方培训课程中文版项目地址: https://gitcode.com/gh_mirrors/an/android-training-course-in-chinese

前言

在Android开发中，自定义View是构建独特UI体验的重要手段。本文将深入讲解如何实现自定义View的绘制过程，帮助开发者掌握自定义View的核心绘制技术。

核心绘制方法：onDraw()

自定义View外观的关键在于重写onDraw()方法。这个方法接收一个Canvas对象作为参数，Canvas类提供了丰富的绘制方法：

绘制文本：drawText()
绘制基本图形：drawLine(), drawRect(), drawCircle()等
绘制复杂图形：drawPath()
绘制位图：drawBitmap()

绘制前的准备工作

在开始绘制前，我们需要创建Paint对象。Android的绘图框架分为两部分：

绘制内容(Canvas)：定义要绘制什么
绘制样式(Paint)：定义如何绘制

例如，Canvas提供绘制直线的方法，而Paint则决定这条直线的颜色、粗细等样式属性。

优化绘制性能

一个重要的性能优化原则是：不要在onDraw()中创建Paint对象。View会频繁重绘，在onDraw()中创建对象会导致性能问题。正确的做法是在初始化时创建Paint对象：

private void init() {
    mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  // 启用抗锯齿
    mTextPaint.setColor(mTextColor);
    mTextPaint.setTextSize(mTextHeight);
    
    mPiePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPiePaint.setStyle(Paint.Style.FILL);  // 设置填充样式
}

处理View的尺寸变化

为了正确绘制View，必须了解View的当前尺寸。我们需要处理以下几种情况：

不同屏幕尺寸
不同屏幕密度
不同方向（横竖屏）

onSizeChanged()方法

当View尺寸变化时，系统会调用onSizeChanged()。这是计算布局参数的最佳位置：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    // 考虑内边距
    float xpad = getPaddingLeft() + getPaddingRight();
    float ypad = getPaddingTop() + getPaddingBottom();
    
    // 可用绘制区域
    float ww = w - xpad;
    float hh = h - ypad;
    
    // 计算实际可用大小
    float diameter = Math.min(ww, hh);
}

精确控制尺寸：onMeasure()

如果需要更精确地控制View尺寸，可以重写onMeasure()方法：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // 计算最小宽度
    int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth();
    int w = resolveSizeAndState(minw, widthMeasureSpec, 1);
    
    // 计算高度
    int minh = MeasureSpec.getSize(w) - (int)mTextWidth + getPaddingBottom() + getPaddingTop();
    int h = resolveSizeAndState(MeasureSpec.getSize(w) - (int)mTextWidth, heightMeasureSpec, 0);
    
    setMeasuredDimension(w, h);  // 必须调用
}

注意：必须调用setMeasuredDimension()，否则会抛出运行时异常。

实际绘制示例

下面是一个典型的onDraw()实现示例：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    
    // 1. 绘制背景效果
    canvas.drawOval(mBackgroundBounds, mBackgroundPaint);
    
    // 2. 绘制文本
    canvas.drawText(mData.get(mCurrentItem).mLabel, mTextX, mTextY, mTextPaint);
    
    // 3. 绘制饼图切片
    for (Item it : mData) {
        mPiePaint.setShader(it.mShader);
        canvas.drawArc(mBounds, 360-it.mEndAngle, 
                      it.mEndAngle-it.mStartAngle, true, mPiePaint);
    }
    
    // 4. 绘制指针
    canvas.drawLine(mTextX, mPointerY, mPointerX, mPointerY, mTextPaint);
    canvas.drawCircle(mPointerX, mPointerY, mPointerSize, mTextPaint);
}

高级绘制技巧

文字绘制：
- 使用setTypeface()设置字体
- 使用setColor()设置文字颜色
- 使用setTextSize()调整文字大小
基本图形：
- drawRect()绘制矩形
- drawOval()绘制椭圆
- drawArc()绘制弧形
- 通过setStyle()设置填充(FILL)或描边(STROKE)
复杂图形：
- 使用Path类创建复杂路径
- 使用drawPath()绘制路径
渐变效果：
- 创建LinearGradient对象
- 通过setShader()应用渐变