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

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

<com.android.launcher.Workspace  android:id="@+id/workspace"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  launcher:defaultScreen="1">  <include android:id="@+id/cell1" layout="@layout/workspace_screen" />  <include android:id="@+id/cell2" layout="@layout/workspace_screen" />  <include android:id="@+id/cell3" layout="@layout/workspace_screen" /></com.android.launcher.Workspace>

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

<include android:layout_width="fill_parent" layout="@layout/image_holder" /><include android:layout_width="256dip" layout="@layout/image_holder" />使用<merge /> 标签来减少视图层级结构在Android layout文件中需要一个顶级容器来容纳其他的组件,而不能直接放置多个组件,例如如下的代码:
<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/golden_gate" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Golden Gate" />

</FrameLayout>

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

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

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

<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/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="Golden Gate" />

</FrameLayout>

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

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

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

 

<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/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="Golden Gate" />

</merge>

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

除了上边的例子外,meger还有另外一个用法

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

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

<merge />只可以作为xml layout的根节点。 
当需要扩充的xml layout本身是由merge作为根节点的话,需要将被导入的xml layout置于 viewGroup中,同时需要设置attachToRoot为True。

Android UI 优化 使用<include/>和 <merge />标签的更多相关文章

  1. Android布局优化:include 、merge、ViewStub的详细总结

    版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 本篇博客主要是对上篇博客的补充Android性能优化之UI渲染性能优化, 没有什么新东西,觉得应该是都掌握的玩意,写出来也只是自己做个小小的总结. ...

  2. 【转】在Android布局中使用include和merge标签

    内容转自:http://fengweipeng1208.blog.163.com/blog/static/21277318020138229754135/ 在我们开发android布局时,经常会有很多 ...

  3. Android布局优化之include、merge、ViewStub的使用

    本文针对include.merge.ViewStub三个标签如何在布局复用.有效减少布局层级以及如何可以按需加载三个方面进行介绍的. 复用布局可以帮助我们创建一些可以重复使用的复杂布局.这种方式也意味 ...

  4. Android UI优化——include、merge 、ViewStub

    在布局优化中,Androi的官方提到了这三种布局<include />.<merge />.<ViewStub />,并介绍了这三种布局各有的优势,下面也是简单说一 ...

  5. 优化技术之Android UI优化

    2013-06-30 UI 优化 在Android中,最常用LinearLayout表示UI的布局.比起LinearLayout,在资源利用上,RelativeLayout会占用更少的资源而达到相同的 ...

  6. Android include和merge标签的使用

    在Android布局文件中,某些时候使用include标签会很多的好处1,对于稍微有点复杂的布局界面,将所有布局代码都写在一个xml文件中,界面会显得很冗余,可读性很差,这时可以分开使用include ...

  7. Android的布局优化之include、merge 、viewstub

    以前在写布局的时候总是喜欢用自己熟悉的方式去写,从来也没有想过优化怎么的,后来又一次在上班的时候老大拿着我写的一个页面说我这个不行.我说这不是和设计图上的一模一样的么?怎么就不行了?然后他就跟我说了一 ...

  8. [Android]Android布局优化之<include />

    转载请标明:转载于http://www.cnblogs.com/Liuyt-61/p/6602891.html -------------------------------------------- ...

  9. Android UI 优化——使用HierarchyViewer工具

    先说些题外话,希望路过的各位支持,博主有幸成为2013年度博客之星的候选人,期待你的一票,谢谢. 投票猛击: http://vote.blog.csdn.net/blogstaritem/blogst ...

随机推荐

  1. Npgsql使用入门(三)【批量导入数据】

    Program.cs代码: class Program { static void Main(string[] args) { var test = new PgBulkCopyHelper<S ...

  2. ComboxBox控件、checklistbox控件和listbox控件的组合开发

    第一步:先创建一个WinForm窗体应用程序,按照下图所示的进行布局. 第二步:为ComboxBox控件.checklistbox控件和listbox控件和button控件设置属性 第三步:在代码中的 ...

  3. AJAX异步删除操作

    @Ajax.ActionLink("删除", "Delete", new {id = user.Id}, ajaxOption) @{ var ajaxOpti ...

  4. 使用vs2017创建项目并添加到git中

    参考 https://blog.csdn.net/qq373591361/article/details/71194651 https://blog.csdn.net/boonya/article/d ...

  5. VS2015 & ReSharper CTRL

    如下为个人比较常用的快捷键,部分快捷键有进行修改. 一.VS偏好设置: 1.转到定义:F12 2.查找所有引用:Shift + F12 3.跳转到指定的某一行:Ctrl + G (or 单击状态栏中的 ...

  6. "国学"能带给孩子什么?

       您是家长吗?   是!就点标题下方蓝色的 静心坊 三字,然后点关注!您就可以享受到我们为您提供的最新教育信息. 读国学,除大量识字之外,还能带给孩子什么呢? 男孩子读国学,国学能教会他做一个正直 ...

  7. WPF 利用RichTextBox 打印出不同颜色的文本

    using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows ...

  8. 可横向滑动的vue tab组件

    示例 前端使用技术:框架->vue 组件>ly-tab一个用于移动端的可触摸滑动具有回弹效果的可复用Vue组件 ly-tab 介绍地址 ly-tab npm地址 使用步骤 1,引入包,定义 ...

  9. elasticsearch多种搜索方式

    简要 1.query string search2.query DSL3.query filter4.full-text search5.phrase search6.highlight search ...

  10. ApacheBench 测试性能并使用 GnuPlot 绘制图表

    转自:http://blog.csdn.net/fdipzone/article/details/18827069 ApacheBench 测试性能并使用 GnuPlot 绘制图表 Apache Be ...