Android布局优化

ゝ一纸荒年。 2022-05-30 07:09 262阅读 0赞

安卓性能优化的内容很多，但是做起来其实就和挤牙膏一样。说道布局优化，首先我们要理解图形是如何被渲染到屏幕上的。这里借鉴大佬的图：  
![这里写图片描述][70]  
其实cpu也可以用来做图形显示，但是为什么又需要专门的gpu呢?简单来说cpu作为中央处理器任务很多，对于复杂图形的计算速度跟不上需求，要单独依赖cpu会大大加大成本，所以gpu单独做图形处理。  
![这里写图片描述][70 1]  
所以cpu将内存中的矢量图形丢个gpu，由gpu栅格化来显示。那为什么有时候手机会感觉卡顿呢？看下面这个 图  
![这里写图片描述][70 2]  
如果一帧画面处理时间太长，系统就会丢掉一帧，那么前一帧的画面就会停留更久，给人卡顿的感觉。那么我们优化的目标就很明确了。  
1、GPU 减少重复绘制的  
2、CPU 减少 xml 转换成对象的时间

#### 一、减少GPU的过度绘制 ####

手机上的过渡绘制查看在开发者选项中开启:  
![这里写图片描述][70 3]

##### (1)、背景颜色 #####

开发项目的时候，继承的主题都有默认的背景颜色，而基本上每个页面都有自己的背景颜色，很多时候都没有去管这个，导致无形中多渲染了一次背景。这里我建议将主题的背景色去掉，每个页面单独设置背景。

当然不止主题背景色，应该是在页面中如果背景色想同，满足业务需求的情况下都应该去掉，不然就加大了过渡绘制的可能性。

##### (2)、自定义控件的绘制 #####

这里就看实际的情况了，只需要注意一个点，看不见的就不用绘制了，活用canvas.clip()来进行优化。

#### 二、CPU 减少 xml 转换成对象的时间 ####

其实说白了就是减少布局层次的嵌套，这里注意两个工具的使用。在Android Studio里：

##### (1)布局层次工具 #####

##### 1. Hierarchy View #####

![这里写图片描述][70 4]  
![这里写图片描述][70 5]  
这样就可以看到布局嵌套的层次，点那个彩色的按钮可以显示出来各个控件Measure ,Layout,Draw的时间。

<table> 
 <tbody> 
  <tr> 
   <td>绿: 表示该View的此项性能比该View Tree中超过50%的View都要快；例如,代表Measure的是绿点,意味着这个视图的测量时间快于树中的视图对象的50%。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>黄: 表示该View的此项性能比该View Tree中超过50%的View都要慢；</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>红: 表示该View的此项性能是View Tree中最慢的。</td> 
  </tr> 
 </tbody> 
</table>

##### 2. Layout Inspector #####

![这里写图片描述][70 6]  
![这里写图片描述][70 7]  
通过这两个工具可以很清楚看到布局的层次,下面就具体说一下优化布局。

##### (2) 布局层次优化 #####

##### 1.去掉无意义的嵌套 #####

我们开发中经常会出现没有必要的嵌套，比如一个FramLayout嵌套一个FramLayout，这样完全可以去掉的ViewGroup尽量去掉。Hierarchy View工具中我就可以清楚发现这样嵌套的布局，便于处理。

##### 2.尽量使用较轻量级的父布局 #####

使用优先FramLayout>LinearLayout>RelativeLayout。但是有时候会碰到使用LinearLayout导致嵌套层次过深，这时候就可以使用一个RelativeLayout来进行代替，或者直接自定义一个ViewGroup来进行优化。

##### 3.活用Include、merge与viewStub #####

使用include+merge组合来减少布局嵌套,使用viewStub来减少资源占用。  
对于viewStub的控件:  
不可见，不用占用资源，只有设置viewstub为visible、invisible或者调用其inflater()方法时，其对应的布局文件才会被初始化。局限是viewstub的引用对象需要是一个布局layout文件，如果要是单个的view的话，viewstub就不合适了。

[70]: /images/20220530/f18066d08c0c4120b10a8fc050887470.png
[70 1]: /images/20220530/098e85d5f37944f7b8a5d624b41ccbb8.png
[70 2]: /images/20220530/55c99d4b99e04a889d567c25428e8798.png
[70 3]: /images/20220530/a9aaaaf232b04fc693cf55bf4d505665.png
[70 4]: /images/20220530/02e4fa615fe34f69807af254d57e8263.png
[70 5]: /images/20220530/eee6ebabaf9c4bc39196589555895add.png
[70 6]: /images/20220530/894986c6f84d47f6bc22d2e530cda0a0.png
[70 7]: /images/20220530/eace00a3448a4e31939533e86f0a2106.png