布局优化偏------------- include、merge 、ViewStub

偏执的太偏执、 2022-07-11 16:18 160阅读 0赞

##     ##

## 1、布局重用<include /> ##

比如你有一个界面，在多地方用到，这样你就可以单独写一个xml，然后再要用的地方用include标签，

这样就大大节约了时间！![Center][]

就是这么的方便！

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

2)可以使用其他属性。<include />标签若指定了ID属性，而你的layout也定义了ID，则你的layout的ID会被覆盖，[解决方案][Link 1]。

3)在include标签中所有的[Android][]:layout\_\*都是有效的，前提是必须要写layout\_width和layout\_height两个属性。

4)布局中可以包含两个相同的include标签，引用时可以使用如下方法解决（[参考][Link 2]）:

View view = findViewById(R.id.view1);

View view1 =  view.findViewById(R.id.view1);

## 2、减少视图层级<merge /> ##

merge标签的作用应该都知道，它可以减少UI层级，优化布局。merge一般情况下配合include使用，很多地方说merge标签只能用于FramLayout和LinearLayout，实际上RelativeLayout也是可以使用merge的，但一般都不这么用，因为RelativeLayout本身位置关系复杂一点，处理不当很容易适得其反。

<merge/>标签在UI的结构优化中起着非常重要的作用，它可以删减多余的层级，优化UI。<merge/>多用于替换FrameLayout或者当一个布局包含另一个时，<merge/>标签消除视图层次结构中多余的视图组。例如你的主布局文件是垂直布局，引入了一个垂直布局的include，这是如果include布局使用的LinearLayout就没意义了，使用的话反而减慢你的UI表现。这时可以使用<merge/>标签优化。

现在，当你添加该布局文件时(使用<include />标签)，系统忽略<merge />节点并且直接添加两个TextView。

![Center 1][]

## 3、“懒加载”<ViewStub />他的好处在于需要的时候才会加载 ##

使用他并不会影响UI初始化时的性能。各种不常用的布局想进度条、显示错误消息等可以使用<ViewStub />标签，以减少内存使用量，加快渲染速度。<ViewStub /> 是一个不可见的，大小为 0 的 View。

但ViewStub也不是万能的，下面总结下ViewStub能做的事儿和什么时候该用ViewStub，什么时候该用可见性的控制。

首先来说说ViewStub的一些特点：

1. ViewStub只能Inflate一次，之后ViewStub对象会被置为空。按句话说，某个被ViewStub指定的布局被Inflate后，就不会够再通过ViewStub来控制它了。

2. ViewStub只能用来Inflate一个布局文件，而不是某个具体的View，当然也可以把View写在某个布局文件中。

基于以上的特点，那么可以考虑使用ViewStub的情况有：

1. 在程序的运行期间，某个布局在Inflate后，就不会有变化，除非重新启动。

因为ViewStub只能Inflate一次，之后会被置空，所以无法指望后面接着使用ViewStub来控制布局。所以当需要在运行时不止一次的显示和隐藏某个布局，那么ViewStub是做不到的。这时就只能使用View的可见性来控制了。

2. 想要控制显示与隐藏的是一个布局文件，而非某个View。

因为设置给ViewStub的只能是某个布局文件的Id，所以无法让它来控制某个View。

所以，如果想要控制某个View(如Button或TextView)的显示与隐藏，或者想要在运行时不断的显示与隐藏某个布局或View，只能使用View的可见性来控制。

下面来看一个实例

在这个例子中，要显示二种不同的布局，一个是用TextView显示一段文字，另一个则是用ImageView显示一个图片。这二个是在onCreate()时决定是显示哪一个，这里就是应用ViewStub的最佳地点。

