View绘制流程分析

View绘制流程分析

目录介绍

  • 01.addView的流程分析
    • 1.1 wm.addView()流程
  • 02.requestLayout绘制
    • 2.1 源码流程分析
    • 2.2 View绘制流程简析
  • 03.performMeasure测量
    • 3.1 performMeasure源码
    • 3.2 measure设计思路
    • 3.3 measure测量流程
  • 04.performLayout布局
    • 4.1 performLayout源码
    • 4.2 layout设计思路
    • 4.3 layout布局流程
  • 05.performDraw绘制
    • 5.1 performDraw源码
    • 5.2 draw设计思路
    • 5.3 draw绘制流程
  • 06.View绘制流程总结下
    • 6.1 Activity布局绘制
  • 07.View如何显示在屏幕

00.问题答疑思考

  • requestLayout、invalidate与postInvalidate作用与区别，在requestLayout这个方法里面做了什么？

  • requestLayout，onLayout，onDraw，DrawChild区别与联系？drawChild()是做什么用的？

  • View是如何绘制到屏幕上的？View的刷新机制是什么，有哪些重要的方法？

  • Canvas.save()跟Canvas.restore()的调用时机？Canvas的底层机制，绘制框架，硬件加速是什么原理，canvas lock的缓冲区是怎么回事

  • View绘制流程，当一个TextView的实例调用setText()方法后执行了什么？请说一下原理……

  • 测量：如何理解View中的测量？子控件的测量依赖父布局约束吗？如何理解测量过程中的"递"和"归"的设计思想？

  • 测量：如何理解测量中布局MeasureSpec的设计？mode三种布局模式分别如何理解？mode和size的组成如何理解？

  • 测量：单个控件测量流程是怎么样的？测量策略是如何影响测量结果的？如何标记测量完成？谈一下设计思想？

  • 测量：完整的View树测量流程的设计思路是什么样的？遍历测量孩子的大小如何处理margin和padding逻辑？

  • 布局：getWidth()方法和getMeasureWidth()区别呢？布局的设计思路是什么？

  • 布局：单个View的布局流程是怎么样的？如何理解布局中相对位置和绝对位置？什么情况下需要对控件重新布局？

  • 布局：以LinearLayout为例，完整布局流程是怎么样的。如果其中的一个孩子View修改了top高度，其布局流程会发生什么变化？

01.addView的流程分析

1.1 wm.addView()流程

  • 通过WindowManager添加View分析

    wm.addView()，根据WindowManagerImpl --> WindowManager --> ViewManager，最终可知vm是WindowManagerImpl的实例，具体看WindowManagerImpl的addView方法
    WindowManagerImpl#addView()，在这个类中可以看到调用了mGlobal.addView()，而mGlobal是WindowManagerGlobal的对象。
    WindowManagerGlobal#addView()，这里面逻辑很核心，创建ViewRootImpl对象，这个是布局渲染的核心类
    WindowManagerGlobal#addView#root.setView()，实现了root与ViewRootImpl的关联
    ViewRootImpl#setView()#requestLayout()，在ViewRootImpl的setView方法中，调用requestLayout执行重绘的请求

  • 从这里可以知道几个核心的关键点
    • 在global#addView()的源码中，创建ViewRootImpl对象root，然后将root和view绑定起来

02.requestLayout绘制

2.1 源码流程分析

  • requestLayout是执行View绘制入口

    ViewRootImpl#requestLayout#checkThread()，这个方法是检查当前线程的方法，若当前线程非UI线程，则抛出非UI线程更新UI的错误
    ViewRootImpl#scheduleTraversals()，这里主要是入口
    ViewRootImpl#scheduleTraversals()#mChoreographer.postCallback(mTraversalRunnable)，调用一个异步消息，用于执行mTraversalRunnable的run方法
    ViewRootImpl#TraversalRunnable#run()，在TraversalRunnable类的run方法中调用了doTraversal方法
    ViewRootImpl#doTraversal()，这里主要是看performTraversals方法
    ViewRootImpl#performTraversals()，整个View的绘制起始方法，从这个方法开始我们的View经过大小测量，位置测量，界面绘制三个逻辑操作

  • ViewRootImpl#performTraversals方法中核心代码如下所示
    private void performTraversals() {
    performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);
    performLayout(lp, mWidth, mHeight);
    performDraw();
}
    • image

