Carson带你学Android:自定义View 绘制过程(Draw)


前言

  • 自定义ViewAndroid开发者必须了解的基础
  • 网上有大量关于自定义View原理的文章,但存在一些问题:内容不全、思路不清晰、无源码分析、简单问题复杂化 等
  • 今天,我将全面总结自定义View原理中的Draw过程,我能保证这是市面上的最全面、最清晰、最易懂的

Carson带你学Android自定义View文章系列:
Carson带你学Android:自定义View基础
Carson带你学Android:一文梳理自定义View工作流程
Carson带你学Android:自定义View绘制准备-DecorView创建
Carson带你学Android:自定义View Measure过程
Carson带你学Android:自定义View Layout过程
Carson带你学Android:自定义View Draw过程
Carson带你学Android:手把手教你写一个完整的自定义View
Carson带你学Android:Canvas类全面解析
Carson带你学Android:Path类全面解析


目录

示意图

1. 作用

绘制View视图


2. 储备知识

具体请看文章:自定义View基础 - 最易懂的自定义View原理系列


3. draw过程详解

类似measure过程、layout过程,draw过程根据View的类型分为2种情况:

示意图

接下来,我将详细分析这2种情况下的draw过程

3.1 单一View的draw过程

  • 应用场景
    在无现成的控件View满足需求、需自己实现时,则使用自定义单一View
  1. 如:制作一个支持加载网络图片的ImageView控件
  2. 注:自定义View在多数情况下都有替代方案:图片 / 组合动画,但二者可能会导致内存耗费过大,从而引起内存溢出等问题。
  • 具体使用
    继承自ViewSurfaceView 或 其他View;不包含子View

  • 原理(步骤)

    1. View绘制自身(含背景、内容);
    2. 绘制装饰(滚动指示器、滚动条、和前景)
  • 具体流程

下面我将一个个方法进行详细分析:draw过程的入口 = draw()

/**
  * 源码分析:draw()
  * 作用:根据给定的 Canvas 自动渲染View包括其所有子 View)。
  * 绘制过程:
  *   1. 绘制view背景
  *   2. 绘制view内容
  *   3. 绘制子View
  *   4. 绘制装饰(渐变框,滑动条等等)
  * 注:
  *    a. 在调用该方法之前必须要完成 layout 过程
  *    b. 所有的视图最终都是调用 View 的 draw()绘制视图( ViewGroup 没有复写此方法)
  *    c. 在自定义View时,不应该复写该方法,而是复写 onDraw(Canvas) 方法进行绘制
  *    d. 若自定义的视图确实要复写该方法,那么需先调用 super.draw(canvas)完成系统的绘制,然后再进行自定义的绘制
  */ 
  public void draw(Canvas canvas) {

    ...// 仅贴出关键代码
  
    int saveCount;

    // 步骤1: 绘制本身View背景
      if (!dirtyOpaque) {
          drawBackground(canvas); 
          // ->分析1
      }

      // 若有必要,则保存图层(还有一个复原图层)
      // 优化技巧:当不需绘制 Layer 时,“保存图层“和“复原图层“这两步会跳过
      // 因此在绘制时,节省 layer 可以提高绘制效率
      final int viewFlags = mViewFlags;
      if (!verticalEdges && !horizontalEdges) {

    // 步骤2:绘制本身View内容
      if (!dirtyOpaque) 
          onDraw(canvas);
      // 单一View中:默认为空实现,需复写
      // ViewGroup中:需复写
      // ->分析2

    // 步骤3:绘制子View
      // 由于单一View无子View,故View中:默认为空实现
      // ViewGroup中:系统已经复写好对其子视图进行绘制我们不需要复写
          dispatchDraw(canvas);
      // ->分析3

    // 步骤4:绘制装饰,如滑动条、前景色等等
      onDrawScrollBars(canvas);
      // ->分析4

    return;
  }
    ...    
}


