[译]Android UI 优化收藏

有一句古话：不论黑猫白猫，能抓到耗子就是好猫。这个也许在某些方面是有道理的，但对于我们追求精益求精的思想是背道而驰的，往往就是因为满足于一个结果，而放弃探求更加优化的处理方法。

当关注应用程序或者游戏所达到的结果时，往往非常容易忽视一些优化的问题，例如内存优化，线程优化，Media优化和UI优化等等。不同的模块都存在更为巧妙的方式来对待一般性问题，所以每当我们实现一个行为后，稍微多花一些时间来考虑目前所作的工作是否存在更为高效的解决办法。

这一次我们对常用的UI Layout优化说起，这个例子转载于 android developing blog

在Android中最常用LinearLayout表示UI的框架，而且也是最直观和方便的方法。例如创建一个UI用于展现Item的基本内容。如图所示：

线框图：

直接可以通过LinearLayout快速的实现这个UI的排列：

1.   
2.  xmlns:  
3. 
     
4.     android  
5. ="http://schemas.android.com/apk/res/android"  
6.   
7. 
     
8.     android:layout_width  
9. ="fill_parent"  
10.   
11. 
      
12.     android:layout_height  
13. ="?android:attr/listPreferredItemHeight"  
14.   
15. 
      
16.  
      
17.     android:padding  
18. ="6dip"  
19. >  
20.   
21. 
      
22.  
      
23.       
24.   
25. 
      
26.         android:id  
27. ="@+id/icon"  
28.   
29. 
      
30.         android:layout_width  
31. ="wrap_content"  
32.   
33. 
      
34.         android:layout_height  
35. ="fill_parent"  
36.   
37. 
      
38.         android:layout_marginRight  
39. ="6dip"  
40.   
41. 
      
42.  
      
43.         android:src  
44. ="@drawable/icon"  
45.  />  
46.   
47. 
      
48.  
      
49.       
50.   
51. 
      
52.         android:orientation  
53. ="vertical"  
54.   
55. 
      
56.         android:layout_width  
57. ="0dip"  
58.   
59. 
      
60.         android:layout_weight  
61. ="1"  
62.   
63. 
      
64.         android:layout_height  
65. ="fill_parent"  
66. >  
67.   
68. 
      
69.  
      
70.           
71.   
72. 
      
73.             android:layout_width  
74. ="fill_parent"  
75.   
76. 
      
77.             android:layout_height  
78. ="0dip"  
79.   
80. 
      
81.             android:layout_weight  
82. ="1"  
83.   
84. 
      
85.  
      
86.             android:gravity  
87. ="center_vertical"  
88.   
89. 
      
90.             android:text  
91. ="My Application"  
92.  />  
93.   
94. 
      
95.  
      
96.           
97.     
98. 
      
99.             android:layout_width  
100. ="fill_parent"  
101.   
102. 
       
103.             android:layout_height  
104. ="0dip"  
105.   
106. 
       
107.             android:layout_weight  
108. ="1"  
109.    
110. 
       
111.  
       
112.             android:singleLine  
113. ="true"  
114.   
115. 
       
116.             android:ellipsize  
117. ="marquee"  
118.   
119. 
       
120.             android:text  
121. ="Simple application that shows how to use RelativeLayout"  
122.  />  
123.   
124. 
       
125.  
       
126.     >  
127.   
128.   
129. 
       
130.  
       
131. >  
132.   
133.   

                android            ="http://schemas.android.com/apk/res/android"                        
                android:layout_width            ="fill_parent"                        
                android:layout_height            ="?android:attr/listPreferredItemHeight"                        
             
                android:padding            ="6dip"            >                        
             
                                android:id            ="@+id/icon"                        
                    android:layout_width            ="wrap_content"                        
                    android:layout_height            ="fill_parent"                        
                    android:layout_marginRight            ="6dip"                        
             
                    android:src            ="@drawable/icon"            />                        
             
                                android:orientation            ="vertical"                        
                    android:layout_width            ="0dip"                        
                    android:layout_weight            ="1"                        
                    android:layout_height            ="fill_parent"            >                        
             
                                    android:layout_width            ="fill_parent"                        
                        android:layout_height            ="0dip"                        
                        android:layout_weight            ="1"                        
             
                        android:gravity            ="center_vertical"                        
                        android:text            ="My Application"            />                        
             
                                    android:layout_width            ="fill_parent"                        
                        android:layout_height            ="0dip"                        
                        android:layout_weight            ="1"                        
             
                        android:singleLine            ="true"                        
                        android:ellipsize            ="marquee"                        
                        android:text            ="Simple application that shows how to use RelativeLayout"            />                        
             
                                                
             
                                                