2.2 View绘制流程简析

  • 接下来看一下View的测量，位置，绘制三个流程
    • image

    ViewRootImpl#performTraversals()#performMeasure，执行View组件的onMeasure方法，主要用于测量View
    ViewRootImpl#performMeasure()，开始执行测量的入口
    View#measure()，这个时候开始调用View类中的测量
    ViewRootImpl#performTraversals()#performLayout，执行View组件的onLayout方法，主要用于布局View
    ViewRootImpl#performLayout()，开始执行布局的入口
    View#layout()，这个时候调用调用View类中的布局
    ViewRootImpl#performTraversals()#performDraw，执行View组件的onDraw方法，主要用于绘制View
    ViewRootImpl#performDraw()，开始执行绘制的入口

  • View的绘制流程主要分为三步：
    • onMeasure：测量视图的大小，从顶层父View到子View递归调用measure()方法，measure()调用onMeasure()方法，onMeasure()方法完成绘制工作。
    • onLayout：确定视图的位置，从顶层父View到子View递归调用layout()方法，父View将上一步measure()方法得到的子View的布局大小和布局参数，将子View放在合适的位置上。
    • onDraw：绘制最终的视图，首先ViewRoot创建一个Canvas对象，然后调用onDraw()方法进行绘制。
  • onMeasure()方法：
    • 单一View，一般重写此方法，针对wrap_content情况，规定View默认的大小值，避免于match_parent情况一致。ViewGroup，若不重写，就会执行和单子View中相同逻辑，不会测量子View。一般会重写onMeasure()方法，循环测量子View。
    • Measure完成后可以通过getMeasureWidth和getMeasureHeight方法获取到view的测量后的宽高，在几乎所有的情况下都会等于最终view的宽高
    • onMeasure()方法接收两个参数，widthMeasureSpec和heightMeasureSpec，这两个值分别用于确定视图的宽度和高度的规格和大小。
  • onLayout()方法:
    • 单一View，不需要实现该方法。ViewGroup必须实现，该方法是个抽象方法，实现该方法，来对子View进行布局。
    • layout 过程决定了View的四个顶点的坐标和实际的View的宽高，完成以后可以通过getTop,getBottom,getLeft,getRight来获取View的四个顶点位置，并通过getWidth,getHeight获取View的最终宽高
  • onDraw()方法：
    • 无论单一View，或者ViewGroup都需要实现该方法，因其是个空方法
    • draw过程则决定了View的显示，完成draw后view会显示在屏幕上
    • 绘制背景(background.draw(Canvas))
    • 绘制自己 protected void onDraw(Canvas canvas) onDraw绘制自己，新建一个paint 在canvas上绘制自己的图形
    • 绘制children (dispatchDraw)dispatchDraw会遍历调用所有子元素的draw方法
    • 绘制装饰（onDrawScrollBars）

03.performMeasure测量

3.1 performMeasure源码

  • 从ViewRootImpl类中分析performMeasure测量，这里是测量的入口

    ViewRootImpl#performMeasure()，在performMeasure方法中我们又调用了mView的measure方法。这里的mView就是一开始的Activity的mDector根组件，这里的measure方法就是调用的mDector组件的measure方法
    View#measure()，在View的measure方法中，又调用了onMeasure方法。由于我们的mDector对象是一个FrameLayout，所以这里的onMeasure执行的是FrameLayout的onMeasure方法
    FrameLayout#onMeasure()，这里调用了一个循环逻辑，获取该View的所有子View，并执行所有子View的measure方法，这样又回到View的measure方法。
    - 这样经过一系列的循环遍历过程，如果是ViewGroup就会调用其ViewGroup的onMeasure方法，若果是View组件就会调用View的onMeasure方法
    View#onMeasure()，调用了setMeasuredDimension方法设置测量的结果
    View#setMeasuredDimension()，在这个方法中调用了setMeasuredDimensionRaw方法，把View组件即其子View的大小测量出来了，并且保存在了成员变量mMeasuredWith和mMeasuredHeight中

  • 需要注意测量最后一定要调用setMeasuredDimension()
    • Android提供了setMeasureDimension()函数，将测量结果作为参数并调用该函数，便可以视为View完成了自身的测量。该方法的本质就是将测量结果存起来，以便后续的layout和draw流程中获取控件的宽高。

3.2 measure设计思路

  • View的测量目标便是测量控件的宽高值，View的设计者通过代码编织了一整套复杂的逻辑：
    • 1、对于子View而言，其本身宽高直接受限于父View的布局要求，举例来说，父View被限制宽度为40px，子View的最大宽度同样也需受限于这个数值。因此，在测量子View之时，子View必须已知父View的布局要求，这个 布局要求， Android中通过使用 MeasureSpec 类来进行描述。
    • 2.1、对于完整的测量流程而言，父控件必然依赖子控件宽高的测量；若子控件本身未测量完毕，父控件自身的测量亦无从谈起。Android中View的测量流程中使用了非常经典的 递归思想：对于一个完整的界面而言，每个页面都映射了一个View树，其最顶端的父控件测量开始时，会通过 遍历 将其 布局要求 传递给子控件，以开始子控件的测量，子控件在测量过程中也会通过 遍历 将其 布局要求 传递给它自己的子控件，如此往复一直到最底层的控件…这种通过遍历自顶向下传递数据的方式我们称为 测量过程中的“递”流程。
    • 2.2、当最底层位置的子控件自身测量完毕后，其父控件会将所有子控件的宽高数据进行聚合，然后通过对应的 测量策略 计算出父控件本身的宽高，测量完毕后，父控件的父控件也会根据其所有子控件的测量结果对自身进行测量，这种从底部向上传递各自的测量结果，最终完成最顶层父控件的测量方式我们称为测量过程中的“归”流程，至此界面整个View树测量完毕。
  • 需要注意的是，子控件的测量过程本身还应该依赖于父控件的一些布局约束，比如：
    • 1.父控件固定宽高只有 x p x ，子控件设置为 l a y o u t h e i g h t = " {x}px，子控件设置为layout_height=" xpx，子控件设置为layouth​eight="{y}px";
    • 2.父控件高度为wrap_content(包裹内容)，子控件设置为layout_height=“match_parent”;
    • 3.父控件高度为match_parent(填充)，子控件设置为layout_height=“match_parent”;
    • 这些情况下，因为无法计算出准确控件本身的宽高值，简单的通过setMeasuredDimension()函数似乎不可能达到测量控件的目的，因为 子控件的测量结果是由父控件和其本身共同决定的，而父控件对子控件的布局约束，便是前文提到的 布局要求，即MeasureSpec类。
  • 测量流程中对布局的设计是通过MeasureSpec类来对其进行描述
    • 在设计的过程中，我们将布局要求分成了2个属性。测量大小 意味着控件需要对应大小的宽高，测量模式 则表示控件对应的宽高模式：
    • UNSPECIFIED：父元素不对子元素施加任何束缚，子元素可以得到任意想要的大小；日常开发中自定义View不考虑这种模式，可暂时先忽略；
    • EXACTLY：父元素决定子元素的确切大小，子元素将被限定在给定的边界里而忽略它本身大小；这里我们理解为控件的宽或者高被设置为 match_parent 或者指定大小，比如20dp；
    • AT_MOST：子元素至多达到指定大小的值；这里我们理解为控件的宽或者高被设置为wrap_content。
  • MeasureSpec用一个32位int值来表示布局要求描述
    • 前2位代表了测量模式，后30位则表示了测量的大小，对于模式和大小值的获取，只需要通过位运算即可。
    • 以宽度举例来说，若我们设置宽度=5px（二进制对应了101），那么mode对应EXACTLY,在创建测量要求的时候，只需要通过二进制的相加，便可得到存储了相关信息的int值：
    • image
    • 而当需要获得Mode的时候只需要用measureSpec与MODE_TASK相与即可，【measureSpec & MODE_MASK】如下图：
    • image
    • 想获得size的话只需要只需要measureSpec与~MODE_TASK相与即可，【measureSpec & ~MODE_MASK】如下图：
    • image

