浅谈Android样式开发之布局优化

引言

　　今天我们来谈一下Android中布局优化常用的一些手段。官方给出了3种优化方案，分别是</include>、</viewstub>、</merge>标签，下面我们就来介绍这些标签。

include标签

　　include标签能够重用布局文件，我们在开发中经常有一些布局是通用的，比如每一个页面的头部和尾部，我们可以将其分离到独立的文件中，然后在需要的界面使用include进行嵌入即可。下面我们通过一个示例来看一下include标签的使用。示例如下：　　

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:padding="12dp">

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:id="@+id/line1">

         <Button
             android:layout_width="match_parent"
             android:layout_height="40dp"
             android:text="按钮"/>

         <TextView
             android:layout_width="match_parent"
             android:layout_height="40dp"
             android:text="文本"/>

     </LinearLayout>

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:layout_marginTop="10dp"
         android:layout_below="@+id/line1">

         <Button
             android:layout_width="match_parent"
             android:layout_height="40dp"
             android:text="按钮2"/>

         <TextView
             android:layout_width="match_parent"
             android:layout_height="40dp"
             android:text="文本2"/>

     </LinearLayout>

 </RelativeLayout>

　　在这个例子中我们把第二个Linearlayout独立出去写成额外的layout布局文件，然后使用include标签来嵌入。如下所示：

 <!--
     使用include标签嵌入第二个LinearLayout
 -->
 <include
         android:layout="@layout/partial_layout"/>

　　这样我们就可以将第二个LinearLayout布局文件嵌入进来，效果和上面是一样的。但是使用include时有几个地方需要注意。具体如下：

　　注意点：

　　　　1、<include/>标签可以使用单独的layout属性，这个也是必须使用的。

　　　　2、<include/>标签若指定了Id属性，而你的LinearLayout也定义了Id，那么你的LinearLayout的Id会被覆盖。

　　　　3、在<include/>标签中所有的android:layout_*都是可用的，前提是必须要写layout_width和layout_height属性。

merge标签

　　<merge/>标签在UI的结构优化中起着非常重要的作用，它可以删减多余的层级，优化UI。<merge/>多用于替换FrameLayout或者当一个布局包含另一个时，<merge/>标签消除视图层次结构中多余的视图组。下面是<merge/>标签使用的两个经典场景。

　　a.  布局顶结点是FrameLayout且不需要设置background或padding等属性，可以用merge代替，因为Activity内容试图的parent view就是个FrameLayout，所以可以用merge消除只剩一个。
　　b.  某布局作为子布局被其他布局include时，使用merge当作该布局的顶节点，这样在被引入时顶结点会自动被忽略，而将其子节点全部合并到主布局中。

　　下面我们来看一个示例：

　　上面讲到我们把第二个LinearLayout分离出来单独写到一个partial_layout文件中了，下面我们来看一下这个分离出去的布局文件。如下所示：

 <?xml version="1.0" encoding="utf-8"?>
 <!--此处使用<merge/>标签替换-->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:layout_marginTop="10dp"
         android:layout_below="@+id/line1">

         <Button
             android:layout_width="match_parent"
             android:layout_height="40dp"
             android:text="按钮2"/>

         <TextView
             android:layout_width="match_parent"
             android:layout_height="40dp"
             android:text="文本2"/>

     </LinearLayout>

 </LinearLayout>

　　我们看到这个子布局中距离嵌套了两层LinearLayout，这是很不合理的，在这里我们可以把根节点的LinearLayout替换成<merge/>标签。这样就相当于把最外层的LinearLayout给剥离了。一定程度上优化了布局的结构，这就是<merge/>标签的作用。

ViewStub标签
　　viewstub标签同include标签一样可以用来引入一个外部布局，不同的是，viewstub引入的布局默认不会扩张，即既不会占用显示也不会占用位置，从而在解析layout时节省cpu和内存。
viewstub常用来引入那些默认不会显示，只在特殊情况下显示的布局，如进度布局、网络失败显示的刷新布局、信息出错出现的提示布局等。

　　下面以在一个布局main.xml中加入网络错误时的提示页面network_error.xml为例。main.mxl代码如下：

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >
     ……
     <ViewStub
         android:id="@+id/network_error_layout"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout="@layout/network_error" />

 </RelativeLayout>

　　其中network_error.xml为只有在网络错误时才需要显示的布局，默认不会被解析，示例代码如下：

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent" >

     <Button
         android:id="@+id/network_setting"
         android:layout_width="@dimen/dp_160"
         android:layout_height="wrap_content"
         android:layout_centerHorizontal="true"
         android:text="@string/network_setting" />

     <Button
         android:id="@+id/network_refresh"
         android:layout_width="@dimen/dp_160"
         android:layout_height="wrap_content"
         android:layout_below="@+id/network_setting"
         android:layout_centerHorizontal="true"
         android:layout_marginTop="@dimen/dp_10"
         android:text="@string/network_refresh" />

 </RelativeLayout>

　　在Java中通过(ViewStub)findViewById(id)找到ViewStub，通过stub.inflate()展开ViewStub，然后得到子View，如下所示：

 private View networkErrorView;

 private void showNetError() {
     // not repeated infalte
     if (networkErrorView != null) {
         networkErrorView.setVisibility(View.VISIBLE);
         return;
     }

     ViewStub stub = (ViewStub)findViewById(R.id.network_error_layout);
     networkErrorView = stub.inflate();
     Button networkSetting = (Button)networkErrorView.findViewById(R.id.network_setting);
     Button refresh = (Button)findViewById(R.id.network_refresh);
 }

 private void showNormal() {
     if (networkErrorView != null) {
         networkErrorView.setVisibility(View.GONE);
     }
 }

　　在上面showNetError()中展开了ViewStub，同时我们对networkErrorView进行了保存，这样下次不用继续inflate。这就是后面第三部分提到的减少不必要的infalte。viewstub标签大部分属性同include标签类似。通过viewstub的原理我们可以知道将一个view设置为GONE不会被解析，从而提高layout解析速度，而VISIBLE和INVISIBLE这两个可见性属性会被正常解析。