Android UI学习 - FrameLayou和布局优化

Ebric 2011-08-15

展开全文

F rameLayout

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

我的理解是，把FrameLayout 当作画布 canvas ，固定从屏幕的左上角开始填充图片，文字等。看看示例，原来可以利用 android:layout_gravity 来设置位置的：

1 <?xml version="1.0" encoding="utf-8"?>

2 <FrameLayout

3 xmlns:android="http://schemas./apk/res/android"

4 android:layout_width="fill_parent"

5 android:layout_height="fill_parent" >

7 <ImageView

8 android:id="@+id/image"

9 android:layout_width="fill_parent"

10 android:layout_height="fill_parent"

11 android:scaleType="center"

12 android:src="@drawable/candle"

13 />

14 <TextView

15 android:id="@+id/text1"

16 android:layout_width="wrap_content"

17 android:layout_height="wrap_content"

18 android:layout_gravity="center"

19 android:textColor="#00ff00"

20 android:text="@string/hello"

21 />

22 <Button

23 android:id="@+id/start"

24 android:layout_width="wrap_content"

25 android:layout_height="wrap_content"

26 android:layout_gravity="bottom"

27 android:text="Start"

28 />

29 </FrameLayout>

效果图

布局优化

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

<merge> 减少视图层级结构

从上图可以看到存在两个FrameLayout ，红色框住的。如果能在 layout 文件中把 FrameLayout 声明去掉就可以进一步优化布局代码了。但是由于布局代码需要外层容器容纳，如果

直接删除FrameLayout 则该文件就不是合法的布局文件。这种情况下就可以使用 <merge> 标签了。

修改为如下代码就可以消除多余的FrameLayout 了：

30 <?xml version="1.0" encoding="utf-8"?>

31 <merge xmlns:android="http://schemas./apk/res/android" >

32 <ImageView

33 android:id="@+id/image"

34 android:layout_width="fill_parent"

35 android:layout_height="fill_parent"

36 android:scaleType="center"

37 android:src="@drawable/candle"

38 />

39 <TextView

40 android:id="@+id/text1"

41 android:layout_width="wrap_content"

42 android:layout_height="wrap_content"

43 android:layout_gravity="center"

44 android:textColor="#00ff00"

45 android:text="@string/hello"

46 />

47 <Button

48 android:id="@+id/start"

49 android:layout_width="wrap_content"

50 android:layout_height="wrap_content"

51 android:layout_gravity="bottom"

52 android:text="Start"

53 />

54 </merge>

<merge>也有一些使用限制：只能用于xml layout 文件的根元素；在代码中使用LayoutInflater.Inflater() 一个以merge 为根元素的

布局文件时候，需要使用 View inflate (int resource, ViewGroup root, boolean attachToRoot) 指定一个ViewGroup 作为其容器，并且要设置 attachToRoot 为 true 。

<include> 重用 layout 代码

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

55 <?xml version="1.0" encoding="utf-8"?>

56 <LinearLayout xmlns:android="http://schemas./apk/res/android"

57 android:orientation="vertical"

58 android:layout_width="fill_parent"

59 android:layout_height="fill_parent">

61 <include android:id="@+id/layout1" layout="@layout/relative" />

62 <include android:id="@+id/layout2" layout="@layout/relative" />

63 <include android:id="@+id/layout3" layout="@layout/relative" />

65 </LinearLayout>

效果图

这里要注意的是， "@layout/relative" 不是引用Layout 的 id ，而是引用 res/layout/relative.xml ，其内容是前面文章介绍 RelativeLayout 的布局代码。

另外，通过<include> ，除了可以覆写 id 属性值，还可以修改其他属性值，例如 android:layout_width ，android:height 等。

<viewstub> 延迟加载

(转自 http://rainhomepage./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 属性来重新定义引用的 layout id 。例如：

66 <ViewStub android:id="@+id/stub"

67 android:inflatedId="@+id/subTree"

68 android:layout="@layout/mySubTree"

69 android:layout_width="120dip"

70 android:layout_height="40dip" />

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