【Android】抽象布局 — include、merge 、ViewStub - android

在布局优化中，Androi的官方提到了这三种布局、、，并介绍了这三种布局各有的优势，下面也是简单说一下他们的优势，以及怎么使用，记下来权当做笔记。

一、布局重用

标签能够重用布局文件，简单的使用如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:orientation="vertical"       android:layout_width=”match_parent”      android:layout_height=”match_parent”      android:background="@color/app_bg"      android:gravity="center_horizontal">      <include layout="@layout/titlebar"/>      <TextView android:layout_width=”match_parent”                android:layout_height="wrap_content"                android:text="@string/hello"                android:padding="10dp" />  LinearLayout>

1) 标签必须使用单独的layout属性。
2) 可以使用其他属性。标签若指定了ID属性，而你的layout也定义了ID，则你的layout的ID会被覆盖。
3) 在include标签中所有的android:layout_*都是有效的，前提是必须要写layout_width和layout_height两个属性。
4) 布局中可以包含两个相同的include标签，引用时可以使用如下方法解决

比如这个布局文件：

<?xml version="1.0" encoding="utf-8"?><ScrollView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:scrollbars="vertical" >  <LinearLayout  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:focusable="true"  android:focusableInTouchMode="true"  android:orientation="vertical"  android:padding="10dip" >    <include    android:id="@+id/discovered_servers"    layout="@layout/discovered_servers_element" />    <include    android:id="@+id/bookmarks"    layout="@layout/bookmarks_element" />        <include android:id="@+id/bookmarks_favourite"    layout="@layout/bookmarks_element" />    <include    android:id="@+id/new_conn"    layout="@layout/new_conn_element" />  LinearLayout>ScrollView>

这里我们include了两次res/layout/bookmarks_element.xml，这个子布局内容如下：

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android" >  <TextView  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:paddingBottom="10dip"  android:paddingTop="10dip"  android:text="@string/bookmarks"  android:textAppearance="?android:attr/textAppearanceLarge" />  <LinearLayout android:id="@+id/bookmarks_list"  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:orientation="vertical"  android:padding="10dip" />merge>

如果向下面这样调用是错的，

LinearLayout fav_bookmarks = findViewById(R.id.bookmarks_list);     // WRONG!!!!

正确的方法是这样：

View bookmarks_container_2 = findViewById(R.id.bookmarks_favourite); bookmarks_container_2.findViewById(R.id.bookmarks_list);

二、减少视图层级

标签用于减少View树的层次来优化Android的布局。先来用个例子演示一下：

首先主需要一个配置文件activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="merge标签使用" />RelativeLayout>

再来一个最简单的Activity，文件名MainActivity.java

package com.example.merge;import android.app.Activity;import android.os.Bundle;public class MainActivity extends Activity {     @Override     protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);     }}

按着上面的代码创建工程，运行后使用“DDMS -> Dump View Hierarchy for UI Automator”工具，截图如下:

merge 使用前：

最下面两层RelativeLayout与TextView就是 activity_main.xml 布局中的内容，上面的FrameLayout是Activity setContentView添加的顶层视图。下面使用merge标签可以查看下区别。

布局文件 activity_main.xml 修改内容如下：

<merge xmlns:android="http://schemas.android.com/apk/res/android"  xmlns:tools="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent" >  <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="merge标签使用" />merge>

使用“DDMS -> Dump View Hierarchy for UI Automator”工具，截图如下:

merge 使用后

可以看到，FrameLayout下面直接就是TextView，与之前的相比少了一层 RelativeLayout 而实现的效果相同。

那么，什么情况考虑使用标签？
- 一种是向上面的例子一样，子视图不需要指定任何针对父视图的布局属性，例子中TextView仅仅需要直接添加到父视图上用于显示就行。
- 另外一种是假如需要在LinearLayout里面嵌入一个布局（或者视图），而恰恰这个布局（或者视图）的根节点也是LinearLayout，这样就多了一层没有用的嵌套，无疑这样只会拖慢程序速度。而这个时候如果我们使用merge根标签就可以避免那样的问题，官方文档 Android Layout Tricks #3: Optimize by merging 中的例子演示的就是这种情况。
标签有什么限制没？
- 只能作为XML布局的根标签使用。
- 当 Inflate 以开头的布局文件时，必须指定一个父ViewGroup，并且必须设定attachToRoot为true。

三、需要时使用

限于篇幅，这里只大概总结一下ViewStub的使用方法，详细介绍和使用写到后面的文章中。

标签最大的优点是当你需要时才会加载，使用他并不会影响UI初始化时的性能。各种不常用的布局想进度条、显示错误消息等可以使用标签，以减少内存使用量，加快渲染速度。是一个不可见的，大小为0的View。标签使用如下：

<ViewStub      android:id="@+id/stub_import"      android:inflatedId="@+id/panel_import"      android:layout="@layout/progress_overlay"      android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:layout_gravity="bottom" />

当你想加载布局时，可以使用下面其中一种方法：

((ViewStub) findViewById(R.id.stub_import)).setVisibility(View.VISIBLE);

View importPanel = ((ViewStub) findViewById(R.id.stub_import)).inflate();

当调用inflate()函数的时候，ViewStub被引用的资源替代，并且返回引用的view。这样程序可以直接得到引用的view而不用再次调用函数findViewById()来查找了。

注：ViewStub 目前有个缺陷就是还不支持标签。

更多标签介绍可以参考官网教程《Android Layout Tricks #3: Optimize with stubs》

【参考资料】：

1、Android抽象布局 — include、merge 、ViewStub
2、Tech Stuff: Android layout pitfalls
3、Android 性能优化四布局优化merge标签的使用
4、Android之merge布局
5、 Android实战技巧：ViewStub的应用

【Android】抽象布局 — include、merge 、ViewStub

一、布局重用

二、减少视图层级

三、需要时使用

更多相关文章

随机推荐