Carson带你学Android：深入解析自定义View工作流程

比眉伴天荒 2021-11-09 05:16 368阅读 0赞

![a26aedafc2ac45510787091b1d02f019.png][]

--------------------

# 前言 #

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

> 1.  本文秉着“结论先行、详细分析在后”的原则，即先让大家感性认识，再通过理性分析从而理解问题；
> 2.  所以，请各位读者先记住结论，再往下继续看分析；
> 3.  文章较长，阅读需要较长时间，建议收藏等充足时间再进行阅读

> Carson带你学Android自定义View文章系列：  
> [Carson带你学Android：自定义View基础][Carson_Android_View]  
> [Carson带你学Android：一文梳理自定义View工作流程][Carson_Android_View 1]  
> [Carson带你学Android：自定义View Measure过程][Carson_Android_View Measure]  
> [Carson带你学Android：自定义View Layout过程][Carson_Android_View Layout]  
> [Carson带你学Android：自定义View Draw过程][Carson_Android_View Draw]  
> [Carson带你学Android：手把手教你写一个完整的自定义View][Carson_Android_View 2]  
> [Carson带你学Android：Canvas类全面解析][Carson_Android_Canvas]  
> [Carson带你学Android：Path类全面解析][Carson_Android_Path]

--------------------

# 目录 #

![示意图][c7b8cce0c6dbe036bb8ba8968d75a765.png]

--------------------

# 1. 储备知识 #

### 1.1 ViewRoot ###

*  定义  
    连接器，对应于`ViewRootImpl`类
 *  作用
    
    1.  连接`WindowManager` 和 `DecorView`
    2.  完成`View`的三大流程： `measure`、`layout`、`draw`
 *  特别注意

// 在主线程中，Activity对象被创建后：
    // 1. 自动将DecorView添加到Window中 & 创建ViewRootImpll对象
    root = new ViewRootImpl(view.getContent(),display);
    
    // 3. 将ViewRootImpll对象与DecorView建立关联
    root.setView(view,wparams,panelParentView)

### 1.2 DecorView ###

*  定义：顶层`View`

> 即 `Android` 视图树的根节点；同时也是 `FrameLayout` 的子类

*  作用：显示 & 加载布局

> `View`层的事件都先经过`DecorView`，再传递到`View`

*  特别说明  
    内含1个竖直方向的`LinearLayout`，分为2部分：上 = 标题栏`（titlebar）`、下 = 内容栏`（content）`

![示意图][3adc208b5c311a870bf5059faed230a8.png]

> 在`Activity`中通过 `setContentView（）`所设置的布局文件其实是被加到内容栏之中的，成为其唯一子View = id为content的`FrameLayout`中

// 在代码中可通过content得到对应加载的布局
    
    // 1. 得到content
    ViewGroup content = (ViewGroup)findViewById(android.R.id.content);
    // 2. 得到设置的View
    ViewGroup rootView = (ViewGroup) content.getChildAt(0);

### 1.3 Window、Activity、DecorView 与 ViewRoot的关系 ###

*  简介

![示意图][c370ea90951d322cb19c8fc057d92f6f.png]

*  之间的关系  
    ![示意图][08eccbd4be86faf28c2d0d82a02f8426.png]
 *  更加详细 & 具体的介绍，请看文章：[Android自定义View基础：ViewRoot、DecorView & Window的简介][Android_View_ViewRoot_DecorView _ Window]

### 1.4 自定义View基础 ###

了解自定义View流程前，需了解一定的自定义View基础，具体请看文章：[Carson带你学Android：自定义View基础][Carson_Android_View]

--------------------

# 2. 绘制准备 #

*  回忆上图，可看出最后1步 = 绘制  
    ![示意图][08eccbd4be86faf28c2d0d82a02f8426.png]
 *  但在绘制前，系统会有一些绘制准备，即前面几个步骤：创建`PhoneWindow`类、`DecorView`类、`ViewRootmpl`类等

> 故，下面我会先将绘制前的准备，再开始讲绘制流程

*  **主要包括：`DecorView`创建 & 显示**，具体请看文章：[Android自定义View绘制前的准备：DecorView创建 & 显示][Android_View_ViewRoot_DecorView _ Window]

