IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 使用HierarchyViewer工具分析布局 -> 正文阅读

[移动开发]使用HierarchyViewer工具分析布局

前言

不合理的布局会使我们的应用程序UI性能变慢,HierarchyViewer是 Android Device Monitor 中内置的一种工具,该工具能够用可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我们优化布局设计,让我们更好地检视和设计用户界面(UI),绝对是UI检视的利器.
官方使用文档

一、打开

1、本地安装SDK目录->sdk->tools->hierarchyviewer.bat(版本低,可能有未知bug)或点击同级目录的monitor.bat

2、Android Studio : 工具栏->Tools->Android->Android Device Monitor(官方推荐)

3、在命令行输入 hierarchyviewer(可用,但是启动的是版本低的)

二、启动

1、设备连接

模拟器设备版本需要设置为 Android 4.1,真机需要手机root权限,成功后左侧Windows小手机会看到设备信息
window窗口
2、打开Hierarchy View视图界面

点击Window->Open Perspective->Hierarchy View。就会看到如图界面,否则点击工具栏Window -> Reset Perspective 重启默认布局
HierarchyView界面

三、 使用

1、相关窗口视图介绍

  • Tree View(中央):显示视图层次结构的树视图。 您可以使用鼠标拖动并放大树,底部的缩放控件。 每个节点表示它是View类名和ID名称。双击节点或者点击右上角小地球在这里插入图片描述可以查看实际布局显示的内容

  • Tree Overview(右上):为您的应用程序的完整视图层次结构提供鸟瞰图。 移动灰色矩形以更改树视图中可见的视口。

  • Layout View(右下角):显示布局的线框视图。 当前所选视图的轮廓为红色,其父视图为浅红色。单击此处的视图也会在树视图中选择它,反之亦然。

2、相关功能按钮介绍

1)Hierarchy Viewer 视图层次结构是布局的快照,因此不会自动更新。 要更新层次结构视图,点击右上角蓝色金字塔在这里插入图片描述
2)要想保存Tree View,点击右上角蓝色金字塔左边小文档布局优化必备 Hierarchy Viewer 工具使用,左边是PNG格式,右边在这里插入图片描述使用是PS的PSD格式。
3)如需使某个视图无效(请求在下一次布局更新期间对 onDraw() 进行系统调用),请选择层次结构中的相应视图,然后点击 Invalidate the layout 图标 (这与在视图中调用 invalidate() 等效)。 要请求实际布局视图(及任何子级),请点击 Request lay out 图标 。

4)如果需要转到其他应用,则必须从左侧面板的 Windows 标签页中选择该应用,以查看其视图层次结构。
查看特定app的视图树
5)如需查看视图的属性,请点击左窗格中的 View Properties 标签页。
在这里插入图片描述
6)要查看有关视图的详细信息,包括其度量、布局和绘制时间(如图 3 所示),请在 Tree View 中点击该视图。双击该视图可查看其放大图片。
视图节点显示界面的各部分
7)点击右上Profile Mode在这里插入图片描述按钮,可以检查节点布局绘制的时间是否合理。
查看视图绘制是否合理

四、分析

1、圆点功能介绍
点击右上Profile Mode在这里插入图片描述按钮后,节点的每个子视图都有三个圆点。

  • ①左边圆点:表示渲染管道的绘制过程。
  • ②中间圆点:表示布局阶段。
  • ③右点圆点:表示执行阶段。

2、圆点颜色介绍

  • ①绿色:表示渲染管道的绘制过程。表示该View的此项性能比该View Tree中超过50%的View都要快;例如,一个绿点的测量时间意味着这个视图的测量时间快于树中的视图对象的50%

  • ②黄:表示该View的此项性能比该View Tree中超过50%的View都要慢;例如,一个黄点布局意味着这种观点有较慢的布局时间超过50%的树视图对象。

  • ③红:表示该View的此项性能是View Tree中最慢的;例如,一个红点的绘制时间意味着花费时间最多的这一观点在树上画所有的视图对象。

红色节点是代表应用性能慢的一个潜在问题,下面是几个例子,如何来分析和解释红点的出现原因?

如果在叶节点或者ViewGroup中,只有极少的子节点,这可能反映出一个问题,应用可能在设备上运行并不慢,但是你需要指导为什么这个节点是红色的,可以借助Systrace或者Traceview工具,获取更多额外的信息;

如果一个视图组里面有许多的子节点,并且测量阶段呈现为红色,则需要观察下子节点的绘制情况;

如果视图层级结构中的根视图,Messure阶段为红色,Layout阶段为红色,Draw阶段为黄色,这个是比较常见的,因为这个节点是所有其它视图的父类;

如果视图结构中的一个叶子节点,有20个视图是红色的Draw阶段,这是有问题的,需要检查代码里面的onDraw方法,不应该在那里调用。

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-11-05 00:39:30  更:2022-11-05 00:41:22 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/19 17:54:41-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码