Optimizing Your UI——使用Hierarchy Viewer优化UI

有时候你应用程序的布局可能让应用运行缓慢。为了帮助调试布局中的问题,Android SDK提供了Hierachy Viewer和lint工具。

Hierarchy Viewer应用允许你调试和优化UI。它提供了布局View层次结构的可视化体现(View Hierachy窗口),附有布局中每个节点的性能信息,和一个放大的显示视图(Pixel Perfect窗口)来更仔细地检查布局的像素。

Android的lint工具是一个静态代码扫描工具,可以帮助你优化应用的布局和布局层次,同时发现其他常见编码问题。你可以在布局文件或资源目录上运行它来快速检查低性能或其他会影响应用性能类型的问题。

使用Hierarchy Viewer

运行Hierarchy Viewer并选择一个窗口

按照这些步骤来运行Hierachy Viewer:

  1. 连接你的设备或运行一个模拟器

    为了保护安全,Hierarchy Viewer只能连接运行开发者版本的Android系统的设备。

  2. 安装你想工作的应用
  3. 运行应用,确保它的UI是可视的。
  4. 在终端,运行 <sdk>/tools/ 目录的 hierachyviewer
  5. 你看到的第一个窗口显示了设备和模拟器的列表。要展开一个设备或模拟器的Activity对象列表,点击左边的箭头。这个显示了设备或模拟器上UI当前可视的Activity对象列表。这些对象按照它们的Android组件名称列出来。这个列表包含你应用的Activity对象和系统的Activity对象。
  6. 从列表中选择你的Activity名称。你现在可以使用View Hierarchy窗口查看它的view层次结构,或者使用Pixel Perfect窗口查看UI的一个放大图像。

注:Hierarchy Viewer设备窗口

关于View Hierarchy窗口

View Hierarchy窗口显示了运行设备或模拟器上的Activity UI的View对象。你可以查看整个View树上下文中的每个单独的View对象。对于每个View对象,View Hierarchy窗口也显示了渲染性能数据。

要查看View Hierarchy窗口,按照上面的部分运行Hierarchy Viewer,然后点击设备窗口上面的View Hierarchy

你应该看到四个窗格:

  • Tree View:左边的窗格显示Tree View,一个显示Activity的view对象层次的图。使用Tree View检查单独的View对象以及查看UI中View对象之间的关系。

    要在窗格进行缩放,使用窗格底部的滑动条,或者使用鼠标滚轮。要在窗格来回移动或显示当前不可见的View对象,点击然后拖拽窗格。

    要高亮那些树中class或ID匹配一个搜索字符串的节点,在窗口底部的Filter by class or id:编辑框中输入字符串。匹配搜索字符串的节点的背景会从灰色变为浅蓝色。

    要保存Tree View的一个快照到一个PNG文件中,点击View Hierarchy窗口顶部的Save As PNG。这个操作会显示一个对话框,你可以选择一个目录和文件名。

    要保存你的设备或模拟器的层次结构快照到一个Adobe Photoshop(PSD)文件,点击View Hierarchy窗口顶部的Capture Layers。这个操作会显示一个对话框,你可以选择一个目录货文件名。UI中的每个View都会作为一个单独的Photoshop层存储。

    在Photoshop中(或类似处理.psd文件的程序),你可以隐藏,显示或编辑一个层,而独立于其他的。当你要保存一个层次快照,你可以检查和修改每个单独View对象的图像。这个帮助你试验设计改变。

  • 右上角的窗格显示Tree Overview,一个代表整个Tree View窗口的小地图。使用Tree OverView来标识view tree的哪部分在Tree View中显示。

    你也可以使用Tree OverView来在Tree View窗格来回移动。点击并拖拽阴影矩形覆盖一个区域来在Tree View中显示。

  • 右中部的窗格显示Properties View,一个选中View对象的属性列表。通过Properties View,你可以检查所有属性,而不用查看你的应用源码。

    属性按类分组。要查找一个单独的属性,点击左边的箭头展开一个分类名称。这个操作会显示这个分类的所有属性。

  • 右下角的窗格显示Layout View,一块内容来代表UI。Layout View是另一种方式来导航UI。当你在Tree View中点击一个View对象,UI中它的位置会高亮。相反地,当你点击Layout View中的一块区域,Tree View中对应该区域的View对象会高亮。

    Layout View中块的轮廓颜色提供额外的信息:

    • 粗红色:这个块代表当前在Tree View中被选中的View
    • 浅红色:这个块代表粗红色轮廓的块的父View
    • 白色:这个块代表一个可视View,但不是当前TreeView中被选中View的父View或子View。

