本文详细介绍了Android中View和ViewGroup的绘制流程，包括测量、布局和绘制三个步骤，并通过自定义控件实例展示了如何实现特定功能。文章还探讨了ViewGroup对子View的测量和布局处理，以及在没有背景时如何绘制子View。通过对自定义跑马灯、图表、标题栏等控件的实例，帮助读者深入理解并掌握自定义控件的实现方法。
需求千变万化，总会出现官方控件无法满足的应用场景及特效，这个时候只能去自定义控件。自定义控件的种类主要分为：
- 继承官方控件，拓展其功能，如跑马灯效果
- 将已有控件组合起来，整合成一个模块，如标题栏
- 完全的自定义控件，自己完成控件的绘制布局及事件处理，如图表
下面会从最基础的View开始，从基础到拓展，梳理整个自定义控件的流程，通过自定义跑马灯效果、图表、标题栏、地图、加载框等例子来熟练自定义控件，保证今后能够应对各种自定义需求。
View的绘制流程
1、View和ViewGroup
View 是用户页面基本的构建块，也是Android中所有控件的基类，一般自定义控件都是继承View或者View的子类，完成特定的绘制和交互功能。
ViewGroup继承自View，本质上也是一个View，但它特殊在能包含其他的View，并对包含的View进行布局，这类View称为父容器。
所以Android用户页面实际上就是通过View和ViewGroup嵌套构建的，如下面这个例子
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<RelativealeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
这个布局中的LinearLayout和RelativealeLayout是ViewGroup，ImageView和TextView是普通的View，LinearLayout嵌套了ImageView和RelativealeLayout，RelativealeLayout又嵌套了TextView，就靠这种嵌套构建了我们看到的用户页面。
2、View的绘制流程
用画画做例子，画画需要先想内容画多大（测量），然后预估画在纸上什么位置（布局），最后落笔（绘制），View的主要绘制流程也绕不开这三个，measure（测量）、layout（布局）、draw（绘制），View的这三个API就是一个最基本的流程。以下面一个简单的例子讲解。
SampleView的实现
public class SampleView extends View {
public SampleView(Context context) {
super(context);
}
public SampleView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//单位px
setMeasuredDimension(20,20);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
}
布局中配置控件大小
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.myapplication.base.SampleView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="@color/colorPrimaryDark" />
</RelativeLayout>
- 测量
View类中的onMeasure方法完成了控件大小的测量，在onMeasure方法中默认调用setMeasuredDimension方法来设置测量的宽高，setMeasuredDimension方法非常重要，它内部完成了对成员变量mMeasuredWidth和mMeasuredHeight的赋值，这两个值保证了控件在页面的大小。
SampleView的onMeasure方法中，我主动调用了setMeasuredDimension重新给了宽高，这样覆盖了
原本 super.onMeasure方法对控件大小的设置。最后显示的是20px的大小。
相关源码如下：
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}
protected final void setMeasuredDimension(int measuredWidth, int measuredHeight) {
...
//仅贴出关键代码
setMeasuredDimensionRaw(measuredWidth, measuredHeight);
}
private void setMeasuredDimensionRaw(int measuredWidth, int measuredHeight) {
mMeasuredWidth = measuredWidth;
mMeasuredHeight = measuredHeight;
...
}
从实际效果和源码上可以将整个测量过程分析出来：SampleView 在布局文件中 layout_width 和 layout_height 分别为200dp，父容器 RelativeLayout 通过获取 SampleView 的 LayoutParams 对象从而获取了layout_width 和 layout_height ，然后根据实际情况构建对 SampleView 的 widthMeasureSpec 和 heightMeasureSpec ，跟着 RelativeLayout 调用 SampleView 的measure方法，传入widthMeasureSpec 和 heightMeasureSpec 作为参数，进而传给了onMeasure方法，完成整个测量。
- 布局
public void layout(int l, int t, int r, int b) {
if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {
onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
}
...
}
View类中布局方法为layout(int l, int t, int r, int b) ，l、t、r、b分别相当于相对于父容器上下左右的位置，如图所示。
如果以父容器为坐标系，那么（l，t）可以看作View的左上角位置，（r，b）可以看作右下角位置，只要这四个位置确定，View的位置也就确定了。由于这四个参数都是相对于父容器的，所以此方法由父容器调用，来指定子View相对于自己的位置。
- 绘制
public void draw(Canvas canvas) {
final int privateFlags = mPrivateFlags;
mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;
// Step 1, draw the background, if needed
int saveCount;
drawBackground(canvas);
// skip step 2 & 5 if possible (common case)
final int viewFlags = mViewFlags;
boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
if (!verticalEdges && !horizontalEdges) {
// Step 3, draw the content
onDraw(canvas);
// Step 4, draw the children
dispatchDraw(canvas);
drawAutofilledHighlight(canvas);
// Overlay is part of the content and draws beneath Foreground
if (mOverlay != null && !mOverlay.isEmpty()) {
mOverlay.getOverlayView().dispatchDraw(canvas);
}
// Step 6, draw decorations (foreground, scrollbars)
onDrawForeground(canvas);
// Step 7, draw the default focus highlight
drawDefaultFocusHighlight(canvas);
if (isShowingLayoutBounds()) {
debugDrawFocus(canvas);
}
// we're done...
return;
}
可以看到View的draw方法注释中将绘制过程已经写的非常清楚了，整个过程分成了7步，我们这里只考虑第三步onDraw方法，主要用于绘制View的内容。这个方法在View类中是空方法，需要自己实现，有兴趣可以看看现有控件源码中的onDrew方法，这个方法也是由父容器调用的，后面都会在ViewGroup的绘制流程中讲到。
3、ViewGroup的绘制流程
ViewGroup继承自View，那么ViewGroup 的绘制流程也遵循View的绘制流程，但是作为一个可以包含View的容器，它需要对子View的绘制流程负责。
- ViewGroup的测量
ViewGroup测量和View的测量过程一样，只是多了对子View的测量，在ViewGroup 的onMeasure方法中，遍历所有的子View，获取子View在布局中的参数LayoutParams的宽高，然后指定一个模式，将宽高和模式构建成子View的宽高限制，然后调用子View的measure方法。代码如下：
public class SampleGroupView extends ViewGroup {
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec,heightMeasureSpec);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {
final int size = mChildrenCount;
final View[] children = mChildren;
for (int i = 0; i < size; ++i) { //遍历所有的子View
final View child = children[i];
if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {
measureChild(child, widthMeasureSpec, heightMeasureSpec);
}
}
}
protected void measureChild(View child, int parentWidthMeasureSpec,
int parentHeightMeasureSpec) {
final LayoutParams lp = child.getLayoutParams();//获取布局参数
//创建对子View宽度的限制
final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
mPaddingLeft + mPaddingRight, lp.width);
//创建对子View高度的限制
final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
mPaddingTop + mPaddingBottom, lp.height);
//测量子View
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}
}
- ViewGroup的布局
ViewGroup的布局也遵循View的布局流程，只是它还要发起对子View的布局，如果一个View是ViewGroup，那它必须要实现onLayout方法去布局子View，和测量相似的流程，遍历-判断模式-计算相对自己的四个位置-调用子View的layout方法。以RelatieaveLayout的onLayout代码为例：
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// The layout has actually already been performed and the positions
// cached. Apply the cached values to the children.
final int count = getChildCount();//获取子View个数
for (int i = 0; i < count; i++) {//遍历所有子View
View child = getChildAt(i);
if (child.getVisibility() != GONE) {//当子View可见时才布局
//获取计算好的布局参数
RelatieaveLayout.LayoutParams st =
(RelativeLayout.LayoutParams) child.getLayoutParams();
//布局子View
child.layout(st.mLeft, st.mTop, st.mRight, st.mBottom);
}
}
}
- ViewGroup的绘制
ViewGroup的绘制过程和View的绘制过程有少许差别，如果ViewGroup没有背景，自己本身不会调用draw(Canvas canvas)方法来绘制自己，而是直接调用dispatchDraw(Canvas canvas)去绘制它的子View：
@Override
protected void dispatchDraw(Canvas canvas) {
...
//仅贴出关键代码
for (int i = 0; i < childrenCount; i++) {
while (transientIndex >= 0 && mTransientIndices.get(transientIndex) == i) {
...
final int childIndex = getAndVerifyPreorderedIndex(childrenCount, i, customOrder);
final View child = getAndVerifyPreorderedView(preorderedList, children, childIndex);
if ((child.mViewFlags & VISIBILITY_MASK) == VISIBLE || child.getAnimation() != null) {
more |= drawChild(canvas, child, drawingTime);
}
}
...
}
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
return child.draw(canvas, this, drawingTime);
}
这里的draw(canvas, this, drawingTime)带了三个参数，不是我们之前用的draw(Canvas canvas)一个参数方法。原因很简单，因为子View也有可能是ViewGroup，代码如下：
// Fast path for layouts with no backgrounds
if ((mPrivateFlags & PFLAG_SKIP_DRAW) == PFLAG_SKIP_DRAW) {
//如果绘制的子View本身是一个ViewGroup且没有背景，直接调用dispatchDraw去绘制它的子View
mPrivateFlags &= ~PFLAG_DIRTY_MASK;
dispatchDraw(canvas);
} else {
draw(canvas);
}
如果你在ViewGroup中调用了setWillNotDraw(false)方法，就会不满足跳过绘制的条件，直接调用draw(canvas)方法绘制ViewGroup，接着在draw方法中的第四步再来调用 dispatchDraw(canvas)。
本文主要介绍了View和ViewGroup的基本绘制流程，后面会简单的自定义几个常用的控件用于熟悉自定义的操作，再深入的解析绘制流程，然后再来几个复杂点的自定义，即 原理-实战-深入-实战。
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
