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

原文:http://blog.csdn.net/ddna/article/details/5527072

Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为hierarchyviewer.bat。它是Android自带的非常有用而且使用简单的工具,可以帮助我们更好地检视和设计用户界面(UI),绝对是UI检视的利器,但是好像很少有人提它,难道是因为太简单?

具体来说主要功能有2个:

  1. 从可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我们优化布局设计;
  2. 结合debug帮助观察特定的UI对象进行invalidate和requestLayout操作的过程。
  1. 基本使用方法

(1)hierarchyviewer的使用非常简单,启动模拟器或者连接上真机后,启动hierarchyviewer.bat,会看到下面的界面,Devices里列出了可以观察的设备,Windows里列出的是当前选中的设备的可以用来显示View结构的Window:

选中某个想要观察的Window,比如上面列出的com.android.launcher/com.android.launcher.Launcher项,然后点击菜单栏的Load View Hierarchy,就进入Layout View,由于要解析相关Window,所以这个过程要几秒钟,左边列出的是当前窗口的树型布局结构图,右边列出的是当前选中的某个子View的属性信息和在窗口中的位置:

需要注意的是:Layout View列出的View结构是从视图的根节点开始的,比如针对Launcher使用的layout,它的底层基础布局DragLayer实际上是放在一个FrameLayout里的,该FrameLayout又是被PhoneWindow的DecorView管理的。

(2)点击界面左下角类似九宫格的按钮,就进入了Android称之为Pixel Perfect View的界面,这个界面里主要是从细节上观察UI效果:

左边是浏览视图,中间是全局的视图,右边是当前关注的地方的细节放大,是像素级别的,对于观察细节非常有用。

Refresh Rate用来控制View多久从模拟器或者真机上更新一次视图数据。

Zoom就是放大局部细节用的,细节显示在最右边的视图上。

Overlay比较有意思,主要用来测试在当前视图上加载新的图片后的效果,点击Load…选择图片后,可以控制在当前界面上显示的透明读,滑动0%~100%的控件即可。如果选择了Show in Loupe,右侧的放大视图也会将加载的图片的细节结合着透明度显示出来。不过目前这个Overlay做的比较简单,合成的图只能从界面的左下角为原点画出来,不能移动。

(3)在Layout View中,选中一个view的图示,点击工具栏的Display View,就可以看到这个view的实际显示效果,可以点选Show Extras,这个功能也比较实用,可以显示出该View中不同元素显示的边界,帮助我们检查是否正确。

2.       Hierarchyviewer的invalidate和requestLayout功能

对于Android的UI来说,invalidate和requestLayout是最重要的过程,Hierarchyviewer提供了帮助我们Debug特定的UI执行invalidate和requestLayout过程的途径,方法很简单,只要选择希望执行这两种操作的View点击按钮就可以。当然,我们需要在例如onMeasure()这样的方法中打上断点。这个功能对于UI组件是自定义的非常有用,可以帮助单独观察相关界面显示逻辑是否正确。

时间: 2024-12-16 14:31:50

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

【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)所需要的具体时间,本篇主要是关注布局时间的统计功能.

Android:一个高效的UI才是一个拉风的UI(二)

趁今晚老大不在偷偷早下班,所以有时间继续跟大伙扯扯UI设计之痛,也算一个是对上篇<Android:一个高效的UI才是一个拉风的UI(一)>的完整补充吧.写得不好的话大家尽管拍砖~(来!砸死我把~) 前言 前篇博客翻箱倒柜的介绍了优化UI设计的两个方法,第一个就是使用尽量少的组件来实现布局功能,第二个就是使用<meger>标签来减少不必要的根节点,这两个方法都可以提高应用UI的运行效率,但是够了吗?远远是不够的,方法就像money一样永远不嫌多,所以不再介绍多一些UI设计优化的方法说

xUtils - android工具库 afinal 替代品

https://github.com/wyouflf/xUtils (afinal 是国人的作品,xUtils是根据afinal 修改的,也是 国人的作品) xUtils.  顾名思义,它是一个工具库. xUtils简介 xUtils 包含了很多实用的android工具. xUtils 源于Afinal框架,对Afinal进行了适当的精简,和一些适度的扩展和重构. xUtils 具有Afinal的一些特性如:无需考虑bitmap在android中加载的时候oom的问题和快速滑动的时候图片加载位置

Android 实用工具Hierarchy Viewer实战

在Android的SDK工具包中,有很多十分有用的工具,可以帮助程序员开发和测试Android应用程序,大大提高其工作效率.其中的一款叫Hierachy Viewer的可视化调试工具,可以很方便地在开发者设计,调试和调整界面时,提高用户的开发效率.本文将以一个实际例子讲解如何使用该款工具运用在Android的开发过程中.本文的读者对象为具备初步Android知识的用户. 步骤1 设计界面 在我们的这个例子中,有三个不同的界面,以方便我们演示使用Hierarchy Viewer.每一个界面都使用了

Android性能调优篇之Hierarchy Viewer工具的使用

详细内容请查看我的简书地址:Android性能调优篇之Hierarchy Viewer工具的使用 或者我的个人博客地址:Android性能调优篇之Hierarchy Viewer工具的使用

Android工具draw9patch使用点.9.png图片制作

Android工具draw9patch使用点.9.png图片制作(原文) @Author : Dolphix.J Qing 本文将以示例的形式,讲解QQ聊天气泡.9.png图片的制作过程 1 手机截屏 发送空消息体->截屏聊天界面->截取聊天气泡. 2 透明.png制作 在线ps->选择电脑已存在图->Ctrl+J(复制背景图层,并新建图层)->魔棒工具->(Delete)删除不要图色-> 解锁背景图层,并删除->保存新图层到电脑(即为透明.png) 3 制

Android之十二微信UI界面设计

Android之十二微信UI界面设计 corners_bg.xml <span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color=&qu

Android Material Design带来的UI变革

谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点. 谷歌I/O 014开发者大会上宣布全新的设计语言"Material Design",适用于旗下所有平台,包括 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点." Material Design 初