当前Activity的UI改变,View Hierarchy窗口不会自动刷新。要刷新它,点击窗口顶部的Load View Hierarchy

同样,当切换到一个新的Activity时窗口也不会更新。要更新它,先点击窗口左下角的窗口选择图标。这个操作会导航回到Window Selection窗口。在这个窗口,点击新Activity的Android组件名然后点击窗口顶部的Load View Hierarchy

下图是View Hierarchy窗口的快照。

处理Tree View中的单独View

Tree View中的每个几点代表一个单独的View。一些信息总是可见的。首先在节点的顶部,你可以看到以下信息:

  1. View类:View对象的类
  2. View对象地址:View对象的指针。
  3. View对象ID: adnroid:id 属性的值。
  4. 性能指示器:一组三个颜色的点指示这个View相对于树中其它View对象的渲染速度。这三个点(从左到右)代表渲染的测量,布局和描绘时间。

    颜色标示下面相关的性能:

    • 绿色:这部分的渲染时间,这个View在树中所有View对象最快的50%中。例如,一个绿色点的测量时间意味着这个View的测量时间比这个树中的50%View对象快。
    • 黄色:这部分的渲染时间,这个View在树中所有View对象最慢的50%中。例如,一个黄色点的布局时间意味着这个View的布局时间比这个树中的50%View对象慢。
    • 红色:这部分的渲染时间,这个View是树中最慢的一个。例如,一个红色点的描绘时间意味着这个View在这个树中的所有View对象中是花费最多时间来描绘的。
  5. View索引:在它的父View中的从零开始的索引。如果它是唯一的子View,则为0。

当你选中一个节点,这个view的额外的信息出现在该节点上的一个小窗口中。当你点击其中一个节点,你可以看到下面信息:

  • 图像:这个View的真实图像,它会在模拟器中出现。如果这个View有子View,这里也会显示。
  • View数目:这个几点代表的View对象数目。这个包括View本身和它子View的数量。例如,一个该值为4的View有3个子View。
  • 渲染时间:这个View渲染的实际的测量,布局和描绘时间,以毫秒为单位。这些代表着与前面部分提及的性能指示器相同的值。

下图显示了在TreeView中一个单独节点的注释快照。

使用View Hierarchy调试

View Hierarchy窗口通过提供一个静态UI显示帮助你调试应用。这个显示从你的应用打开屏幕开始。当你单步执行应用时,显示会保持不变直到你通过使其无效和请求这个View的布局来重绘它。

要在显示中重绘一个View的步骤:

  • 在TreeView中选择一个View。当你移动到树的根(在Tree View的左边),你可以看到最高级View对象。重绘一个高级对象通常强制低级对象也被重绘。
  • 点击窗口顶部的Invalidate。这个操作会标记View失效,并安排它在下一个请求布局时间点重绘。
  • 点击Request Layout来请求布局。View和它的子View会被重绘,同时那些需要重绘的View对象也会重绘。

手动重绘一个View允许你观察View并当你进入代码断点时一次一步检查单独View对象的属性。

使用View Hierarchy优化

View Hierarchy也帮助你识别出缓慢渲染性能。你开始通过查看View节点的红色或黄色性能指示来识别缓慢的View对象。当你单步执行你的应用,你可以判断一个View是始终缓慢还是只在特定环境下缓慢。

记住缓慢的性能不是问题的重要证据,尤其对ViewGroup对象来说。有很多子View的View对象和复杂View对象渲染很慢。

View Hierarchy窗口也帮助你查找性能问题。仅仅通过查看每个View节点的性能指示器(那些点),你可以看到哪些View对象测量,布局和描绘最慢。从这里,你可以快速识别你首先应该查看的问题。

使用Pixel Perfect

Pixel Perfect是一个工具来检查像素属性和从设计图中布局UI。

关于Pixel Perfect窗口

Pixel Perfect显示了一个当前在模拟器或设备上可视屏幕的放大图像。在这里,你可以检查屏幕图像中单独像素的属性。你也可以使用Pixel Perfect窗口来帮助你基于位图设计布局你的应用UI。

