专栏首页王小二的Android站[030]王小二图解Android-UI绘制篇【文字版】

[030]王小二图解Android-UI绘制篇【文字版】

前言

本文只是视频王小二图解Android【007】UI绘制篇的提纲和整理,建议配合视频学习

提纲

1.基础知识学习

1.1 Render APIs 例如OpenGL ES,本身只是协议规范,不是软件源码库,OpenGL ES本身也有CPU(软件)和GPU(硬件)版本实现。
1.2 NativeWindow,操作系统实现,Android中有Framebuffer和Surface。
   1.2.1 Framebuffer对应的就是屏幕
   1.2.2 Surface对应的就是Window,一个Activity 一个Dialog 一个Toast 其实都是对应一个Window
1.3 EGL,OpenGL ES和NativeWindow之间的桥梁
1.4 保证了OpenGL ES的平台独立性,相同的OpenGL代码运行在不同的平台,有相同的UI效果。
1.5 Skia,也是Render APIs,也有也有CPU(软件)和GPU(硬件)版本,但是GPU(硬件)版本是基于OpenGL ES。
1.6 SGL,Skia CPU(软件)版本和环境
1.7 Canvas,谷歌定义的一套更加简单易用的2D APIs,是由Skia实现的。

2.开机动画

2.1 申请Surface
2.2 创建EGL环境
2.3 定时的将图片通过OpenGL的渲染到Surface
2.4 没有Vsync信号

3.Activity

3.1 申请Surface(本地窗口)
3.2 创建View的树状结构
3.3 锁定Surface,获得Canvas的环境。
3.4 将Canvas环境递归给View。
3.5 开启硬件加速
  3.5.1 Canvas中Skia变成了硬件版本实现
  3.5.2 简单的树状结构变成DisplayList
3.6 invalidate中Damage(Dirty Rect)的理解
3.7 Vsync信号监听类Choreographer

4.SurfaceFlinger

    4.1 初始化Vsync信号,FrameBuffer(本地窗口)
    4.2 管理所有应用申请的Surface
    4.3 初始化OpenGL的环境
    4.4 按照Vsync信号,将可见的Surface用OpenGL绘制到FrameBuffer
    4.5 HWC,提升合成的速度

5.Flutter的实现原理猜测

5.1 新的跨平台编程语言Dart
5.2 新的Flutter UI框架
5.3 Flutter如何实现跨平台的背后 
  5.3.1 获得一个本地窗口,所有平台都有。
  5.3.2 UI框架设计了一堆控件,利用Skia的接口,直接绘制到本地窗口,Skia是跨平台
  5.3.3 对于开发人员只需要用跨平台的Dart语言,调用标准的Flutter控件。

总结

在研究Android UI绘制体系的时候,要不断的问自己,看的代码段在整个UI绘制体系中处于哪一层,哪一个进程,哪一个线程,希望我的视频有助于你们彻底掌握Android UI绘制体系。当然我讲个更多是概念,很多细节需要你们自己看源码。

彩蛋

下期预告,既然有UI的显示,也就是UI的Output,就必须讲UI的Input,也就是UI如何响应Touch,Key事件,《王小二图解Android-UI事件篇》敬请期待。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [061]perfetto使用简介

    之前我基本上都是用systrace分析Android性能问题,但是最近发现常常发生trace无法抓完整的问题,我开始使用新的perfetto工具,写一个文章记录...

    王小二
  • [038]Binder传输fd细节

    最近在研究Linux IO相关的知识,突然想起来Binder机制可以传递fd,但是没有仔细考虑过下面这个问题。

    王小二
  • [005]frameworks/ml引发的思考

    Android P上介绍了那么多有关AI的功能,但是真正看起来,Android上AI还处于初级阶段,Android 8.0之后的源码中有一个新增目录:frame...

    王小二
  • 那些出乎意料的类型转换

    JavaScript是一门弱类型的语言,因此类型之间的转换会更频繁也更灵活。本文讨论了一些你倍感意外的类型转换,以及其他类型相关的话题。

    IMWeb前端团队
  • 那些出乎意料的类型转换

    本文作者:IMWeb helinjiang 原文出处:IMWeb社区 未经同意,禁止转载 JavaScript是一门弱类型的语言,因此类型之间的转换会...

    IMWeb前端团队
  • dom啦2

    用户7873631
  • 第50次文章:JQuery基础

    tips:window.onload 和 $(function)异同:两者的功能相同,都是等到页面加载结束之后,再执行内部的代码。但是有一定的区别,主要是win...

    鹏-程-万-里
  • JavaScript正则表达式

    正则表达式是一个拆分字符串并查询相关信息的过程。 正则表达式通常被称为一个模式(pattern),是一个用简单方式描述或者匹配一系列符合某个语法规则的字符串...

    奋飛
  • 第203天:js---Array对象常用方法

    半指温柔乐
  • 总结一些前端的知识点 (一)

    一、W3C 标准盒模型和 IE 盒模型区别: 1. W3C 标准盒模型: ? 盒子的高宽是由盒子的内容区仅由 width, height 决定的,不包含边框,内...

    用户1667431

扫码关注云+社区

领取腾讯云代金券