Android UI学习 - FrameLayou和布局优化

F rameLayout

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

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

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

2  <FrameLayout 

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

4    android:layout_width="fill_parent" 

5    android:layout_height="fill_parent" > 

6   

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.android.com/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.android.com/apk/res/android" 

57      android:orientation="vertical" 

58      android:layout_width="fill_parent" 

59      android:layout_height="fill_parent"> 

60           

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" /> 

64   

65  </LinearLayout> 

效果图

     这里要注意的是， "@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 属性来重新定义引用的 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 高的地方。 

 

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

71  ViewStub stub = (ViewStub) findViewById(R.id.stub); 

72  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

 

本文出自 “ 学习Android ” 博客，请务必保留此出处 http://android.blog.51cto.com/268543/308090