尽管可以通过Linearlayout实现我们所预想的结果，但是在这里存在一个优化的问题，尤其是针对为大量Items。比较RelativeLayout和LinearLayout，在资源利用上前者会占用更少的资源而达到相同的效果，以下是用RelativeLayout实现的代码：

1.   
2.  xmlns:android  
3. ="http://schemas.android.com/apk/res/android"  
4.   
5. 
     
6.     android:layout_width  
7. ="fill_parent"  
8.   
9. 
     
10.     android:layout_height  
11. ="?android:attr/listPreferredItemHeight"  
12.   
13. 
      
14.  
      
15.     android:padding  
16. ="6dip"  
17. >  
18.   
19. 
      
20.  
      
21.       
22.   
23. 
      
24.         android:id  
25. ="@+id/icon"  
26.   
27. 
      
28.  
      
29.         android:layout_width  
30. ="wrap_content"  
31.   
32. 
      
33.         android:layout_height  
34. ="fill_parent"  
35.   
36. 
      
37.  
      
38.         android:layout_alignParentTop  
39. ="true"  
40.   
41. 
      
42.         android:layout_alignParentBottom  
43. ="true"  
44.   
45. 
      
46.         android:layout_marginRight  
47. ="6dip"  
48.   
49. 
      
50.  
      
51.         android:src  
52. ="@drawable/icon"  
53.  />  
54.   
55. 
      
56.  
      
57.       
58.     
59. 
      
60.         android:id  
61. ="@+id/secondLine"  
62.   
63. 
      
64.  
      
65.         android:layout_width  
66. ="fill_parent"  
67.   
68. 
      
69.         android:layout_height  
70. ="26dip"  
71.    
72. 
      
73.  
      
74.         android:layout_toRightOf  
75. ="@id/icon"  
76.   
77. 
      
78.         android:layout_alignParentBottom  
79. ="true"  
80.   
81. 
      
82.         android:layout_alignParentRight  
83. ="true"  
84.   
85. 
      
86.  
      
87.         android:singleLine  
88. ="true"  
89.   
90. 
      
91.         android:ellipsize  
92. ="marquee"  
93.   
94. 
      
95.         android:text  
96. ="Simple application that shows how to use RelativeLayout"  
97.  />  
98.   
99. 
      
100.  
       
101.       
102.   
103. 
       
104.         android:layout_width  
105. ="fill_parent"  
106.   
107. 
       
108.         android:layout_height  
109. ="wrap_content"  
110.   
111. 
       
112.  
       
113.         android:layout_toRightOf  
114. ="@id/icon"  
115.   
116. 
       
117.         android:layout_alignParentRight  
118. ="true"  
119.   
120. 
       
121.         android:layout_alignParentTop  
122. ="true"  
123.   
124. 
       
125.         android:layout_above  
126. ="@id/secondLine"  
127.   
128. 
       
129.         android:layout_alignWithParentIfMissing  
130. ="true"  
131.   
132. 
       
133.  
       
134.         android:gravity  
135. ="center_vertical"  
136.   
137. 
       
138.         android:text  
139. ="My Application"  
140.  />  
141.   
142. 
       
143.  
       
