使用Hierarchy Viewer工具移除不必要的视图

原创 2015年11月21日 17:25:09

Hierarchy Viewer工具可以用来查看视图树(View Tree)并分析视图树中各个视图在测量、布局、绘制阶段所消耗的时间。通过该工具提供的信息,开发者可以找出视图树中那些不必要的视图以及性能瓶颈。在这个demo中,我们会分析查找并解决上述问题的方法。

为了演示这个demo,我创建了一个实验性质的应用程序,在该程序中显示几个执行比较慢的视图(指的是测量、布局、绘制三个过程比较慢的视图)。然后,我们会使用Hierarchy Viewer工具解决这个问题。本应用程序只有一个Activity。其界面和XML布局文件如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/hello"/>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.test.SlowMeasureView
            android:id="@+id/slow_measure"
            android:layout_width="fill_parent"
            android:layout_height="30dp"
            android:background="#00ff00"
            android:text="@string/slow_measure"/>

        <com.test.SlowLayoutView
            android:id="@+id/slow_layout"
            android:layout_width="fill_parent"
            android:layout_height="30dp"
            android:background="#0000ff"
            android:text="@string/slow_layout"/>

        <com.test.SlowDrawView
            android:id="@+id/slow_draw"
            android:layout_width="fill_parent"
            android:layout_height="30dp"
            android:background="#ff0000"
            android:text="@string/slow_draw"/>

    </LinearLayout>
</LinearLayout>

这里写图片描述

该应用程序只是对默认创建的应用程序做了一些小的改动。在布局底部添加了三个自定义视图并且移除了标题栏。该应用程序执行时,执行Hierarchy Viewer会看到如下图所示的结果。

这里写图片描述

在本例中,我们找到了一个TextView;此外,还可以找到一个包含所有自定义视图的LinearLayout,也即图中第二个LinearLayout。我们还可以看到第二个LinearLayout中有3个用红色显示的性能指示器,表示该LinearLayout是视图树中执行最慢的视图。我们可以删除该LinearLayout。修改后的XML布局文件如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/hello" />

    <com.test.SlowMeasureView
        android:id="@+id/slow_measure"
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:background="#00ff00"
        android:text="@string/slow_measure" />

    <com.test.SlowLayoutView
        android:id="@+id/slow_layout"
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:background="#0000ff"
        android:text="@string/slow_layout" />

    <com.test.SlowDrawView
        android:id="@+id/slow_draw"
        android:layout_width="fill_parent"
        android:layout_height="30dp"
        android:background="#ff0000"
        android:text="@string/slow_draw" />

</LinearLayout>

最终的修改方案减少了一个视图节点,降低了视图树的高度。创建视图时,一定要避免产生过高的视图树。Android绘制布局由两次遍历过程组成:测量过程和布局过程。如果视图树有太多节点,遍历该树就会消耗更长时间。

修改XML布局文件生成较低的视图树层次后,一定要看看性能指示器。性能指示器显示的是当前视图与视图树中其他视图相比的相对结果,因此不要被结果蒙蔽。大部分性能指示器显示绿色并不表示这些视图一定是合理的,此时需要检查绘制每个视图花费的时间并确保一切运行良好。

Hierarchy Viewer工具是查看视图树的强大工具。开发应用程序时,使用该工具分析视图树的层次结构,确保当前布局能生成响应灵敏的UI界面并且使用了最低的树层次。

代码地址

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android之GPU过度绘制与图形渲染优化——Hierarchyviewer时间不显示

凡是开始接触或接触过Android图形渲染优化的童鞋肯定对 hierarchyviewer 这个工具不陌生。Hierarchy Viewer工具用来显示UI布局的层级关系。如下图: Hierarch...
  • u010255127
  • u010255127
  • 2015年08月18日 22:40
  • 1555

Android Studio上使用可视化调试工具Hierarchy Viewer

在布局优化中,我们可以通过可视化调试工具Hierarchy Viewer,查看我们整个的布局情况。下面讲解如何在Android Studio上使用可视化调试工具Hierarchy Viewer。 一...
  • CDW_WY
  • CDW_WY
  • 2016年11月20日 15:07
  • 3470

Android 中性能优化工具之Hierarchy Viewer使用总结

概述Hierarchy Viewer提供了一个可视化的界面来观测布局的层级, 让我们可以优化布局层级, 删除多余的不必要的View层级, 提升布局速度.应用Hierarchy Viewer目前Hier...
  • yuminfeng728
  • yuminfeng728
  • 2016年09月23日 16:54
  • 2024

如何使用HierarchyViewer分析优化布局

为什么使用HierarchyViewer     不合理的布局会使我们的应用程序UI性能变慢,HierarchyViewer能够可视化的角度直观地获得UI布局设计结构和各种属性的信息,帮助我...
  • junjianzhang
  • junjianzhang
  • 2015年12月23日 11:46
  • 810

Unity3d 学习界面 之 层级视图 (Hierarchy)(二)

感谢点评与关注,欢迎转载与分享。 勤奋努力,持之以恒! 出自Unity3d官网学习文档:http://edu.china.unity3d.com/learning_document 在这...
  • song_hui_xiang
  • song_hui_xiang
  • 2014年04月12日 22:30
  • 9359

【android】查看软件布局神器Hierarchy Viewer

可以直接在eclipse的devices视图点击
  • u011494050
  • u011494050
  • 2014年08月07日 00:04
  • 6265

android HierarchyViewer查看视图层级关系

今天看到一篇文章,讲的是UI过度绘制,导致一些性能问题。
  • skycnlr
  • skycnlr
  • 2017年03月28日 18:45
  • 2589

使用Hierarchy Viewer分析优化布局性能

Hierachy Viewer基础知识
  • guchuanhang
  • guchuanhang
  • 2016年04月04日 09:54
  • 1261

Android可视化调试工具Hierarchy Viewer的使用

Android的SDK工具包中,有很多十分有用的工具,可以帮助程序员开发和测试Android应用程序,大大提高其工作效率。其中的一款叫Hierachy Viewer的可视化调试工具,可以很方便地帮...
  • yang19910524
  • yang19910524
  • 2015年03月29日 10:50
  • 2008

性能优化十一之Hierarchy Viewer工具使用

上一篇博客说了要补充Hierarchy Viewer工具的使用,其实这个工具的使用方法相比前几个工具的使用要简单很多。 1.  打开AndroidDevice Monitor 2.切换视图 ...
  • hpc19950723
  • hpc19950723
  • 2016年12月23日 20:28
  • 486
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用Hierarchy Viewer工具移除不必要的视图
举报原因:
原因补充:

(最多只允许输入30个字)