探究Android View 绘制流程,Canvas 的由来。

基于 Android API 26 Platform 源码

写作背景

Google 搜索关键字 『android view 绘制』能得到很多资料。通常从以下几个方面讲解:

1. Measure -> layout -> draw 过程解析。
2. Paint 、Canvas 、Drawable 、Bitmap 的使用。
3. View/ViewGroup 的绘制顺序。
4. View 的测量过程。
5. 自定义 View 要重载

大部分文章写的都非常棒,讲的很详细。

但是始终有一个问题一直困扰着我: View如何绘制到屏幕上!!!

所以本文重点只讲 View 如何绘制到屏幕上的,其他 View 绘制流程大家自行 Google 或者参考Android视图绘制流程完全解析,带你一步步深入了解View(二)

自定义一个简单的 View

本应该从 View 的源代码入手,但是发现 View.java 文件的源码大概有 26488 行。这么长的代码,直接啃下去不知道要耗费多少头发。只好另辟蹊径。

先看一段代码

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        final Paint mPaint = new Paint();
        mPaint.setColor(0xffff0000);
        mPaint.setStrokeWidth(10);
        setContentView(new View(this) {
            @Override
            protected void onDraw(Canvas canvas) {
                canvas.drawLine(0, 0, getWidth(), getHeight(), mPaint);

            }
        });
    }
}

代码比较简单,我们从屏幕左上方到右下方画了一条红色的直线。

1. 把绘制的代码放在 onDraw() 方法中
2. 创建一个 Paint(画笔) ,设置颜色画笔宽度。
3. 调用 canvas.drawLine(0, 0, getWidth(), getHeight(), mPaint)
   前四个参数两两组合,代表直线的起点坐标和终点坐标。

上面的解释看起来 特别的自然,但是!好像 哪里不对????

Canvas 从哪里来???

看下 View 源码,我们会回答:从父类的 draw(Canvas canvas) 方法来啊!

但是!父类的 draw(Canvas canvas) 是谁调用的?

这时候很多人就

confuse.jpg

好了,我们正式进入下个环节。

追踪 onDraw() 调用栈

为了获得 onDraw() 方法的调用情况,我们进行第一次尝试。

AndroidStudio Find Usages

AndroidStudio 的Find Usages 功能非常强大可以迅速帮我们查找到调用 onDraw() 的地方。

但是!我们得到了 77 个结果。

view_1.png

77 个虽然不是特别多,但是也是一个不小的工作量。所以: 此路不通

祭出万能的 debug

静态分析的路已经被堵死了,这时候感觉只有单步调试能迅速帮我们从 77 个结果中找到最重要的。

为了单步调试,我们需要做以下准备

1. 下载 Android 源码。如果没有下载,当你点击查看 View 源码的时候 AndroidStudio 的右上角会有提示,点击下载即可。
2. 准备虚拟机。并且虚拟机的 Android 版本和项目的 compileSdkVersion 一致。
3. 在我们自定义 View 的 onDraw() 方法中打一个断点
4. 选择 『Debug app』

下图就是断点信息,右侧为断点处的方法调用栈。由于屏幕有限,堆栈的信息没有完全截出。

view_2.png

通过点击右侧的方法我们可以追踪对应的源码。由于方法栈过长,我们选择从栈低开始分段梳理。

分析 onDraw() 调用栈

第一部分
  at android.os.Looper.loop(Looper.java:164)
  at android.app.ActivityThread.main(ActivityThread.java:6541)
  at java.lang.reflect.Method.invoke(Method.java:-1)
  at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:240)
  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:767)

Zygote 进程是所以Android进程的父进程,用来孵化Android进程。想要了解更多的可以自行 Google 或者查看Zygote 进程启动时做了哪些事?

ActivityThread 便是我们的 Android 进程了,其中 ActivityThread main() 方法便是我们整个Android应用程序入口之处。main() 方法会调用 Looper.loop() 方法阻塞线程,从而开启整个 Android 应用(如果不阻塞,main() 方法结束整个进程也就结束)。这个线程也就是 Android 中著名的 UI 线程,这里的 Looper 便是 MainLooper 。

综上,从这部分代码只是 Android 进程启动过程。但是和 View 绘制关系不大。

第二部分
  at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1386)
  at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6733)
  at android.view.Choreographer$CallbackRecord.run(Choreographer.java:911)
  at android.view.Choreographer.doCallbacks(Choreographer.java:723)
  at android.view.Choreographer.doFrame(Choreographer.java:658)
  at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
  at android.os.Handler.handleCallback(Handler.java:789)
  at android.os.Handler.dispatchMessage(Handler.java:98)

handler 收到并处理了一个消息 FrameDisplayEventReceiver.run() ,表示我们收到了一个绘制页面的消息。其中 Choreographer 是 Android4.1 以后增加的统一调度界面绘制机制。

