Android里merge和include标签的使用

最新推荐文章于 2024-04-12 09:50:47 发布

最新推荐文章于 2024-04-12 09:50:47 发布 · 100 阅读

文章标签：

#移动开发 #ui

本文详细介绍了在Android开发中如何利用include和merge标签优化布局代码，减少重复和提高代码复用率。通过实例展示了如何在不改变整体布局效果的前提下，减少视图层级结构，提升UI性能。

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

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

 
   view plain 
  

     ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
   
 <com.android.launcher.Workspace 
 android:id="@+id/workspace" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 launcher:defaultScreen="1"> 
 <includeandroid:id="@+id/cell1"layout="@layout/workspace_screen"/> 
 <includeandroid:id="@+id/cell2"layout="@layout/workspace_screen"/> 
 <includeandroid:id="@+id/cell3"layout="@layout/workspace_screen"/> 
 </com.android.launcher.Workspace> 

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

   view plain
  
<includeandroid:layout_width="fill_parent"layout="@layout/image_holder"/>
<includeandroid:layout_width="256dip"layout="@layout/image_holder"/>

2.使用<merge /> 标签来减少视图层级结构

在Android layout文件中需要一个顶级容器来容纳其他的组件，而不能直接放置多个组件，例如如下的代码：

   view plain
  
<FrameLayoutxmlns: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:text="GoldenGate"/>
</FrameLayout>

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

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

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

 
   view plain 
  

     ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
   
 <FrameLayoutxmlns: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="GoldenGate"/> 
  
 </FrameLayout> 

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

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

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

 
   view plain 
  

     ·········10········20········30········40········50········60········70········80········90········100·······110·······120·······130·······140·······150
   
 <mergexmlns: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="GoldenGate"/> 
  
 </merge> 

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