Android中UI布局的优化和HierarchyViewer工具的是使用

转载请注明出处：http://blog.csdn.net/xiaohao0724/article/details/45059257

几乎每个Android app都需要在XML里面定义布局，那么我们在写布局的时候有什么需要注意的地方呢？不合理的布局会使我们的App加载UI界面变慢。Hierarchy Viewer就是Android自带的一个检验UI布局结构的可视化工具。

一、HierarchyViewer工具的使用

首先我们新建一个工程WidgetHierarchy，在MainActivity加载的activity_main.xml布局中设置如下代码并把工程运行到手机上如下图：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    tools:context="com.havorld.widgethierarchy.MainActivity" >

    <ImageView
        android:id="@+id/appIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/icon" />

    <TextView
        android:id="@+id/appName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/appIcon"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:gravity="center"
        android:text="@string/app_name" />

</RelativeLayout>

视图效果1

然后在我们android-sdk目录下找到hierarchyviewer.bat批处理文件

我电脑的目录结构是：D:\java\android-sdk\tools\hierarchyviewer.bat，然后双加打开Hierarchy Viewer可视化界面如下图：

上方有两个按钮
①Load View Hierarchy :  可以查看界面的控件层次
②Inspect Screenshot :  进入界面精确查看模式

我们点击①Load View Hierarchy进入控件视图层级，就可以查看各个控件的上下级结构了

层级区域共有四块：

①左侧一大块是显示界面控件的层次结构，称之为主窗口。
②右上方是以缩略图的方式显示整个应用中的各控件的层次关系。
③右边区域的中间部分，显示的每个控件的具体属性，是控件的属性面版。
④右下角部分的区域，显示出用户所点的控件，在界面中的具体位置，会用红色部分标出，方便用户辨识。

然后就可以在主窗口中点击具体的某个控件来查看该控件的属性了，如Measure、Layout、Draw各个的耗时时间

视图中ImageView和TextView右下角的"0"和"1"分别表示ImageView和TextView是RelativeLayout布局中的第一个控件和第二个控件。

视图中ImageView和TextView底部的三个实心圆分别代表控件Measure、Layout、Draw的耗时情况

绿色：表示该控件在该阶段比起其他50%的控件的速度要快，

黄色：表示比起其他的50%的控件的速度要慢

红色：表示该控件在该阶段的处理速度是最慢的

二、UI布局的优化

控件布局是一层一层去渲染的，所以层级越少绘制的时间也越少UI渲染的效率越高界面越流畅。

1、尽量使用Android自带属性完成的布局，如不能实现然后再考虑使用多个控件组合实现

首先让我们来看看上述我们布局的层级结构

我们先来看看我们的工程在RelativeLayout 中加载上述视图效果1的层级关系

上述可见我们用了三个View节点完成上述效果

然后我们更换控件实现上述视图效果1，查看RelativeLayout 的层级关系

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.havorld.widgethierarchy.MainActivity" >

    <TextView
        android:id="@+id/appName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawablePadding="20dp"
        android:drawableTop="@drawable/icon"
        android:gravity="center_horizontal"
        android:text="@string/app_name" />

</RelativeLayout>

上述可见我们用了两个View节点完成上述效果

二、合理使用减少层级标签merge

merge经常和include标签一起使用在include的root布局中使用merge

把上述RelativeLayout 换成merge，然后查看其层级关系

上述可见我们用了一个View节点直接渲染出上述效果

三、合理使用ViewStub标签

ViewStub标签最大的优点是当你需要时才会加载，使用他并不会影响UI初始化时的性能。各种不常用的布局像请求网络错误显示、进度条等可以使用<ViewStub />标签减少内存使用量，加快渲染速度。

    <ViewStub
        android:id="@+id/net_tip"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout="@layout/net_tips_layout" />

代码中调用：

//此时没有去加载控件也没有渲染
ViewStub viewStub = (ViewStub) findViewById(R.id.net_tip);
//在需要显示是调用，此时去渲染控件
RelativeLayout root = (RelativeLayout) viewStub.inflate();

四、合理使用布局重用标签include

<include 
	android:id="@+id/rl_head"
	layout="@layout/head"/>

如果include中的id和layout中定义的id有相同的，则layout中的id将会被覆盖