144. >  
145.   
146.   

                android:layout_width            ="fill_parent"                        
                android:layout_height            ="?android:attr/listPreferredItemHeight"                        
             
                android:padding            ="6dip"            >                        
             
                                android:id            ="@+id/icon"                        
             
                    android:layout_width            ="wrap_content"                        
                    android:layout_height            ="fill_parent"                        
             
                    android:layout_alignParentTop            ="true"                        
                    android:layout_alignParentBottom            ="true"                        
                    android:layout_marginRight            ="6dip"                        
             
                    android:src            ="@drawable/icon"            />                        
             
                                android:id            ="@+id/secondLine"                        
             
                    android:layout_width            ="fill_parent"                        
                    android:layout_height            ="26dip"                        
             
                    android:layout_toRightOf            ="@id/icon"                        
                    android:layout_alignParentBottom            ="true"                        
                    android:layout_alignParentRight            ="true"                        
             
                    android:singleLine            ="true"                        
                    android:ellipsize            ="marquee"                        
                    android:text            ="Simple application that shows how to use RelativeLayout"            />                        
             
                                android:layout_width            ="fill_parent"                        
                    android:layout_height            ="wrap_content"                        
             
                    android:layout_toRightOf            ="@id/icon"                        
                    android:layout_alignParentRight            ="true"                        
                    android:layout_alignParentTop            ="true"                        
                    android:layout_above            ="@id/secondLine"                        
                    android:layout_alignWithParentIfMissing            ="true"                        
             
                    android:gravity            ="center_vertical"                        
                    android:text            ="My Application"            />                        
             
                                                

针对RelativeLayout有一点需要注意，因为它内部是通过多个View之间的关系而确定的框架，那么当其中某一个View因为某些需要调用GONE来完全隐藏掉后，会影响与其相关联的Views。Android为我们提供了一个属性 alignWithParentIfMissing用于解决类似问题，当某一个View无法找到与其相关联的Views后将依据alignWithParentIfMissing的设定判断是否与父级View对齐。

下边是两种不同layout在Hierarchy Viewer中的层级关系图：

简单或复杂的问题都需要时常考虑如何优化资源的分配。比如一个功能很简单的应用程序，它会调用一些我们常用的对话框或者输入面板，这需要采用统一的方式来针对不同的应用程序制定统一标准。

当我们面对Android UI优化时，有必要继续考虑资源复用。手机开发给我们的直观感觉是运行其上的软件应该尽可能的达到资源高效利用的极致，而不能像开发PC机那样，似乎有用之不尽的资源。

定义Android Layout(XML)时，有四个比较特别的标签是非常重要的，其中有三个是与资源复用有关，分别是 <viewStub/>, , and 。可是以往我们所接触的案例或者官方文档的例子都没有着重去介绍这些标签的重要性。

• : 此标签可以使UI在特殊情况下，直观效果类似于设置View的不可见性，但是其更大的(R)意义在于被这个标签所包裹的Views在默认状态下不会占用任何内存空间。viewStub通过include从外部导入Views元素。
  • 用法：通过android:layout来指定所包含的内容。默认情况下，ViewStub所包含的标签都属于visibility=GONE。viewStub通过方法inflate()来召唤系统加载其内部的Views。

    
    android:inflatedId="@+id/subTree"
    
    android:layout="@layout/mySubTree"
    
    android:layout_width="120dip"
    
    android:layout_height="40dip" />
    
    
    

• : 将在下一篇 做详细介绍。

• :可以通过这个标签直接加载外部的xml到当前结构中，是复用UI资源的常用标签。
  • 用法：将需要复用xml文件路径赋予include标签的Layout属性。