3.3 measure测量流程

3.3.1 测量单个控件
  • 只考虑单个控件的测量，整个过程需要定义三个重要的函数，分别为：
    • final void measure(int widthMeasureSpec, int heightMeasureSpec)：执行测量的函数;
    • void onMeasure(int widthMeasureSpec, int heightMeasureSpec)：真正执行测量的函数，开发者需要自己实现自定义的测量逻辑;
    • final void setMeasuredDimension(int measuredWidth, int measuredHeight)：完成测量的函数；
  • 1.measure()入口函数：标记测量的开始
    • 首先父控件需要通过调用子控件的measure()函数，并同时将宽和高的 布局要求 作为参数传入，标志子控件本身测量的开始：
    // 这个是父控件的代码，让子控件开始测量
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
    • 对于View的测量流程，其必然包含了2部分：公共逻辑部分 和 开发者自定义测量的逻辑部分，为了保证公共逻辑部分代码的安全性，设计者将measure()方法配置了final修饰符:
    public final void measure(int widthMeasureSpec, int heightMeasureSpec) {
  // ... 公共逻辑

  // 开发者需要自己重写onMeasure函数，以自定义测量逻辑
  onMeasure(widthMeasureSpec, heightMeasureSpec);
}
    • 开发者不能重写measure()函数，并将View自定义测量的策略通过定义一个新的onMeasure()接口暴露出来供开发者重写。
  • 2.onMeasure()函数：自定义View的测量策略
    • onMeasure()函数中，View自身也提供了一个默认的测量策略:
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
            getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}
    • 以宽度为例，通过这样获取View默认的宽度：getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec)

    View#getSuggestedMinimumWidth()，在某些情况下（比如自身设置了minWidth或者background属性），View需要通过getSuggestedMinimumWidth()函数作为默认的宽度值
    View#getDefaultSize(minWidth, widthMeasureSpec)，根据 布局要求 计算出View最后测量的宽度值。根据不同的测量模式，返回的测量结果不同。

  • 3.setMeasuredDimension()函数：标志测量的完成
    • setMeasuredDimension(width，height)函数的存在意义非常重要，在onMeasure()执行自定义测量策略的过程中，调用该函数标志着View的测量得出了结果。

    View#setMeasuredDimension()，该方法的本质就是将测量结果存起来，以便后续的layout和draw流程中获取控件的宽高

  • 最后总结一下单个View测量流程
    • 经过measure() -> onMeasure() -> setMeasuredDimension()函数的调用，最终View自身测量流程执行完毕。