--------------------

# 3. 绘制流程概述 #

*  从上可知，`View`的绘制流程开始于：`ViewRootImpl`对象的`performTraversals()`
 *  源码分析

/**
      * 源码分析：ViewRootImpl.performTraversals()
      */
      private void performTraversals() {
    
      		// 1. 执行measure流程
            // 内部会调用performMeasure()
            measureHierarchy(host, lp, res,desiredWindowWidth, desiredWindowHeight);
    
            // 2. 执行layout流程
            performLayout(lp, mWidth, mHeight);
    
            // 3. 执行draw流程
            performDraw();
        }

*  从上面的`performTraversals()`可知：**`View`的绘制流程从顶级`View（DecorView）`的`ViewGroup`开始，一层一层从`ViewGroup`至子`View`遍历测绘**

> 即：自上而下遍历、由父视图到子视图、每一个 `ViewGroup` 负责测绘它所有的子视图，而最底层的 View 会负责测绘自身

![9944fa871f479ce72db89ec85c52992c.png][]

*  绘制的流程 = `measure`过程、`layout`过程、`draw`过程，具体如下

![示意图][cf48f9488d9f0e471782d03b82599f45.png]

![示意图][a614e22232d8afdc7e268123e7113e98.png]

下面，我将详细讲解`View`绘制的三大流程：`measure`过程、`layout`过程、`draw`过程

--------------------

# 4. 详细介绍 #

### 4.1 Measure 过程 ###

*  作用  
    测量`View`的宽 / 高

> 1.  在某些情况下，需要多次测量`（measure）`才能确定`View`最终的宽/高；
> 2.  该情况下，`measure`过程后得到的宽 / 高可能不准确；
> 3.  此处建议：在`layout`过程中`onLayout()`去获取最终的宽 / 高

*  具体流程

![示意图][73748a79c4d44261d845602b0b55cc90.png]

![示意图][d132e9cbf39de3aac4a03f32fe477cef.png]

*  详细讲解  
    请看文章：[Carson带你学Android：自定义View Measure过程][Carson_Android_View Measure]

### 4.2 Layout过程 ###

*  作用  
    计算视图`（View）`的位置

> 即计算`View`的四个顶点位置：`Left`、`Top`、`Right` 和 `Bottom`

*  具体流程  
    ![示意图][f49065409f360fad3beab754bce0c618.png]

![示意图][af56deb0a1d5db485e87e7203ef4abd9.png]

*  详细讲解

请看文章：[Carson带你学Android：自定义View Layout过程][Carson_Android_View Layout]

### 4.3 Draw过程 ###

*  作用  
    绘制`View`视图
 *  具体流程

![示意图][2eaae9073748266ff0a0cbaba4cf5589.png]

![示意图][4895cc1dd0e7c833d5bbdb8b57e589cf.png]

*  详细讲解  
    请看文章：[Carson带你学Android：自定义View Draw过程][Carson_Android_View Draw]

**至此，关于自定义`View`的工作流程讲解完毕。**

--------------------

# 5. 自定义View的步骤 #

### 步骤1：实现Measure、Layout、Draw流程 ###

*  从View的工作流程（`measure`过程、`layout`过程、`draw`过程）来看，若要实现自定义`View`，根据自定义View的种类不同（单一`View` / `ViewGroup`），需自定义实现不同的方法
 *  主要是：`onMeasure()`、`onLayout()`、`onDraw()`，具体如下

![示意图][e90004a609801d519611e2230c27ef6a.png]

### 步骤2：自定义属性 ###

1.  在values目录下创建自定义属性的xml文件
2.  在自定义View的构造方法中加载自定义XML文件 & 解析属性值
3.  在布局文件中使用自定义属性

--------------------

# 6. 实例讲解 #

结合原理 & 实现步骤，若需实现1个自定义View，请看文章：[Carson带你学Android：手把手教你写一个完整的自定义View][Carson_Android_View 2]

--------------------

# 7. 总结 #