要看到Pixel Perfect窗口,运行Hierarchy Viewer,然后点击设备窗口上方的Inspect Screenshot,Pixel Perfect窗口就会出现。在这里,你看到三个窗格:

  • View Object窗格:这是一个当前在设备或模拟器屏幕上可视的View对象的层级列表,包括你应用的View和系统生成的View。这些用想用它们的View类列出。要查看一个View对象子View的类名,点击它左边的箭头展开View。当你点击一个View,它在右边的Pixel Perfect窗格中的位置高亮。
  • Pixel Perfect Loupe窗格:这是放大的屏幕图像。它由一个网格覆盖,每个方块代表一个像素。点击方块查看一个像素的信息。它的颜色和X,Y坐标出现在窗格的底部。

    窗格中的洋红色十字与下一个窗格中的位置十字对应。它只会当你在下一个窗格中移动十字时移动。

    要缩放图像,使用窗格底部的Zoom条,或者使用鼠标滚轮。

    当你在Loupe窗格中选择一个像素,你可以在窗格的下面看到一下信息:

    • 像素样品:一个用与像素相同颜色填充的矩形。
    • HTML颜色代码:像素颜色对应的十六进制RGB代码。
    • RGB颜色值:像素颜色的红(R),绿(G),蓝(B)颜色值列表。每个值的范围是0-255.

      X和Y坐标:像素的坐标,以特定设备像素单元为单位。这个值从0开始,X=0在屏幕的左边,Y=0在顶部。

  • Pixel Perfect窗格:显示出现在模拟器中的当前可视屏幕。

    使用蓝绿色十字来粗定位。拖拽图像中的十字,Loupe中的十字也会相应移动。你也可以点击Pixel Perfect窗格中的点,十字会移动到那个点。

    在View Object窗格选中的View对象对应的图像会用一个框包裹来标识View对象在屏幕的位置。对于选中的对象,框是深红色的。兄弟和父View对象有一个浅红色框。既不是父也是不兄弟的View对象是白色框。

    布局框可以有其他矩形在它的里面和外面,每个都表示View的部分。一个紫色或绿色矩形标示View边界框。在布局框中的一个白色或黑色框代表padding,是View对象内容和它的边界框之间的距离。一个外面的白色或黑色矩形代表margins,是View边界框和相邻View对象之间的距离。如果布局背景是黑色,padding和margin框则是白色,反之亦然。

    你可以保存在Pixel Perfect中的屏幕图像为一个PNG文件。这个操作会产生一个当前屏幕的快照。要实现它,点击窗口顶部的Save as PNG。它会显示一个对话框,你可以选择文件的目录和文件名。

当你改变View对象或进入另一Activity,这些窗格不会自动刷新。要刷新Pixel Perfect窗格和Loupe pane,点击窗口顶部的Refresh Screenshot。这个操作会改变窗格,显示当前屏幕图像。你可能需要也刷新View Object窗格,点击窗口顶部的Refresh Tree来实现。

要在你调试时自动刷新窗格,在窗口的顶部设置Auto Refresh,然后用Loupe窗格底部的Refresh Rate条设置刷新频率。

使用Pixel Perfect覆盖

你经常基于一个设计位图图像来构造UI。Pixel Perfect窗口通过允许你加载位图作为屏幕图像的overlay帮助你与位图图像匹配View布局。

使用位图图像作为覆盖的步骤:

  • 在设备或模拟器启动你的应用并导航到你想操作UI的Activity。
  • 启动Hierarchy Viewer并导航到Pixel Perfect窗口。
  • 在窗口的顶部,点击Load Overlay,会打开一个对话框,提示加载图像文件。然后加载图像文件。
  • Pixel Perfect显示覆盖在Pixel Perfect窗格的屏幕图像上。位图图像左下角(X=0, Y=max value)会以屏幕最坐下的像素(X=0, Y=max screen)为锚。

    默认,覆盖有50%的透明度,允许你看到下面的屏幕图像。你可以使用Loupe窗格底部的Overlay:条调整透明度。

    同时默认的,覆盖没有显示在Loupe窗格。设置窗口顶部的Show in Loupe来显示。

当你保存屏幕图像作为一个PNG文件时,覆盖没有作为屏幕快照的一部分保存。

下图显示Pixel Perfect窗口的屏幕快照。

使用lint优化你的UI

Android lint让你分析定义应用UI的XML文件来发现视图层次的低性能。

从SDK工具16版本开始,Android layoutopt工具已经被lin工具替代。lint工具以类似layout的方式报告UI布局性能问题,并发现额外的问题。

原文链接:

http://developer.android.com/tools/debugging/debugging-ui.html

Android调试系列教程:

http://blog.csdn.net/doandkeep/article/details/45173475

时间: 2024-10-05 22:06:24

Optimizing Your UI——使用Hierarchy Viewer优化UI的相关文章