3.3.2 完整测量流程

  • 对于一个完整的界面而言，每个页面都映射了一个View树，见微知著，了解了单个View的测量过程，从宏观的角度思考，View树整体的测量流程将如何实现？
  • 1、设计思路
    • 首先需要理解的是，每种ViewGroup的子类的测量策略（也就是onMeasure()函数内的逻辑）不尽相同，但整体思路都大同小异，即 遍历 测量所有子控件，根据父控件自身测量策略进行宽高的计算并得出测量结果。
    • 以 竖直方向布局 的LinearLayout为例，如何完成LinearLayout高度的测量？本文抛去不重要的细节，化繁为简，将LinearLayout高度的测量策略简单定义为 遍历获取所有子控件，将高度累加 ，所得值即自身高度的测量结果——如果不知道每个子控件的高度，LinearLayout自然无法测量出本身的高度。
    • 因此对于View树整体的测量而言，控件的测量实际上是 自底向上 的，正如文章开篇 整体思路 一节所描述的：对于完整的测量流程而言，父控件必然依赖子控件宽高的测量；若子控件本身未测量完毕，父控件自身的测量亦无从谈起。
    • 因为子控件的测量逻辑受限于父控件传过来的 布局要求（MeasureSpec）, 因此整体逻辑应该是：
    • 1.测量开始时，由顶层的父控件将布局要求传递给子控件，以通知子控件开始执行测量；
    • 2.子控件根据测量策略计算出自身的布局要求，再传递给下一级的子控件，通知子控件开始测量，如此往复，直至到达最后一级的子控件；
    • 3.最后一级的子控件测量完毕后，执行setMeasuredDimension()函数，其父控件根据自己的测量策略，将所有child的宽高和布局属性进行对应的计算（比如上文中LinearLayout就是计算所有子控件高度的和），得到自己本身的测量宽高；
    • 4.该控件通过调用setMeasuredDimension()函数完成测量，这之后，它的父控件再根据其自身测量策略完成测量，如此往复，直至完成顶层级View的测量，自此，整个页面测量完毕。
    • 经典的 递归思想，1、2步骤，开始测量的通知自顶至下，我们称之为测量步骤的 递流程；3、4步骤，测量完毕的顺序却是自底至顶，我们称之为测量步骤的 归流程。
  • 2、递流程的实现
    • 在整个递流程中，MeasureSpec所代表的 布局要求 占有至关重要的作用，了解了它在这个过程中的意义，也就理解了为什么我们常说 子控件的测量结果是由父控件和其本身共同决定的。
    • 依然以 竖直方向布局 的LinearLayout为例，我们需要遍历测量其所有的子控件，因此，在onMeasure()函数中，第一次我们编码如下：
    // 1.0版本的LinearLayout
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  // 1.通过遍历，对每个child进行测量
  for(int i = 0 ; i < getChildCount() ; i++){  
    View child = getChildAt(i);
    // 2.直接测量子控件
    child.measure(widthMeasureSpec, heightMeasureSpec);
  }
  // ...
  // 3.所有子控件测量完毕...
  // ...
}
    • 思考，若父布局传过来大小的是屏幕的高度，那么将其作为参数直接执行child.measure(widthMeasureSpec, heightMeasureSpec)，让子控件直接开始测量，是合理的吗？
    • 答案当然是否定的，试想这样一个简单的场景，若LinearLayout本身设置了padding值，那么子控件的最大高度便不能再达到heightMeasureSpec中size的大小了，但是如果像上述代码中的步骤2一样，直接对子控件进行测量，子控件就可以从heightMeasureSpec参数中取得屏幕的高度，通过setMeasuredDimension()将自己的高度设置和父控件高度一致——这导致了padding值配置的失效，并不符合预期。
    • 需要额外设计一个可重写的函数，用于自定义对child的测量：计算子控件的布局要求，并把新的布局要求传给子控件，再让子控件根据新的布局要求进行测量，这样就解决了上述的问题，由此也说明了为什么 子控件的测量结果是由父控件和其本身共同决定的。
    protected void measureChild(View child, int parentWidthMeasureSpec,
            int parentHeightMeasureSpec) {
        // 获取子元素的布局参数
    final LayoutParams lp = child.getLayoutParams();
    // 通过padding值，计算出子控件的布局要求
    final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
            mPaddingLeft + mPaddingRight, lp.width);
    final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
            mPaddingTop + mPaddingBottom, lp.height);
    // 将新的布局要求传入measure方法，完成子控件的测量
    child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}
    • getChildMeasureSpec()函数的作用是根据父布局的MeasureSpec和padding值，计算出对应子控件的MeasureSpec，因为这个函数的逻辑是可以复用的。
    • 这个函数才是子控件的测量结果是由父控件和其本身共同决定的 最直接的体现，同时，在不同的布局模式下（match_parent、wrap_content、指定dp/px），其对应子控件的布局要求的返回值亦不同。
    // 2.0版本的LinearLayout
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  // 1.通过遍历，对每个child进行测量
  for(int i = 0 ; i < getChildCount() ; i++){  
     View child = getChildAt(i);
     // 2.计算新的布局要求，并对子控件进行测量
     measureChild(child, widthMeasureSpec, heightMeasureSpec);
  }
  // ...
  // 3.所有子控件测量完毕...
  // ...
}
  • 3、归流程的实现
    • 所有子控件测量完毕，接下来 归流程 的实现就很简单了，将所有child的height进行累加，并调用 setMeasuredDimension()结束测量即可：
    // 3.0版本的LinearLayout
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  // 1.通过遍历，对每个child进行测量
  for(int i = 0 ; i < getChildCount() ; i++){  
     View child = getChildAt(i);
     // 2.计算新的布局要求，并对子控件进行测量
     measureChild(child, widthMeasureSpec, heightMeasureSpec);
  }
  // 3.完成子控件的测量,对高度进行累加
  int height = 0;
  for(int i = 0 ; i < getChildCount() ; i++){  
      height += child.getMeasuredHeight();  
  }
  // 4.完成LinearLayout的测量
  setMeasuredDimension(width, height);
}

04.performLayout布局

4.1 performLayout源码

  • 从ViewRootImpl类中分析performLayout测量，这里是测量的入口

    ViewRootImpl#performLayout()，具体看一下host.layout()，这个host就是一开始的Activity的mDector根组件
    View#layout()，看源码执行了onLayout方法，host是一个FrameLayout，所以跟measure类似的，看一下FrameLayout的onLayout方法的实现
    FrameLayout#onLayout()，调用了layoutChildren方法
    FrameLayout#layoutChildren()，在这个方法中，遍历执行View的layout方法，若是ViewGroup则执行具体的ViewGroup的layout方法，若是View，则执行View的layout方法
    View#layout()，经过layout方法，如果是View组件的话就已经将View组件的位置信息计算出来并保存在对象的成员变量中