*  本文全面总结自定义`View` 的原理。至此，关于自定义`View`的绘制流程您应该非常熟悉了
 *  Carson带你学Android自定义View文章系列：  
    [Carson带你学Android：自定义View基础][Carson_Android_View]  
    [Carson带你学Android：一文梳理自定义View工作流程][Carson_Android_View 1]  
    [Carson带你学Android：自定义View Measure过程][Carson_Android_View Measure]  
    [Carson带你学Android：自定义View Layout过程][Carson_Android_View Layout]  
    [Carson带你学Android：自定义View Draw过程][Carson_Android_View Draw]  
    [Carson带你学Android：手把手教你写一个完整的自定义View][Carson_Android_View 2]  
    [Carson带你学Android：Canvas类全面解析][Carson_Android_Canvas]  
    [Carson带你学Android：Path类全面解析][Carson_Android_Path]

--------------------

# 欢迎关注Carson\_Ho的[CSDN博客][CSDN] 与 公众号！ #

博客链接：https://carsonho.blog.csdn.net/  
![06b2ed0fbb8979f0aba34c14ede04b59.png][]

--------------------

# 请帮顶 / 评论点赞！因为你的鼓励是我写作的最大动力！ #

[a26aedafc2ac45510787091b1d02f019.png]: /images/20211109/7e577d2795b749dda0d4e76a485550cc.png
[Carson_Android_View]: http://blog.csdn.net/carson_ho/article/details/56009827
[Carson_Android_View 1]: https://carsonho.blog.csdn.net/article/details/98477394
[Carson_Android_View Measure]: http://blog.csdn.net/carson_ho/article/details/56011064
[Carson_Android_View Layout]: http://blog.csdn.net/carson_ho/article/details/56011112
[Carson_Android_View Draw]: http://blog.csdn.net/carson_ho/article/details/56011153
[Carson_Android_View 2]: https://carsonho.blog.csdn.net/article/details/62037696
[Carson_Android_Canvas]: https://carsonho.blog.csdn.net/article/details/60598775
[Carson_Android_Path]: https://carsonho.blog.csdn.net/article/details/60597923
[c7b8cce0c6dbe036bb8ba8968d75a765.png]: /images/20211109/ee2fdb8e2b264d1d8e77cd326cdce92a.png
[3adc208b5c311a870bf5059faed230a8.png]: /images/20211109/0741c42a2861484eb8424b1b73b2e4ee.png
[c370ea90951d322cb19c8fc057d92f6f.png]: /images/20211109/b6bf770b57ed4dd184bdd6ea0c780c62.png
[08eccbd4be86faf28c2d0d82a02f8426.png]: /images/20211109/2798985b16fb4509a6ce9299cf05df07.png
[Android_View_ViewRoot_DecorView _ Window]: https://carsonho.blog.csdn.net/article/details/91359867
[9944fa871f479ce72db89ec85c52992c.png]: /images/20211109/907b9f828eea42bbbb571ee2407f60ae.png
[cf48f9488d9f0e471782d03b82599f45.png]: /images/20211109/b6f2215fb0b94a1f8a9e39bacaede154.png
[a614e22232d8afdc7e268123e7113e98.png]: /images/20211109/ca10e1aa2d9e4028a40283e43e4539b9.png
[73748a79c4d44261d845602b0b55cc90.png]: /images/20211109/4d394d463cf64dd8927f58c11aa83299.png
[d132e9cbf39de3aac4a03f32fe477cef.png]: /images/20211109/2c149b37b72242ee8b69f41bb7b88aff.png
[f49065409f360fad3beab754bce0c618.png]: /images/20211109/50e8f0111f1e4d90910c8d7d05f7525c.png
[af56deb0a1d5db485e87e7203ef4abd9.png]: /images/20211109/8a49a7ef41ee4089807a82212f45035c.png
[2eaae9073748266ff0a0cbaba4cf5589.png]: /images/20211109/d77316a87be44613a841de2fa7a1084b.png
[4895cc1dd0e7c833d5bbdb8b57e589cf.png]: /images/20211109/5d733fdbf8eb4128bd4430f34f1df46b.png
[e90004a609801d519611e2230c27ef6a.png]: /images/20211109/69205d8bc2a6404eb21b3a54f23af736.png
[CSDN]: https://carsonho.blog.csdn.net/
[06b2ed0fbb8979f0aba34c14ede04b59.png]: /images/20211109/42d324852f2f447d8d8f4a54ade9ff12.png