【转】【Android工具】被忽略的UI检视利器:Hierarchy Viewer

原文:http://blog.csdn.net/ddna/article/details/5527072 Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为hierarchyviewer.bat.它是Android自带的非常有用而且使用简单的工具,可以帮助我们更好地检视和设计用户界面(UI),绝对是UI检视的利器,但是好像很少有人提它,难道是因为太简单? 具体来说主要功能有2个: 从可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我们优

【Android工具】被忽略的UI检视利器:Hierarchy Viewer

Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为hierarchyviewer.bat.它是Android自带的非常有用而且使用简单的工具,可以帮助我们更好地检视和设计用户界面(UI),绝对是UI检视的利器,但是好像很少有人提它,难道是因为太简单? 具体来说主要功能有2个: 从可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我们优化布局设计: 结合debug帮助观察特定的UI对象进行invalidate和requestLayout操作

Android 布局优化工具Hierarchy Viewer的使用

网上已经有很多关于Hierarchy Viewer如何使用的文章,这里就不一步步的演示具体怎样使用了,ddna兄的<[Android工具]被忽略的UI检视利器:Hierarchy Viewer>与张兴业的<Android UI 优化--使用HierarchyViewer工具>都写的很棒. Hierarchy Viewer有两个用途,一个是用于分析当前页面视图层级,再者也能分析布局的时间统计(Measrue.Layout.Draw)所需要的具体时间,本篇主要是关注布局时间的统计功能.

javascript动手写日历组件(2)——优化UI和添加交互(by vczero)

一.优化UI 继上一篇,http://www.cnblogs.com/vczero/p/js_ui_1.html.开始优化UI,主要优化的部分有: (1)增加星期行.(2)字体设置.(3)日期垂直居中.(4)将单元格->底部线条.(5)修改文本的颜色对比.(6)将内部调用的函数加前缀_,如_addHeader()._addWeekday(). 修改的后基本效果如下图: 整个代码做了小修小改: 1 var Calendar = function(div){ 2 this.div = documen

Android Studio学习随笔-UI线程阻塞以及优化

我们在使用手机的时候,经常会遇到一个问题:先是卡死,然后跳出该程序无响应,是否关闭的提示(当然有可能是我们手机性能太差=.=)这是因为线程的阻塞引起的,在这里我讲述一下UI线程,一般处理程序会在UI线程中执行耗时操作,这回导致UI线程阻塞,当UI线程阻塞,屏幕会出现卡死,用户体验会变得非常差,当线程阻塞超过5s,android系统可能进行干预,弹出对话框询问是否关闭.那如何解决呢? 解决方案一:创建一个新线程 我在UI视图中创建了一个button和一个textView Button button

安卓使用merge标签和include优化UI布局

转自:http://blog.sina.com.cn/s/blog_62f987620100sf13.html 单独将<merge />标签做个介绍,是因为它在优化UI结构时起到很重要的作用.目的是通过删减多余或者额外的层级,从而优化整个Android Layout的结构.核心功能就是减少冗余的层次从而达到优化UI的目的! 将通过一个例子来了解这个标签实际所产生的作用,这样可以更直观的了解<merge/>的用法. 建立一个简单的Layout,其中包含两个Views元素:ImageV

Javascript之UI线程与性能优化

在浏览器中,Javascript执行与UI更新是发生在同一个进程(浏览器UI线程)中的.UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到进程空闲时被提取出来执行.所以Javascript的执行会阻塞UI更新;反之,UI更新也会阻塞Javascript的执行.给用户的表现就是浏览器在工作时短暂或长时间失去反应,用户的操作不能及时得到响应.而UI线程的阻塞很多时候是由于我们要在代码里进行长时间的脚本运算,超过了浏览器限制,导致浏览器失去响应,冻结用户界面. 所以,编码时对于耗时较长的运

10 UI线程阻塞及其优化

1.button1移动30次的小动画: Ui_thread01Activity.java: public class Ui_thread01Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setCon

在Android Studio下使用Hierarchy Viewer

前言 最近看到这篇文章<Android UI性能优化详解>,里面使用了Hierarchy Viewer来对布局进行优化.开发android这么久了,一直都有听过这个工具,但是重来都没真正去使用过,不得不说是一种失败.现在刚好趁着空闲,研究一下Hierarchy Viewer的使用方法. 启动Android Device Monitor 网上搜索了教程,直接在sdk>tools下面找到hierarchyviewer.bat双击运行,然后运行成功了.但是出现这个提示: The standal