一、View绘制体系概述
Android的UI系统是一个高度复杂的分层架构，而View绘制机制则是这个架构的核心组成部分。理解View的绘制过程，不仅有助于开发者优化UI性能，还能实现各种复杂的自定义视图效果。
1.1 基本概念
在Android中，View是所有UI组件的基类，它不仅是用户界面的视觉呈现，还负责接收用户交互事件。View的绘制过程可以概括为三个主要阶段：
- 测量(Measure)：确定View的大小
- 布局(Layout)：确定View的位置
- 绘制(Draw)：将View绘制到屏幕上
这三个阶段构成了View绘制的完整流程，通常被称为"measure-layout-draw"过程。
1.2 绘制流程的触发
View的绘制流程通常由以下几种情况触发：
- Activity启动时
- View的invalidate()或requestLayout()方法被调用
- 屏幕旋转或尺寸变化
- 动画执行过程中
理解这些触发条件有助于我们在开发中更精准地控制UI更新。
二、测量阶段：确定View的大小
2.1 测量的核心方法
测量阶段的核心是两个方法：measure(int widthMeasureSpec, int heightMeasureSpec)和onMeasure(int widthMeasureSpec, int heightMeasureSpec)。
measure()方法由系统调用，是测量过程的入口onMeasure()方法由子类重写，用于自定义测量逻辑
下面是一个简单的自定义View示例，展示如何重写onMeasure方法：
class CustomView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
// 获取父容器传递的测量规格
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
val widthSize = MeasureSpec.getSize(widthMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
val heightSize = MeasureSpec.getSize(heightMeasureSpec)
// 计算视图的期望尺寸
val desiredWidth = calculateDesiredWidth()
val desiredHeight = calculateDesiredHeight()
// 根据测量模式确定最终尺寸
val finalWidth = when (widthMode) {
MeasureSpec.EXACTLY -> widthSize
MeasureSpec.AT_MOST -> min(desiredWidth, widthSize)
else -> desiredWidth
}
val finalHeight = when (heightMode) {
MeasureSpec.EXACTLY -> heightSize
MeasureSpec.AT_MOST -> min(desiredHeight, heightSize)
else -> desiredHeight
}
// 设置测量结果
setMeasuredDimension(finalWidth, finalHeight)
}
private fun calculateDesiredWidth(): Int {
// 计算视图的期望宽度
return paddingLeft + paddingRight + 200 // 示例值
}
private fun calculateDesiredHeight(): Int {
// 计算视图的期望高度
return paddingTop + paddingBottom + 100 // 示例值
}
}
2.2 MeasureSpec详解
MeasureSpec是一个32位的int值，用于父View向子View传递测量要求：
- 高2位表示测量模式(Mode)
- 低30位表示测量大小(Size)
测量模式有三种：
- EXACTLY：父容器已经确定了子View的精确大小
- AT_MOST：子View的最大尺寸不能超过指定值
- UNSPECIFIED：父容器不对子View施加任何约束
2.3 递归测量过程
对于ViewGroup及其子类，测量过程会递归进行：
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
// 1. 测量自身
val desiredWidth = calculateDesiredWidth()
val desiredHeight = calculateDesiredHeight()
// 2. 测量子View
for (i in 0 until childCount) {
val child = getChildAt(i)
// 为子View生成MeasureSpec
val childWidthMeasureSpec = getChildMeasureSpec(
widthMeasureSpec,
paddingLeft + paddingRight,
child.layoutParams.width
)
val childHeightMeasureSpec = getChildMeasureSpec(
heightMeasureSpec,
paddingTop + paddingBottom,
child.layoutParams.height
)
// 递归测量子View
child.measure(childWidthMeasureSpec, childHeightMeasureSpec)
}
// 3. 根据子View的测量结果调整自身尺寸
val width = resolveSize(desiredWidth, widthMeasureSpec)
val height = resolveSize(desiredHeight, heightMeasureSpec)
// 4. 设置测量结果
setMeasuredDimension(width, height)
}
三、布局阶段：确定View的位置
3.1 布局的核心方法
布局阶段的核心是两个方法：layout(int l, int t, int r, int b)和onLayout(boolean changed, int left, int top, int right, int bottom)。
layout()方法由系统调用，用于设置View的四个顶点位置onLayout()方法由子类重写，用于安排子View的位置
下面是一个简单的LinearLayout布局逻辑示例：
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
if (orientation == VERTICAL) {
layoutVertical(l, t, r, b)
} else {
layoutHorizontal(l, t, r, b)
}
}
private fun layoutVertical(left: Int, top: Int, right: Int, bottom: Int) {
var childTop = paddingTop
for (i in 0 until childCount) {
val child = getChildAt(i)
if (child.visibility == GONE) continue
// 获取子View测量后的高度
val childHeight = child.measuredHeight
// 设置子View的位置
child.layout(
paddingLeft,
childTop,
right - paddingRight,
childTop + childHeight
)
// 更新下一个子View的top位置
childTop += childHeight + spaceBetweenChildren
}
}
3.2 布局参数与约束
在布局过程中，LayoutParams扮演了重要角色。它包含了子View对父容器的布局请求，例如：
- width/height
- margin/padding
- gravity/align
不同的ViewGroup有不同的LayoutParams子类，例如LinearLayout.LayoutParams、RelativeLayout.LayoutParams等。
3.3 坐标系统与位置计算
Android使用的是相对坐标系统：
- 原点(0,0)位于View的左上角
- X轴向右为正，Y轴向下为正
在计算子View位置时，需要考虑以下因素：
- 父容器的padding
- 子View的margin
- 子View之间的间隔
- 布局方向（LTR/RTL）
四、绘制阶段：将View渲染到屏幕
4.1 绘制的核心方法
绘制阶段的核心是draw(Canvas canvas)方法，它的执行过程可以分为六个步骤：
override fun draw(canvas: Canvas) {
// 1. 绘制背景
if (!dirtyOpaque) {
drawBackground(canvas)
}
// 2. 如果需要，保存canvas的图层（layer）
val horizontalEdges = mLeft + mPaddingLeft
val verticalEdges = mTop + mPaddingTop
if (!verticalEdges && !horizontalEdges) {
onDraw(canvas)
} else {
with(canvas) {
save()
clipRect(horizontalEdges, verticalEdges, mRight - mLeft - horizontalEdges, mBottom - mTop - verticalEdges)
onDraw(canvas)
restore()
}
}
// 3. 绘制子View
dispatchDraw(canvas)
// 4. 绘制装饰（如滚动条）
onDrawScrollBars(canvas)
// 5. 绘制前景
drawForeground(canvas)
}
4.2 Canvas与Paint
Canvas是绘制的核心类，它提供了各种绘制方法：
- 绘制文本：drawText()
- 绘制线条：drawLine()
- 绘制矩形：drawRect()
- 绘制圆形：drawCircle()
- 绘制图片：drawBitmap()
Paint则用于定义绘制的样式和属性：
- 颜色（color）
- 样式（fill/stroke）
- 字体（typeface）
- 抗锯齿（antiAlias）
下面是一个自定义绘制的示例：
class CustomView(context: Context, attrs: AttributeSet?) : View(context, attrs) {
private val paint = Paint().apply {
color = Color.RED
style = Paint.Style.FILL
isAntiAlias = true
textSize = 40f
}
private val circlePaint = Paint().apply {
color = Color.BLUE
style = Paint.Style.STROKE
strokeWidth = 5f
isAntiAlias = true
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
// 获取视图的中心坐标
val centerX = width / 2f
val centerY = height / 2f
// 绘制圆形
canvas.drawCircle(centerX, centerY, 100f, circlePaint)
// 绘制文本
canvas.drawText("Hello, Canvas!", centerX, centerY, paint)
}
}
4.3 绘制顺序与层次
View的绘制顺序非常重要，它决定了UI元素的层次关系：
- 背景最先绘制，位于最底层
- 内容（onDraw）绘制在背景之上
- 子View（dispatchDraw）绘制在内容之上
- 装饰（如滚动条）绘制在最上层
五、View树与绘制流程
5.1 View与ViewGroup的关系
在Android中，UI界面是由View和ViewGroup组成的树状结构：
- View是所有UI组件的基类，负责绘制和事件处理
- ViewGroup是View的子类，它可以包含多个子View，负责管理子View的布局
5.2 绘制流程的触发与传播
整个绘制流程由ViewRootImpl触发，它是View树的根节点：
// ViewRootImpl中的关键代码
private void performTraversals() {
// 测量阶段
performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);
// 布局阶段
performLayout(lp, mWidth, mHeight);
// 绘制阶段
performDraw();
}
这个过程是递归进行的，从根节点开始，依次处理每个子节点，直到所有View都完成测量、布局和绘制。
六、性能优化与常见问题
6.1 绘制性能优化
优化View绘制性能的关键策略：
- 减少onDraw()方法中的计算量
- 避免在onDraw()方法中创建新对象
- 使用硬件加速
- 合理使用invalidate()和postInvalidate()
- 避免过度绘制（Overdraw）
下面是一个优化前后的对比示例：
// 优化前 - 每次绘制都创建新对象
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val paint = Paint() // 避免在onDraw中创建新对象
paint.color = Color.RED
canvas.drawCircle(width/2f, height/2f, 50f, paint)
}
// 优化后 - 在初始化时创建对象
private val paint = Paint().apply {
color = Color.RED
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
canvas.drawCircle(width/2f, height/2f, 50f, paint)
}
6.2 常见绘制问题与解决方案
-
卡顿问题：
- 原因：复杂的绘制操作或频繁的UI更新
- 解决方案：优化绘制代码，使用异步加载
-
闪烁问题：
- 原因：多次调用invalidate()或使用了不恰当的动画
- 解决方案：合并多次invalidate()调用，使用ViewPropertyAnimator
-
布局抖动：
- 原因：在滚动过程中频繁调用requestLayout()
- 解决方案：缓存测量结果，避免不必要的布局计算
七、高级主题：自定义View与动画
7.1 自定义View的实现
实现自定义View通常需要以下步骤：
- 继承View或其子类
- 处理构造函数
- 重写onMeasure()方法
- 重写onLayout()方法（如果是ViewGroup）
- 重写onDraw()方法
- 处理事件（onTouchEvent等）
下面是一个完整的自定义圆形进度条示例：
class CircleProgressBar(context: Context, attrs: AttributeSet?) : View(context, attrs) {
// 画笔
private val backgroundPaint = Paint().apply {
color = Color.LTGRAY
style = Paint.Style.STROKE
strokeWidth = 10f
isAntiAlias = true
}
private val progressPaint = Paint().apply {
color = Color.BLUE
style = Paint.Style.STROKE
strokeWidth = 10f
isAntiAlias = true
strokeCap = Paint.Cap.ROUND
}
private val textPaint = Paint().apply {
color = Color.BLACK
textSize = 30f
isAntiAlias = true
textAlign = Paint.Align.CENTER
}
// 进度
private var progress = 0
private var maxProgress = 100
// 矩形区域
private val rectF = RectF()
init {
// 加载自定义属性
context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar).apply {
backgroundPaint.color = getColor(R.styleable.CircleProgressBar_backgroundColor, Color.LTGRAY)
progressPaint.color = getColor(R.styleable.CircleProgressBar_progressColor, Color.BLUE)
progress = getInt(R.styleable.CircleProgressBar_progress, 0)
maxProgress = getInt(R.styleable.CircleProgressBar_maxProgress, 100)
recycle()
}
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
// 确保View是正方形
val size = min(measuredWidth, measuredHeight)
setMeasuredDimension(size, size)
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
// 获取圆心和半径
val centerX = width / 2f
val centerY = height / 2f
val radius = (width - paddingLeft - paddingRight) / 2f - backgroundPaint.strokeWidth / 2
// 设置矩形区域
rectF.left = centerX - radius
rectF.top = centerY - radius
rectF.right = centerX + radius
rectF.bottom = centerY + radius
// 绘制背景圆
canvas.drawCircle(centerX, centerY, radius, backgroundPaint)
// 绘制进度圆弧
val sweepAngle = 360f * progress / maxProgress
canvas.drawArc(rectF, -90f, sweepAngle, false, progressPaint)
// 绘制文本
val text = "$progress%"
val textY = centerY - (textPaint.descent() + textPaint.ascent()) / 2
canvas.drawText(text, centerX, textY, textPaint)
}
// 设置进度
fun setProgress(newProgress: Int) {
if (newProgress != progress) {
progress = newProgress.coerceIn(0, maxProgress)
invalidate() // 触发重绘
}
}
}
7.2 动画与绘制
View的动画系统与绘制机制密切相关：
- 属性动画(Property Animation)通过改变View的属性值并触发重绘实现
- 帧动画(Frame Animation)通过按顺序显示一系列图片实现
- 矢量动画(Vector Animation)通过操作SVG路径实现
下面是一个使用属性动画实现进度条平滑更新的示例：
// 平滑更新进度
fun animateProgress(from: Int, to: Int, duration: Long = 1000L) {
val animator = ValueAnimator.ofInt(from, to)
animator.duration = duration
animator.addUpdateListener { animation ->
setProgress(animation.animatedValue as Int)
}
animator.start()
}
八、总结与最佳实践
8.1 关键要点回顾
- View的绘制流程分为三个主要阶段：测量(Measure)、布局(Layout)和绘制(Draw)
- 测量阶段确定View的大小，布局阶段确定View的位置，绘制阶段将View渲染到屏幕
- 自定义View时，需要理解MeasureSpec、Canvas和Paint的使用
- 性能优化的关键是减少onDraw()中的计算量和对象创建
- 合理使用invalidate()和postInvalidate()可以避免不必要的重绘
8.2 最佳实践建议
- 优先使用现有的View和ViewGroup，避免不必要的自定义
- 在自定义View时，尽可能复用对象，避免在onDraw()中创建新对象
- 使用硬件加速提升复杂绘制操作的性能
- 使用ConstraintLayout等现代布局管理器减少布局层级
- 定期使用Android Profiler分析UI性能，识别瓶颈
理解Android View的绘制机制是成为优秀Android开发者的关键一步。通过深入掌握这一机制，开发者可以创建出更高效、更流畅、更美观的用户界面，同时避免常见的性能陷阱。