先来看看布局，一个是主布局，里面只定义二个ViewStub，一个用来控制TextView一个用来控制ImageView，另外就是一个是为显示文字的做的TextView布局，一个是为ImageView而做的布局：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<?****xml** version="1.0" encoding="utf-8"**?>**  
2.  **<****LinearLayout**  
3.    xmlns:android="http://schemas.android.com/apk/res/android"  
4.    android:orientation="vertical"  
5.    android:layout\_width="fill\_parent"  
6.    android:layout\_height="fill\_parent"  
7.    android:gravity="center\_horizontal"**>**  
8.    **<****ViewStub**   
9.      android:id="@+id/viewstub\_demo\_text"  
10.     android:layout\_width="wrap\_content"  
11.     android:layout\_height="wrap\_content"  
12.     android:layout\_marginLeft="5dip"  
13.     android:layout\_marginRight="5dip"  
14.     android:layout\_marginTop="10dip"  
15.     android:layout="@layout/viewstub\_demo\_text\_layout"**/>**  
16.   **<****ViewStub**   
17.     android:id="@+id/viewstub\_demo\_image"  
18.     android:layout\_width="wrap\_content"  
19.     android:layout\_height="wrap\_content"  
20.     android:layout\_marginLeft="5dip"  
21.     android:layout\_marginRight="5dip"  
22.     android:layout="@layout/viewstub\_demo\_image\_layout"**/>**  
23. **</****LinearLayout****>**

为TextView的布局：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

为ImageView的布局：

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

下面来看代码，决定来显示哪一个，只需要找到相应的ViewStub然后调用其infalte()就可以获得相应想要的布局：

**\[java\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **package** com.effective;  
2.    
3.  **import** android.app.Activity;  
4.  **import** android.os.Bundle;  
5.  **import** android.view.ViewStub;  
6.  **import** android.widget.ImageView;  
7.  **import** android.widget.TextView;  
8.    
9.  **public** **class** ViewStubDemoActivity **extends** Activity \{  
10.     @Override  
11.     **public** **void** onCreate(Bundle savedInstanceState) \{  
12.         **super**.onCreate(savedInstanceState);  
13.         setContentView(R.layout.viewstub\_demo\_activity);  
14.         **if** ((((**int**) (Math.random() \* 100)) & 0x01) == 0) \{  
15.             // to show text  
16.             // all you have to do is inflate the ViewStub for textview  
17.             ViewStub stub = (ViewStub) findViewById(R.id.viewstub\_demo\_text);  
18.             stub.inflate();  
19.             TextView text = (TextView) findViewById(R.id.viewstub\_demo\_textview);  
20.             text.setText("The tree of liberty must be refreshed from time to time" +  
21.                     " with the blood of patroits and tyrants! Freedom is nothing but " +  
22.                     "a chance to be better!");  
23.         \} **else** \{  
24.             // to show image  
25.             // all you have to do is inflate the ViewStub for imageview  
26.             ViewStub stub = (ViewStub) findViewById(R.id.viewstub\_demo\_image);  
27.             stub.inflate();  
28.             ImageView image = (ImageView) findViewById(R.id.viewstub\_demo\_imageview);  
29.             image.setImageResource(R.drawable.happy\_running\_dog);  
30.         \}  
31.     \}  
32. \}

运行结果：

![0_1318692141FBNT.gif][]![0_1318692154av4a.gif][]

使用的时候的注意事项：

> 1. 某些布局属性要加在ViewStub而不是实际的布局上面，才会起作用，比如上面用的android:layout\_margin\*系列属性，如果加在TextView上面，则不会起作用，需要放在它的ViewStub上面才会起作用。而ViewStub的属性在inflate()后会都传给相应的布局。

[Center]: /images/20220711/94e6f8301ec942749ec285f46db045c1.png
[Link 1]: http://my.eoe.cn/814017/archive/3415.html
[Android]: http://lib.csdn.net/base/android
[Link 2]: http://www.coboltforge.com/2012/05/tech-stuff-layout/
[Center 1]: /images/20220711/9c9d3ebc6a054e97954bf3829561cac9.png
[view plain]: http://blog.csdn.net/hitlion2008/article/details/6737537#
[0_1318692141FBNT.gif]: http://hi.csdn.net/attachment/201110/15/0_1318692141FBNT.gif
[0_1318692154av4a.gif]: /images/20220711/84a34c427e3e46329d4e30c76c9b5056.png