4.2 layout设计思路

  • 布局设计的总体思路，负责对所有子控件进行对应策略的布局，这就是 布局流程（layout）。
    • 1.对于叶子节点的View而言，其本身没有子控件，因此一般情况下仅需要记录自己在父控件的位置信息，并不需要处理为子控件布局的逻辑；
    • 2.1对于整体的布局流程而言，子控件的位置必然交由父控件布置，和 测量流程 一样，Android中布局流程中也使用了递归思想：对于一个完整的界面而言，每个页面都映射了一个View树，其最顶端的父控件开始布局时，会通过自身的布局策略依次计算出每个子控件的位置。
    • 2.2值得一提的是，为了保证控件树形结构的 内部自治性，每个子控件的位置为 相对于父控件坐标系的相对位置 ，而不是以屏幕坐标系为准的绝对位置。位置计算完毕后，作为参数交给子控件，令子控件开始布局；如此往复一直到最底层的控件，当所有控件都布局完毕，整个布局流程结束。

4.3 layout布局流程

4.3.1 单个View的布局流程
  • 思考一个问题，布局流程的本质是测量结束之后，将每个子控件分配到对应的位置上去——既然有子控件，那说明进行布局流程的主体理应是ViewGroup，那么作为叶子节点的单个View来说，为什么也会有布局流程呢？
  • 读者认真思考可以得出，布局流程实际上是一个复杂的过程，整个流程主要逻辑顺序如下：
    • 1.决定是否需要重新进行测量流程onMeasure()；
    • 2.将自身所在的位置信息进行保存；
    • 3.判断本次布局流程是否引发了布局的改变；
    • 4.若布局发生了改变，令所有子控件重新布局；
    • 5.若布局发生了改变，通知所有观察布局改变的监听发送通知。
  • 整个布局过程中，除了4是ViewGroup自身需要做的，其它逻辑对于View和ViewGroup而言都是公共的——这说明单个View也是有布局流程的需求的。
  • 现在将整个布局过程定义三个重要的函数，分别为：
    • void layout(int l, int t, int r, int b)：控件自身整个布局流程的函数;
    • void onLayout(boolean changed, int left, int top, int right, int bottom)：ViewGroup布局逻辑的函数，开发者需要自己实现自定义布局逻辑;
    • void setFrame(int left, int top, int right, int bottom)：保存最新布局位置信息的函数;
  • 1.layout函数：标志布局的开始
    • 站在单个View的角度，首先父控件需要通过调用子控件的layout()函数，并同时将子控件的位置（left、right、top、bottom）作为参数传入，标志子控件本身布局流程的开始
    // 伪代码实现
public void layout(int l, int t, int r, int b) {
  // 1.决定是否需要重新进行测量流程（onMeasure）
  if(needMeasureBeforeLayout) {
    onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec)
  }

  // 先将之前的位置信息进行保存
  int oldL = mLeft;
  int oldT = mTop;
  int oldB = mBottom;
  int oldR = mRight;
  // 2.将自身所在的位置信息进行保存；
  // 3.判断本次布局流程是否引发了布局的改变；
  boolean changed = setFrame(l, t, r, b);

  if (changed) {
    // 4.若布局发生了改变，令所有子控件重新布局；
    onLayout(changed, l, t, r, b);
    // 5.若布局发生了改变，通知所有观察布局改变的监听发送通知
    mOnLayoutChangeListener.onLayoutChange(this, l, t, r, b, oldL, oldT, oldR, oldB);
  }
}
    • 通过伪代码的方式对布局流程进行了描述，实际上View本身的layout()函数内部虽然多处不同，但核心思想是一致的——layout()函数实际上代表了控件自身布局的整个流程，setFrame()和onLayout()函数都是layout()中的一个步骤。
  • 2.setFrame函数：保存本次布局信息
    • 为什么需要保存布局信息？因为我们总是有获取控件的宽和高的需求——比如接下来的onDraw()绘制阶段；而保存了布局信息，就能通过这些值计算控件本身的宽高。
    • 保存最新的布局信息，现在将目光转到mLeft、mTop、mRight、mBottom四个变量上。这四个变量对应的自然是View自身所在的位置，那么View是如何通过这四个变量描述控件的位置信息呢？
  • 3.相对位置和绝对位置
    • image
    • image
    • 这时候不可避免的会面临另外一个问题，这个mLeft、mTop、mRight、mBottom的值所对应的坐标系是哪里呢？
    • 这里需要注意的是，为了保证控件树形结构的 内部自治性，每个子控件的位置为 相对于父控件坐标系的相对位置 ，而不是以屏幕坐标系为准的绝对位置
    • 反过来想，如果这些位置信息是以屏幕坐标系为准，那么就意味着每个叶子节点的View会持有保存从根节点ViewGroup直到自身父ViewGroup每个控件的位置信息，在计算布局时则更为繁琐，很明显是不合理的设计。
  • 4.onLayout函数：计算子控件的位置
    • 对于叶子节点的View而言，其并没有子控件，因此一般情况下并没有为子控件布局的意义（特殊情况请参考AppCompatTextView等类），因此View的onLayout()函数被设计为一个空的实现。
    • 而在ViewGroup中，不同类型的ViewGroup有不同的布局策略，这些布局策略的逻辑各不相同，因此该方法被设计为抽象接口，开发者必须实现这个方法以定义ViewGroup的布局策略。
    • 以LinearLayout为例，其布局策略为 根据排布方向，将其所有子控件按照指定方向依次排列布局。
