Android UI 优化 [ 类别：Layout ] <merge>的学习

使用<merge/>优化UI结构

最新推荐文章于 2021-12-29 23:43:25 发布

wjdarwin

最新推荐文章于 2021-12-29 23:43:25 发布

阅读量909

点赞数

文章标签： android layout merge ui 优化 xml

本文介绍如何利用<merge/>标签优化Android UI布局，通过实例展示了如何减少不必要的层级，提高布局效率。适用于希望提升UI性能的开发者。

单独将<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结构。