Android中使用include标签和merge标签重复使用布局

1.使用<include /> 标签来重用layout代码

如果在一个项目中需要用到相同的布局设计，可以通过<include /> 标签来重用layout代码，该标签在Android开发文档中没有相关的介绍。在android主屏程序中 用到了这个标签：

 

 

[xhtml] view plain copy

1. <com.android.launcher.Workspace   
2.  android:id="@+id/workspace"    
3.  android:layout_width="fill_parent"    
4.  android:layout_height="fill_parent"    
5.  launcher:defaultScreen="1">    
6.   <include android:id="@+id/cell1" layout="@layout/workspace_screen" />   
7.   <include android:id="@+id/cell2" layout="@layout/workspace_screen" />    
8.   <include android:id="@+id/cell3"layout="@layout/workspace_screen" />  
9. </com.android.launcher.Workspace>  

 

这样可以多次引用一个布局片段而不用重复的复制、粘贴。通过include标签也可以覆写一些属性的值，例如上面的示例就覆写了引用的layout中的id值。下面是另外一个示例：

 
 

  
  

   
   

    
    [c-sharp] 
    
    view plain
    
     copy
    
     
   
   
  
  
  
  
<include android:layout_width="fill_parent"layout="@layout/image_holder" />  
<include android:layout_width="256dip" layout="@layout/image_holder" />  
  
  

   
   
  
  
 
 
 

Android Merge详解

摘要: ​merge />标签在优化UI结构时起到很重要的作用。目的是通过删减多余或者额外的层级，从而优化整个Android Layout的结构。核心功能就是减少冗余的层次从而达到优化UI的目的！

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

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

<?xml version="1.0" encoding="utf-8"?>
<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/rain" />
 
    <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 Gate2" />
      
</FrameLayout>

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

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

我们可以很明显的看到出现了两个framelayout节点，很明显这两个完全意义相同的节点造成了资源浪费，那么如何才能解决这种问题呢（就当前例子是如何去掉多余的frameLayout节点）？这时候就要用到<merge />标签来处理类似的问题了。

这里可以提醒大家在开发工程中可以习惯性的通过hierarchyViewer查看当前UI资源的分配情况。 Hierarchy Viewer是随AndroidSDK发布的工具，位置在tools文件夹下，名为hierarchyviewer.bat。它是Android自带的非常有用而且使用简单的工具，可以帮助我们更好地检视和设计用户界面(UI)，绝对是UI检视的利器。具体可以看这篇文章 Android工具Hierarchy Viewer

我们将上边xml代码中的framLayout替换成merge：

<?xml version="1.0" encoding="utf-8"?>
<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/rain" />
 
    <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 Gate2" />
      
</merge>

UI结构图：

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

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

尽管Android提供了各种组件来实现小而可复用的交互元素，你也可能因为布局需要复用一个大组件。为了高效复用完整布局，你可以使用<include/>和<merge/>标签嵌入另一个布局到当前布局。所以当你通过写一个自定义视图创建独立UI组件，你可以放到一个布局文件里，这样更容易复用。

复用布局因为其允许你创建可复用的复杂布局而显得非常强大。如，一个 是/否 按钮面板，或带描述文本的自定义进度条。这同样意味着，应用里多个布局里共同的元素可以被提取出来，独立管理，然后插入到每个布局里。

创建可复用布局

如果你已经知道哪个布局需要重用，就创建一个新的xml文件来定义布局。如，下面是一个来自G-Kenya代码库里定义标题栏的布局，它可以被插到每个Activity里：

复制代码 代码如下:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width=”match_parent”
    android:layout_height="wrap_content"
    android:background="@color/titlebar_bg">
 
    <ImageView android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/gafricalogo" />
</FrameLayout>

根视图应该刚好和你在其他要插入这个视图的视图里相应位置一样。

使用<include/>标签

在你要添加可复用布局的布局里，添加<include/>标签。下面是添加标题栏：

复制代码 代码如下:

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

你同样可以覆盖所有的布局参数(android:layout_*属性)

复制代码 代码如下:

<include android:id=”@+id/news_title”
         android:layout_width=”match_parent”
         android:layout_height=”match_parent”
         layout=”@layout/title”/>

可是，如果你要用include标签覆盖布局属性，为了让其他属性生效，就必须覆盖android:layout_height和android:layout_width。

使用<merge/>标签

<merge/>标签帮助你排除把一个布局插入到另一个布局时产生的多余的View Group.如，你的被复用布局是一个垂直的线性布局，包含两个子视图，当它作为一个被复用的元素被插入到另一个垂直的线性布局时，结果就是一个垂直的LinearLayout里包含一个垂直的LinearLayout。这个嵌套的布局并没有实际意义，而且会让UI性能变差。

为了避免插入类似冗余的View Group,你可以使用<merge/>标签标签作为可复用布局的根节点，如：

复制代码 代码如下:

<merge xmlns:android="http://schemas.android.com/apk/res/android">
 
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/add"/>
 
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/delete"/>
 
</merge>

现在，当你使用include标签插入这个布局到另一个布局时，系统会忽略merge标签，直接把两个Button替换到include标签的位置。

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

1.<merge />只可以作为xml layout的根节点。

2.当需要扩充的xml layout本身是由merge作为根节点的话，需要将被导入的xml layout置于 viewGroup中，同时需要设置attachToRoot为True。