4.3.2 完整布局流程
  • 整体思路是，对于一个完整的界面而言，每个页面都映射了一个View树，最顶端的父控件开始布局时，会通过自身的布局策略依次计算出每个子控件的位置。位置计算完毕后，作为参数交给子控件，令子控件开始布局；如此往复一直到最底层的控件，当所有控件都布局完毕，整个布局流程结束。
  • 唯一需要注意的是，开发者必须实现onLayout()函数以定义ViewGroup的布局策略，这里以 竖直布局 的LinearLayout的伪代码为例：
    @Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int childTop;
  int childLeft;

  // 遍历所有子View
  for (int i = 0; i < count; i++) {
    // 获取子View
    final View child = getVirtualChildAt(i);
    // 获取子View宽高，注意这里使用的是 getMeasuredWidth 而不是 getWidth
    final int childWidth = child.getMeasuredWidth();
    final int childHeight = child.getMeasuredHeight();

    // 令所有子控件开始布局
    setChildFrame(child, childLeft, childTop, childWidth, childHeight);   
    // 高度累加，下一个子View的 top 就等于上一个子View的 bottom ，符合竖直线性布局从上到下的布局策略   
    childTop += childHeight;      
  }
}

private void setChildFrame(View child, int left, int top, int width, int height) {
    // 这里可以看到，子控件的mRight实际上就是 mLeft + getMeasuredWidth()
    // 而在getWidth()函数中，mRight-mLeft的结果就是getMeasuredWidth()
    // 因此，getWidth() 和 getMeasuredWidth() 是一致的
    child.layout(left, top, left + width, top + height);
}
  • 在整个布局流程的设计中，设计者将流程中公共的业务逻辑（保存布局信息、通知布局发生改变的监听等）通过layout()函数进行了整合，同时，将ViewGroup额外需要的自定义布局策略通过onLayout()函数向外暴露出来，针对组件中代码的可复用性和可扩展性进行了合理的设计。
    • image

05.performDraw绘制

5.1 performDraw源码流程

  • 从ViewRootImpl类中分析performDraw测量，这里是测量的入口

    ViewRootImpl#performDraw()，看源码可知调用了draw(fullRedrawNeeded)
    ViewRootImpl#draw()，调用了mView的draw方法，这里的mView是我们的mDector，看一下draw方法的具体实现
    ViewRootImpl#drawSoftware()，调用mSurface.lockCanvas方法获取一个Canvas对象，然后drawColor，translate，setScreenDensity等等。最后调用mView.draw(canvas)。
    ViewRootImpl#drawSoftware()#mView.draw(canvas)，由于mView是我们的mDector，因此这里可以看FrameLayout的draw方法
    FrameLayout#draw()，如果包含子View，那么也会执行子View的draw方法。

  • 从上述源码可以看到ViewRootImpl有一个Surface属性，当界面绘制时，就调用mSurface.lockCanvas方法获取一个Canvas对象传递个View递归绘制。ViewRootImpl简易类图如下。
    • image
  • 然后看一下Surface的源码

    Surface#lockCanvas，这里调用了nativeLockCanvas方法
    android_view_Surface#nativeLockCanvas()。

    //frameworks\base\core\jni\android_view_Surface.cpp
static jlong nativeLockCanvas(JNIEnv* env, jclass clazz, jlong nativeObject, jobject canvasObj, jobject dirtyRectObj) {
    sp<Surface> surface(reinterpret_cast<Surface *>(nativeObject));
    Canvas* nativeCanvas = GraphicsJNI::getNativeCanvas(env, canvasObj);
    // 给Canvas设置Bitmap
    nativeCanvas->setBitmap(bitmap);
    sp<Surface> lockedSurface(surface);
    lockedSurface->incStrong(&sRefBaseOwner);
    return (jlong) lockedSurface.get();
}
  • 我们的界面像素数据保存在Surface中，这个Surface就是在ViewRootImpl中创建的。
    • image

5.2 draw绘制设计

  • 绘制整体的设计思路：
    • 大部分view就是先绘制必要的背景，然后调用onDraw绘制自身内容，绘制完后如果是ViewGroup，还会调用dispatchDraw绘制子view，最后绘制前景一些UI即可；对于一些特殊view，只是多加了绘制渐变框的一步(使用保存图层、绘制图层、恢复画布的做法)。
  • 关于ViewGroup中dispatchDraw设计思路
    • 自上而下、一层层地传递下去，直到完成整个View树的draw过程。
    • image

5.3 draw绘制流程

  • ViewRootImpl.performTraversals()真正的绘制
    • 调用relayoutWindow()：
    • 创建用户java层的surface：只有用户提供的画面数据；
    • 创建native层的surface：包含用户提供的画面数据（java层的surface）+系统的画面数据（状态栏，电池、wifi等等）；
    • 创建完surface后：依次调用：performMeasure（对应view的onMeasure）、performLayout(onLayout)、performDraw(onDraw);
  • 在performDraw()中：
    • 将view的数据传至native层的surface
    • surface中的canvas记录数据
    • 生成bitmap图像数据（此时数据是在surface中）
    • 将surface放入队列中；生产者消费者模式；
    • 通知surfaceflinfer进程去队列中取surface数据
    • surfaceflinfer拿到不同的surface,进行融合，生成bitmap数据
    • 将bitmap数据放入framebuffer中，进行展示

06.View绘制流程总结下

6.1 Activity布局绘制

  • 想要弄清楚View是怎么绘制的得先弄明白View是怎么创建出来的。我们先来看下View的创建流程。
    • image
  • 总结如下所示：
    • Activity执行onResume之后再ActivityThread中执行Activity的makeVisible方法。
    • View的绘制流程包含了测量大小，测量位置，绘制三个流程；
    • Activity的界面绘制是从mDoctor即根View开始的，也就是从mDoctor的测量大小，测量位置，绘制三个流程；
    • View体系的绘制流程是从ViewRootImpl的performTraversals方法开始的；
    • View的测量大小流程:performMeasure --> measure --> onMeasure等方法;
    • View的测量位置流程：performLayout --> layout --> onLayout等方法；
    • View的绘制流程：onDraw等方法；
    • View组件的绘制流程会在onMeasure,onLayout以及onDraw方法中执行分发逻辑，也就是在onMeasure同时执行子View的测量大小逻辑，在onLayout中同时执行子View的测量位置逻辑，在onDraw中同时执行子View的绘制逻辑；
    • Activity中都对应这个一个Window对象，而每一个Window对象都对应着一个新的WindowManager对象（WindowManagerImpl实例）；

