博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
探究Android View 绘制流程,Canvas 的由来
阅读量:7261 次
发布时间:2019-06-29

本文共 6629 字,大约阅读时间需要 22 分钟。

基于 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 或者参考

自定义一个简单的 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) 是谁调用的?

这时候很多人就

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

追踪 onDraw() 调用栈

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

AndroidStudio Find Usages

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

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

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

祭出万能的 debug

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

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

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

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

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

分析 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 或者查看

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() ,表示我们收到了一个绘制页面的消息。其中 是 Android4.1 以后增加的统一调度界面绘制机制。

此外我们发现方法调用栈进入了 ViewRootImpl 对象之中。这时候我们需要了解 ViewRootImpl 。如果不了解 ViewRootImpl 的可以先移步到,了解一下 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 对象的赋值代码了。

赶快看看 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}@CriticalNativeprivate static native long nCreateDisplayListCanvas(long node, int width, int height);@CriticalNativeprivate static native void nResetDisplayListCanvas(long canvas, long node,        int width, int height);复制代码

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

第四部分

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

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

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

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

结尾说几句

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

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

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

参考

转载地址:http://spkdm.baihongyu.com/

你可能感兴趣的文章
springboot发送邮件
查看>>
react之bind函数到组件通识篇
查看>>
优化出现的小问题
查看>>
「从源码中学习」面试官都不知道的Vue题目答案
查看>>
学习 git clone 几种不同的协议
查看>>
深入理解volatile
查看>>
前端DevOps之PageSpeed Insights
查看>>
[译] CSS 变量实现炫酷鼠标悬浮效果
查看>>
数据结构-js实现栈和队列
查看>>
面试题
查看>>
【网上的都不靠谱?还是得改源码】用Javasisst的字节码插桩技术,彻底解决Gson转Map时,Int变成double问题...
查看>>
el-autocomplete 使用相关问题
查看>>
惊了!7 行代码优雅地实现 Excel 文件生成&下载功能
查看>>
【译】一份通俗易懂的React.js基础指南-2018
查看>>
Failed to install VS Code update.
查看>>
最简单的composer 包 使用
查看>>
JS版数据结构第三篇(链表)
查看>>
Android新闻类导航栏
查看>>
通过COS上传文件至腾讯云
查看>>
安卓开发必备知识体系:安卓篇
查看>>