/**
  * 分析1:drawBackground(canvas)
  * 作用:绘制View本身的背景
  */ 
  private void drawBackground(Canvas canvas) {
        // 获取背景 drawable
        final Drawable background = mBackground;
        if (background == null) {
            return;
        }
        // 根据在 layout 过程中获取的 View 的位置参数,来设置背景的边界
        setBackgroundBounds();

        ...

        // 获取 mScrollX 和 mScrollY值 
        final int scrollX = mScrollX;
        final int scrollY = mScrollY;
        if ((scrollX | scrollY) == 0) {
            background.draw(canvas);
        } else {
            // 若 mScrollX 和 mScrollY 有值,则对 canvas 的坐标进行偏移
            canvas.translate(scrollX, scrollY);


            // 调用 Drawable 的 draw 方法绘制背景
            background.draw(canvas);
            canvas.translate(-scrollX, -scrollY);
        }
   } 

/**
  * 分析2:onDraw(canvas)
  * 作用:绘制View本身的内容
  * 注:
  *   a. 由于 View 的内容各不相同,所以该方法是一个空实现
  *   b. 在自定义绘制过程中,需由子类去实现复写该方法,从而绘制自身的内容
  *   c. 谨记:自定义View中 必须且只需复写onDraw()
  */
  protected void onDraw(Canvas canvas) {
      
        ... // 复写从而实现绘制逻辑

  }

/**
  * 分析3: dispatchDraw(canvas)
  * 作用:绘制子View
  * 注:由于单一View中无子View,故为空实现
  */
  protected void dispatchDraw(Canvas canvas) {

        ... // 空实现

  }

/**
  * 分析4: onDrawScrollBars(canvas)
  * 作用:绘制装饰,如滚动指示器、滚动条、和前景等
  */
  public void onDrawForeground(Canvas canvas) {
        onDrawScrollIndicators(canvas);
        onDrawScrollBars(canvas);

        final Drawable foreground = mForegroundInfo != null ? mForegroundInfo.mDrawable : null;
        if (foreground != null) {
            if (mForegroundInfo.mBoundsChanged) {
                mForegroundInfo.mBoundsChanged = false;
                final Rect selfBounds = mForegroundInfo.mSelfBounds;
                final Rect overlayBounds = mForegroundInfo.mOverlayBounds;

                if (mForegroundInfo.mInsidePadding) {
                    selfBounds.set(0, 0, getWidth(), getHeight());
                } else {
                    selfBounds.set(getPaddingLeft(), getPaddingTop(),
                            getWidth() - getPaddingRight(), getHeight() - getPaddingBottom());
                }

                final int ld = getLayoutDirection();
                Gravity.apply(mForegroundInfo.mGravity, foreground.getIntrinsicWidth(),
                        foreground.getIntrinsicHeight(), selfBounds, overlayBounds, ld);
                foreground.setBounds(overlayBounds);
            }

            foreground.draw(canvas);
        }
    }

至此,单一Viewdraw过程已分析完毕。

总结

单一View的draw过程解析如下:

即 只需绘制View自身

3.2 ViewGroup的draw过程

  • 应用场景
    利用现有的组件根据特定的布局方式来组成新的组件

  • 具体使用
    继承自ViewGroup 或 各种Layout;含有子 View

如:底部导航条中的条目,一般都是上图标(ImageView)、下文字(TextView),那么这两个就可以用自定义ViewGroup组合成为一个Veiw,提供两个属性分别用来设置文字和图片,使用起来会更加方便。

Paste_Image.png
  • 原理(步骤)

    1. ViewGroup绘制自身(含背景、内容);
      2.ViewGroup遍历子View & 绘制其所有子View;

    类似于单一Viewdraw过程

    1. ViewGroup绘制装饰(滚动指示器、滚动条、和前景)

自上而下、一层层地传递下去,直到完成整个View树的draw过程

原理
  • 具体流程

下面我将对每个步骤和方法进行详细分析:draw过程的入口 = draw()

