Android UI 使用Merge,include和 ViewStub优化(1)

原文出处：http://blog.csdn.net/hmg25/article/details/6203130

FrameLayout 先来看官方文档的定义：FrameLayout是最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象 — 比如，一张你要发布的图片。所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部份或全部挡住（除非后一个子元素是透明的）。
我的理解是，把FrameLayout当作画布canvas，固定从屏幕的左上角开始填充图片，文字等。看看示例，原来可以利用 android:layout_gravity来设置位置的：

FrameLayout的布局结构

 1 01    <?xml
 2 02    version="1.0"
 3 03    encoding="utf-8"?>
 4 04     
 5 05    <FrameLayout
 6 06    xmlns:android="http://schemas.android.com/apk/res/android"
 7 07    android:layout_width="fill_parent"
 8 08    android:layout_height="fill_parent"
 9 09    >
10 10     
11 11    <ImageView
12 12    android:id="@+id/image"
13 13    android:layout_width="fill_parent"
14 14    android:layout_height="fill_parent"
15 15    android:scaleType="center"
16 16    android:src="@drawable/candle"
17 17    />
18 18    <TextView
19 19    android:id="@+id/text1"
20 20    android:layout_width="wrap_content"
21 21    android:layout_height="wrap_content"
22 22    android:layout_gravity="center"
23 23    android:textColor="#00ff00"
24 24    android:text="@string/hello"
25 25    />
26 26    <Button
27 27    android:id="@+id/start"
28 28    android:layout_width="wrap_content"
29 29    android:layout_height="wrap_content"
30 30    android:layout_gravity="bottom" android:text="Start"
31 31    />
32 32    </FrameLayout>

效果图

布局优化使用tools里面的hierarchyviewer.bat来查看layout的层次。在启动模拟器启动所要分析的程序，再启动hierarchyviewer.bat，选择模拟器以及该程序，点击“Load View Hierarchy”，就会开始分析。可以save as png。

<merge> 减少视图层级结构
从上图可以看到存在两个FrameLayout，红色框住的。如果能在layout文件中把FrameLayout声明去掉就可以进一步优化布局代码了。但是由于布局代码需要外层容器容纳，如果
直接删除FrameLayout则该文件就不是合法的布局文件。这种情况下就可以使用<merge> 标签了。
修改为如下代码就可以消除多余的FrameLayout了：

使用merge优化的布局

 1 01    <?xml
 2 02    version="1.0"
 3 03    encoding="utf-8"?>
 4 04     
 5 05    <merge xmlns:android="http://schemas.android.com/apk/res/android">
 6 06    <ImageView
 7 07    android:id="@+id/image"
 8 08    android:layout_width="fill_parent"
 9 09    android:layout_height="fill_parent"
10 10    android:scaleType="center"
11 11    android:src="@drawable/candle"
12 12    />
13 13    <TextView
14 14    android:id="@+id/text1"
15 15    android:layout_width="wrap_content"
16 16    android:layout_height="wrap_content"
17 17    android:layout_gravity="center"
18 18    android:textColor="#00ff00"
19 19    android:text="@string/hello"
20 20    />
21 21    <Button
22 22    android:id="@+id/start"
23 23    android:layout_width="wrap_content"
24 24    android:layout_height="wrap_content"
25 25    android:layout_gravity="bottom"
26 26    android:text="Start"
27 27    />
28 28    </merge>

<merge>也有一些使用限制：只能用于xml layout文件的根元素；在代码中使用LayoutInflater.Inflater()一个以merge为根元素的
布局文件时候，需要使用View inflate (int resource, ViewGroup root, boolean attachToRoot)指定一个ViewGroup 作为其容器，并且要设置attachToRoot 为true。

<include> 重用layout代码
如果在某个布局里面需要用到另一个相同的布局设计，可以通过<include> 标签来重用layout代码：

使用include优化的布局文件

 1 01    <?xml
 2 02    version="1.0"
 3 03    encoding="utf-8"?>
 4 04     
 5 05    <LinearLayout
 6 06    xmlns:android="http://schemas.android.com/apk/res/android"
 7 07    android:orientation="vertical"
 8 08    android:layout_width="fill_parent"
 9 09    android:layout_height="fill_parent">
10 10     
11 11    <include
12 12    android:id="@+id/layout1"
13 13    layout="@layout/relative"
14 14    />
15 15    <include
16 16    android:id="@+id/layout2"
17 17    layout="@layout/relative"
18 18    />
19 19    <include
20 20    android:id="@+id/layout3"
21 21    layout="@layout/relative"
22 22    />
23 23     
24 24    </LinearLayout>
25

效果图

这里要注意的是，"@layout/relative"不是引用Layout的id，而是引用res/layout/relative.xml，其内容是前面文章介绍RelativeLayout的布局代码。
另外，通过<include>，除了可以覆写id属性值，还可以修改其他属性值，例如android:layout_width，android:height等。

<viewstub> 延迟加载
(转自http://rainhomepage.appspot.com/2010/01/use-viewstub-to-optimize-the-layout-of)

ViewStub 是一个不可见的，大小为0的View，最佳用途就是实现View的延迟加载，在需要的时候再加载View，可Java中常见的性能优化方法延迟加载一样。

当调用ViewStub的setVisibility函数设置为可见或则调用 inflate初始化该View的时候，ViewStub引用的资源开始初始化，然后引用的资源替代ViewStub自己的位置填充在ViewStub的位置。因此在没有调用setVisibility(int) 或则 inflate()函数之前 ViewStub一种存在组件树层级结构中，但是由于ViewStub非常轻量级，这对性能影响非常小。可以通过ViewStub的inflatedId属

ViewStub优化布局

1 1    <ViewStub
2 2    android:id="@+id/stub"
3 3     
4 4    android:inflatedId="@+id/subTree"
5 5    android:layout="@layout/mySubTree"
6 6    android:layout_width="120dip"
7 7    android:layout_height="40dip"
8 8    />

性来重新定义引用的layout id。例如：

上面定义的ViewStub ，可以通过id “stub”来找到，在初始化资源“mySubTree”后，stub从父组件中删除，然后"mySubTree"替代stub的位置。初始资源"mySubTree"得到的组件可以通过inflatedId 指定的id "subTree"引用。然后初始化后的资源被填充到一个120dip宽、40dip高的地方。

推荐使用下面的方式来初始化ViewStub：

viewstub的使用

1    ViewStub stub = (ViewStub) findViewById(R.id.stub);
2    View inflated = stub.inflate();

当调用inflate()函数的时候，ViewStub 被引用的资源替代，并且返回引用的view。这样程序可以直接得到引用的view而不用再次调用函数 findViewById()来查找了。

ViewStub目前有个缺陷就是还不支持 <merge /> 标签。

layoutopt (Layout Optimization工具)
这工具可以分析所提供的Layout，并提供优化意见。在tools文件夹里面可以找到layoutopt.bat。
用法：
layoutopt <list of xml files or directories>
参数：
一个或多个的Layout xml文件，以空格间隔；或者多个Layout xml文件所在的文件夹路径
例子：
layoutopt G:/StudyAndroid/UIDemo/res/layout/main.xml
layoutopt G:/StudyAndroid/UIDemo/res/layout/main.xml G:/StudyAndroid/UIDemo/res/layout/relative.xml
layoutopt G:/StudyAndroid/UIDemo/res/layout