07.View如何显示在屏幕

  • 一个 view 究竟是如何显示在屏幕上的？
    • 一般都比较了解 view 渲染的三大流程，但是 view 的渲染远不止于此：此处以一个通用的硬件加速流程来表征
    • image
  • 关于整个View显示在屏幕上的流程如下
    • Vsync 调度：很多同学的一个认知误区在于认为 vsync 是每 16ms 都会有的，但是其实 vsync 是需要调度的，没有调度就不会有回调；
    • 消息调度：主要是 doframe 的消息调度，如果消息被阻塞，会直接造成卡顿；
    • input 处理：触摸事件的处理；
    • 动画处理：animator 动画执行和渲染；
    • view 处理：主要是 view 相关的遍历和三大流程；
    • measure、layout、draw：view 三大流程的执行；
    • DisplayList 更新：view 硬件加速后的 draw op；
    • OpenGL 指令转换：绘制指令转换为 OpenGL 指令；
    • 指令 buffer 交换：OpenGL 的指令交换到 GPU 内部执行；
    • GPU 处理：GPU 对数据的处理过程；
    • layer 合成：surface buffer 合成屏幕显示 buffer 的流程；
    • 光栅化：将矢量图转换为位图；
    • Display：显示控制；
    • buffer 切换：切换屏幕显示的帧 buffer；

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/4753.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

页面布局 so easy——Android开发常见的界面布局方式详解

页面布局 so easy——Android开发常见的界面布局方式详解

​ 在Android应用中&#xff0c;界面由布局和控件组成。布局好比是建筑里的框架&#xff0c;控件相当于建筑里的砖瓦。针对界面中控件不同的排列位置&#xff0c;Android定义了相应的布局进行管理。本篇将针对Android界面中常见的布局进行详细地讲解。 View视图 所有的UI元素…
阅读更多...
C 语言网络编程 — 内核协议栈收包/发包流程

C 语言网络编程 — 内核协议栈收包/发包流程

目录 文章目录目录关键技术DMAsk_buff 结构体Net driver Rx/Tx Ring BufferBuffer Descriptor TableNAPI 收包机制网卡多队列内核协议栈收包/发包流程概览内核协议栈收包流程详解驱动程序层&#xff08;数据链路层&#xff09;VLAN 协议族Linux Bridge 子系统网络协议层&#x…
阅读更多...
PCB模块化设计01——USB接口详解知识要点

PCB模块化设计01——USB接口详解知识要点

目录PCB模块化设计01——USB接口详解知识要点一、定义二、USB分类&#xff1a;三、传输协议四、USB接口布局布线要求PCB模块化设计01——USB接口详解知识要点 一、定义 USB是通用串行总线(Universal Serial Bus)&#xff0c;分为HOST/DEVICE两个角色&#xff0c;所有的数据传…
阅读更多...
【C++学习】日积月累——继承详解（1）

【C++学习】日积月累——继承详解（1）

一、继承的概念及定义 1.1 继承的概念 继承&#xff08;inheritance&#xff09;机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称该类为派生类。…
阅读更多...
JavaSE思维导图——总结篇

JavaSE思维导图——总结篇

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;学习时长两年半的java博主 &#x1f39f;️个人主页&#xff1a;君临๑ ps&#xff1a;点赞是免费的&#xff0c;却可以让写博客的作者开心好几天&#x1f60e; 进入正题。关于Java专栏的规划如下 写作计划&#xff1a;大概一…
阅读更多...
【微服务 从0开始 】Spring Cloud 配置文件

【微服务 从0开始 】Spring Cloud 配置文件

&#x1f50e;这里是【秒懂云原生】&#xff0c;关注我学习云原生不迷路 &#x1f44d;如果对你有帮助&#xff0c;给博主一个免费的点赞以示鼓励 欢迎各位&#x1f50e;点赞&#x1f44d;评论收藏⭐️ &#x1f440;专栏介绍 【秒懂云原生】 目前主要更新微服务&#xff0c;…
阅读更多...
抖音本地商家怎么做短视频运营？

抖音本地商家怎么做短视频运营？

抖音作为一款以短视频为核心的本地化社交平台&#xff0c;对于实体店的短视频运营来说&#xff0c;需要注重产品定位、目标人群、短视频制作、发布、私信评论维护和同行客户挖掘等方面。 　　一、做好产品定位 　　实体店在进行短视频运营时&#xff0c;首先需要做好产品定位。…
阅读更多...
2021蓝桥杯真题图像模糊 C语言/C++

2021蓝桥杯真题图像模糊 C语言/C++

题目描述 小蓝有一张黑白图像&#xff0c;nm 个像素组成&#xff0c;其中从上到下共 n 行&#xff0c;每行从左到右 m 列。每个像素由一个 0 到 255 之间的灰度值表示。 现在&#xff0c;小蓝准备对图像进行模糊操作&#xff0c;操作的方法为&#xff1a; 对于每个像素&#…
阅读更多...
首屏加载优化

首屏加载优化