/**
  * 源码分析:draw()
  * 与单一View的draw()流程类似
  * 作用:根据给定的 Canvas 自动渲染 View(包括其所有子 View)
  * 绘制过程:
  *   1. 绘制view背景
  *   2. 绘制view内容
  *   3. 绘制子View
  *   4. 绘制装饰(渐变框,滑动条等等)
  * 注:
  *    a. 在调用该方法之前必须要完成 layout 过程
  *    b. 所有的视图最终都是调用 View 的 draw ()绘制视图( ViewGroup 没有复写此方法)
  *    c. 在自定义View时,不应该复写该方法,而是复写 onDraw(Canvas) 方法进行绘制
  *    d. 若自定义的视图确实要复写该方法,那么需先调用 super.draw(canvas)完成系统的绘制,然后再进行自定义的绘制
  */ 
  public void draw(Canvas canvas) {

    ...// 仅贴出关键代码
  
    int saveCount;

    // 步骤1: 绘制本身View背景
        if (!dirtyOpaque) {
            drawBackground(canvas);
        }

    // 若有必要,则保存图层(还有一个复原图层)
    // 优化技巧:当不需绘制 Layer 时,“保存图层“和“复原图层“这两步会跳过
    // 因此在绘制时,节省 layer 可以提高绘制效率
    final int viewFlags = mViewFlags;
    if (!verticalEdges && !horizontalEdges) {

    // 步骤2:绘制本身View内容
        if (!dirtyOpaque) 
            onDraw(canvas);
        // View 中:默认为空实现,需复写
        // ViewGroup中:需复写

    // 步骤3:绘制子View
    // ViewGroup中:系统已复写好对其子视图进行绘制,不需复写
        dispatchDraw(canvas);
        
    // 步骤4:绘制装饰,如滑动条、前景色等等
        onDrawScrollBars(canvas);

        return;
    }
    ...    
}

由于 步骤2:drawBackground()、步骤3:onDraw()、步骤5:onDrawForeground(),与单一View的draw过程类似,此处不作过多描述

  • 下面直接进入与单一View draw过程最大不同的步骤4:dispatchDraw()
/**
  * 源码分析:dispatchDraw()
  * 作用:遍历子View & 绘制子View
  * 注:
  *   a. ViewGroup中:由于系统为我们实现了该方法,故不需重写该方法
  *   b. View中默认为空实现(因为没有子View可以去绘制)
  */ 
    protected void dispatchDraw(Canvas canvas) {
        ......

         // 1. 遍历子View
        final int childrenCount = mChildrenCount;
        ......

        for (int i = 0; i < childrenCount; i++) {
                ......
                if ((transientChild.mViewFlags & VISIBILITY_MASK) == VISIBLE ||
                        transientChild.getAnimation() != null) {
                  // 2. 绘制子View视图 ->>分析1
                    more |= drawChild(canvas, transientChild, drawingTime);
                }
                ....
        }
    }

/**
  * 分析1:drawChild()
  * 作用:绘制子View
  */
    protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
        // 最终还是调用了子 View 的 draw ()进行子View的绘制
        return child.draw(canvas, this, drawingTime);
    }

至此,ViewGroupdraw过程已分析完毕。

总结

ViewGroupdraw过程如下:


4. 其他细节问题:View.setWillNotDraw()

/**
  * 源码分析:setWillNotDraw()
  * 定义:View 中的特殊方法
  * 作用:设置 WILL_NOT_DRAW 标记位;
  * 注:
  *   a. 该标记位的作用是:当一个View不需要绘制内容时,系统进行相应优化
  *   b. 默认情况下:View 不启用该标记位(设置为false);ViewGroup 默认启用(设置为true)
  */ 

public void setWillNotDraw(boolean willNotDraw) {

    setFlags(willNotDraw ? WILL_NOT_DRAW : 0, DRAW_MASK);

}

// 应用场景
// a. setWillNotDraw参数设置为true:当自定义View继承自 ViewGroup 、且本身并不具备任何绘制时,设置为 true 后,系统会进行相应的优化。
// b. setWillNotDraw参数设置为false:当自定义View继承自 ViewGroup 、且需要绘制内容时,那么设置为 false,来关闭 WILL_NOT_DRAW 这个标记位。


5. 总结

  • 本文全面总结了自定义ViewDraw过程,总结如下
View类型 绘制流程(Draw)
单一View 仅绘制视图View本身。
视图组ViewGroup 绘制视图本身和包含的所有子View。

欢迎关注Carson_Ho的简书

不定期分享关于安卓开发的干货,追求短、平、快,但却不缺深度


请点赞!因为你的鼓励是我写作的最大动力!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容