• : 标签用于指定屏幕内的焦点View。
  • 用法: 将标签置于Views标签内部

    
                 android:layout_width="fill_parent"
    
                 android:layout_height="wrap_content"
    
                 android:layout_weight="0"
    
                 android:paddingBottom="4">
    
           
    
    
    

  
  

  单独将标签做个介绍，是因为它在优化UI结构时起到很重要的作用。目的是通过删减多余或者额外的层级，从而优化整个Android Layout的结构。

  将通过一个例子来了解这个标签实际所产生的作用，这样可以更直观的了解的用法。

  建立一个简单的Layout，其中包含两个Views元素：ImageView 和TextView  默认状态下我们将这两个元素放在FrameLayout中。其效果是在主视图中全屏显示一张图片，之后将标题显示在图片上，并位于视图的下方。以下是xml代码：

  <
  FrameLayout
   
  xmlns:android
  =
  "http://schemas.android.com/apk/res/android"
  
  
      
  android:layout_width
  =
  "fill_parent"
  
  
      
  android:layout_height
  =
  "fill_parent"
  >
  
  
  
  
      
  <
  ImageView
  
  
          
  android:layout_width
  =
  "fill_parent"
  
  
          
  android:layout_height
  =
  "fill_parent"
   
  
  
  
          
  android:scaleType
  =
  "center"
  
  
          
  android:src
  =
  "@drawable/golden_gate"
   
  />
  
  
  
  
      
  <
  TextView
  
  
          
  android:layout_width
  =
  "wrap_content"
  
  
          
  android:layout_height
  =
  "wrap_content"
  
  
          
  android:layout_marginBottom
  =
  "20dip"
  
  
          
  android:layout_gravity
  =
  "center_horizontal|bottom"
  
  
  
  
          
  android:padding
  =
  "12dip"
  
  
  
  
          
  android:background
  =
  "#AA000000"
  
  
          
  android:textColor
  =
  "#ffffffff"
  
  
  
  
          
  android:text
  =
  "Golden Gate"
   
  />
  
  
  
  
  
  FrameLayout
  >
  

  应用上边的Layout运行的视图为：

  

   

  启动 tools> hierarchyviewer.bat工具查看当前UI结构视图：

  

   

  我们可以很明显的看到由红色线框所包含的结构出现了两个framelayout节点，很明显这两个完全意义相同的节点造成了资源浪费（这里可以提醒大家在开发工程中可以习惯性的通过hierarchyViewer查看当前UI资源的分配情况 ），那么如何才能解决这种问题呢（就当前例子是如何去掉多余的frameLayout节点）？这时候就要用到标签来处理类似的问题了。我们将上边xml代码中的framLayout替换成merge：

   

  <
  merge
   
  xmlns:android
  =
  "http://schemas.android.com/apk/res/android"
  >
  
  
  
  
      
  <
  ImageView
  
  
          
  android:layout_width
  =
  "fill_parent"
  
  
          
  android:layout_height
  =
  "fill_parent"
   
  
  
  
          
  android:scaleType
  =
  "center"
  
  
          
  android:src
  =
  "@drawable/golden_gate"
   
  />
  
  
  
  
      
  <
  TextView
  
  
          
  android:layout_width
  =
  "wrap_content"
  
  
          
  android:layout_height
  =
  "wrap_content"
  
  
          
  android:layout_marginBottom
  =
  "20dip"
  
  
          
  android:layout_gravity
  =
  "center_horizontal|bottom"
  
  
  
  
          
  android:padding
  =
  "12dip"
  
  
  
  
          
  android:background
  =
  "#AA000000"
  
  
          
  android:textColor
  =
  "#ffffffff"
  
  
  
  
          
  android:text
  =
  "Golden Gate"
   
  />
  
  
  
  
  
  merge
  >
  

  运行程序后在Emulator中显示的效果是一样的，可是通过hierarchyviewer查看的UI结构是有变化的，当初多余的 FrameLayout节点被合并在一起了，或者可以理解为将merge标签中的子集直接加到Activity的FrameLayout跟节点下（这里需要提醒大家注意：所有的Activity视图的根节点都是frameLayout）。如果你所创建的Layout并不是用framLayout作为根节点（而是应用LinerLayout等定义root标签），就不能应用上边的例子通过merge来优化UI结构。

  
  

  除了上边的例子外，meger还有另外一个用法

  当应用Include或者ViewStub标签从外部导入xml结构时，可以将被导入的xml用merge作为根节点表示，这样当被嵌入父级结构中后可以很好的将它所包含的子集融合到父级结构中，而不会出现冗余的节点。

  另外有两点需要特别注意：

• 只可以作为xml layout的根节点。
• 当需要扩充的xml layout本身是由merge作为根节点的话，需要将被导入的xml layout置于 viewGroup中，同时需要设置attachToRoot为True。（更多说明请参见inflate() 文档）

 原文地址hhttp://www.curious-creature.org/2009/03/01/android-layout-tricks-3-optimize-part-1/