最近沉迷逛某蓝色软件&#xff0c;收益良多&#xff01;万分感谢博主 海阔_天空&#xff0c;写的太棒了&#x1f44d;&#x1f389; 下面是原文链接&#xff0c;我在原文的基础上浅做个笔记&#xff0c;方便个人快速复习 前端性能优化——首页资源压缩63%、白屏时间缩短86% -…
阅读更多...
溯源（五）之攻击源的获取

溯源（五）之攻击源的获取

溯源&#xff08;一&#xff09;之溯源的概念与意义 溯源&#xff08;二&#xff09;之 windows-还原攻击路径 溯源&#xff08;三&#xff09;之Linux-入侵排查 溯源&#xff08;四&#xff09;之流量分析-Wireshark使用 溯源整体流程的思维导图 攻击源的获取 1、获取哪些数…
阅读更多...
Spring Data JPA

Spring Data JPA

1. Spring Data环境搭建 Spring Data提供了一套统一的基于Spring的数据访问模型&#xff0c;它可以轻松的实现数据库访问&#xff0c;包括各种关系型、非关系型数据库、Map-Reduce框架、云数据服务等。 Spring Data 包含多个子项目&#xff1a; • Commons - 提供共享的基础框架…
阅读更多...
ExtScreen，为智能电视和VR设备打造的快应用引擎

ExtScreen，为智能电视和VR设备打造的快应用引擎

和手机相比&#xff0c;智能电视端的生态一直都不怎么行&#xff0c;具体来讲有以下这几个问题&#xff1a; 电视芯片运算能力差&#xff0c;配置普遍不如手机&#xff1b;电视交互基于遥控器&#xff0c;完全不同于触摸屏操作的手机&#xff1b;电视的生态比较封闭&#xff0…
阅读更多...
【JavaWeb】Cookie和Session

【JavaWeb】Cookie和Session

目录 Cookie Cookie定义 Cookie数据的来源 Cookie数据的存储 Cookie数据的使用 使用Cookie原因 Session Session定义 如何存储数据 Cookie和Session的区别 使用Cookie和Session简单实现登录页面 Cookie Cookie定义 Cookie是浏览器提供持久化存储数据的机制。 Cook…
阅读更多...
这么方便吗？用ChatGPT生成Excel（详解步骤）

这么方便吗？用ChatGPT生成Excel（详解步骤）

文章目录前言使用过 ChatGPT 的人都知道&#xff0c;提示占据非常重要的位置。而 Word&#xff0c;Excel、PPT 这办公三大件中&#xff0c;当属 Excel 最难搞&#xff0c;想要熟练掌握它&#xff0c;需要记住很多公式。但是使用提示就简单多了&#xff0c;和 ChatGPT 聊聊天就能…
阅读更多...
【vue3】基础概念的介绍

【vue3】基础概念的介绍

⭐【前言】 首先&#xff0c;恭喜你打开了一个系统化的学习专栏&#xff0c;在这个vue专栏中&#xff0c;大家可以根据博主发布文章的时间顺序进行一个学习。博主vue专栏指南在这&#xff1a;vue专栏的学习指南 &#x1f973;博主&#xff1a;初映CY的前说(前端领域) &#x1f…
阅读更多...
【音视频】zlmediakit总结一

【音视频】zlmediakit总结一

推拉流理论 推流&#xff1a;将直播的内容推送至服务器的过程。 拉流&#xff1a;指服务器已有直播内容&#xff0c;用指定地址进行拉取的过程。 拉流&#xff0c;即是指服务器里面有流媒体视频文件&#xff1b; 但zlmediakit里也有个广义的拉流概念如下。对于用户而言&#xf…
阅读更多...
面试官灵魂拷问[二]:SQL 语句中 where 条件后写上 1=1 是什么意思？

面试官灵魂拷问[二]:SQL 语句中 where 条件后写上 1=1 是什么意思？

面试官灵魂拷问系列又来更新啦! “SQL 语句中 where 条件后写上 11 是什么意思&#xff1f;” 这玩意就跟很多新语言支持尾部逗号的原理一样的。 比如 Kotlin 支持数组写成 [1, 2, 3, 4, ] &#xff0c;注意4后边那个逗号&#xff0c;为什么呢&#xff1f;因为当你增加一个项…
阅读更多...
医院LIS系统源码，云LIS系统源码，独立实验室LIS源码

医院LIS系统源码，云LIS系统源码，独立实验室LIS源码

实验室云LIS系统源码 LIS系统源码 LIS源码 基于B/S架构的实验室管理系统云LIS&#xff0c;整个系统的运行基于WEB层面&#xff0c;只需要在对应的工作台安装一个浏览器软件有外网即可访问。 私信了解更多源码内容&#xff01; 技术架构&#xff1a;Asp.NET CORE 3.1 MVC SQ…
阅读更多...
MySQL表设计思路（一对多、多对多...）

MySQL表设计思路（一对多、多对多...）

要开始单独负责需求了&#xff0c;捋一捋表设计的思路。 文章目录一、MySQL中的数据类型二、一对一的关系设计二、一对多的关系设计三、多对多的关系设计四、经验总结一、MySQL中的数据类型 字符串类型 varchar&#xff1a;即variable char &#xff0c;可边长度的字符串&#…
阅读更多...
Tomcat启动JSP项目，搞起来了

Tomcat启动JSP项目，搞起来了

虽然有点复古&#xff0c;但是还是有很多小伙伴在使用的&#xff0c;小编来一篇保姆级教程 1、用idea打开jsp项目 2、添加tomcat配置 3、点击后会出现配置框,这里画框的地方都选上&#xff0c;版本选择1.8&#xff0c;其他的信息内容默认后&#xff0c;点击确认 4、点击…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发