此外我们发现方法调用栈进入了 ViewRootImpl 对象之中。这时候我们需要了解 ViewRootImpl 。如果不了解 ViewRootImpl 的可以先移步到Android Window 机制探索,了解一下 View 、ViewRootImpl、window 之间的关系。或者看下面两条简单的总结

1. Android 中所有视图,都是在 window 上面绘制的。
2. 每个应用窗口创建的时候,都会创建一个对应的 ViewRootImpl 对象。
3. ViewRootImpl 是一个根节点,负责 View 和 WindowManagerSerive 之间的通信。

总结第二部分:接收到了一个页面绘制消息,调用 ViewRootImpl.doTraversal() 方法。

第三部分(重点)
  at android.view.View.updateDisplayListIfDirty(View.java:18073)
  at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:643)
  at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:649)
  at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:757)
  at android.view.ViewRootImpl.draw(ViewRootImpl.java:2980)
  at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2794)
  at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2347)

这里又出现了一个新的对象 ThreadedRenderer ,从名字是我们可以猜测和渲染页面有关。
通过 ThreadedRenderer 一系列调用

draw()  -> updateRootDisplayList()  -> updateViewTreeDisplayList() 

会调用到 View.updateDisplayListIfDirty()

public RenderNode updateDisplayListIfDirty() {
    final RenderNode renderNode = mRenderNode;
    ……
    if ((mPrivateFlags & PFLAG_DRAWING_CACHE_VALID) == 0
            || !renderNode.isValid()
            || (mRecreateDisplayList)) {
        ……
        int width = mRight - mLeft;
        int height = mBottom - mTop;
        int layerType = getLayerType();

        final DisplayListCanvas canvas = renderNode.start(width, height);
        canvas.setHighContrastText(mAttachInfo.mHighContrastText);

        try {
            ……
        } finally {
            renderNode.end(canvas);
            setDisplayListProperties(renderNode);
        }
    } else {
        mPrivateFlags |= PFLAG_DRAWN | PFLAG_DRAWING_CACHE_VALID;
        mPrivateFlags &= ~PFLAG_DIRTY_MASK;
    }
    return renderNode;
}

这里注意

final DisplayListCanvas canvas = renderNode.start(width, height);

天啊撸!!!我们终于看到 canvas 对象的赋值代码了。


a_ha.jpg

赶快看看 renderNode.start(width, height)

public DisplayListCanvas start(int width, int height) {
    return DisplayListCanvas.obtain(this, width, height);
}

发现调用了 obtain() 方法

static DisplayListCanvas obtain(@NonNull RenderNode node, int width, int height) {
    if (node == null) throw new IllegalArgumentException("node cannot be null");
    DisplayListCanvas canvas = sPool.acquire();
    if (canvas == null) {
        canvas = new DisplayListCanvas(node, width, height);
    } else {
        nResetDisplayListCanvas(canvas.mNativeCanvasWrapper, node.mNativeRenderNode,
                width, height);
    }
    canvas.mNode = node;
    canvas.mWidth = width;
    canvas.mHeight = height;
    return canvas;
}

然后我们发现进入了 JNI 领域。

private DisplayListCanvas(@NonNull RenderNode node, int width, int height) {
    super(nCreateDisplayListCanvas(node.mNativeRenderNode, width, height));
    mDensity = 0; // disable bitmap density scaling
}

@CriticalNative
private static native long nCreateDisplayListCanvas(long node, int width, int height);
@CriticalNative
private static native void nResetDisplayListCanvas(long canvas, long node,
        int width, int height);

遇到了 JNi 我们的追踪也就到此为止了o(╯□╰)o,但是我们已经知道 Canvas 是从哪里创建的了。至于底层东西,有能力的时候再追踪下去。

第四部分

经过前面三部分的分析,第四部分就比较简单了。很容易发现其实就是一个循环调用。刚好对应了 View 绘制规则中的:先绘制父 View 然后再绘制子 View。

view_3.png

这里还有一个疑问: 为什么嵌套了 6 层才到我们自顶一个的 View ?

这里我们可以使用 AndroidStudio -> Tools -> Android -> Layout Inspector
刚好发现是 6 层嵌套

需要注意的是:Activity 的 ContentView 我们只放了一个简单的 View 就已经有 6 层嵌套了

view_4.png

结尾说几句

这里只是介绍了 Android View 绘制过程中,Canvas 的赋值过程。通过 Canvas 的 Api 调用我们便可以在屏幕上绘制出各种各样的页面。

但是,这只是 Android 绘制流程中的一小步。如果不想追究 Canvas 的来源,这一步甚至可以忽略。

剩下的内容,大家可以自己去阅读源码,或者阅读其他人的博客。如有疑问,欢迎留言。

参考

Android视图绘制流程完全解析,带你一步步深入了解View(二)

Zygote 进程启动时做了哪些事?

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

推荐阅读更多精彩内容