Android <merge> Tags

The <merge/> tag is introduced separately because it plays an important role in optimizing the UI structure. The goal is to optimize the structure of the entire Android layout by cutting redundant or extra layers. The core function is to reduce the level of redundancy to achieve the purpose of optimizing the UI!

An example will be used to understand what the tag actually does, so you can get a more intuitive view of <merge/> usage.

Create a simple layout that contains two views elements: ImageView and TextView By default we place these two elements in Framelayout. The effect is to display a picture in full screen in the main view, then display the title on the picture and below it. The following is the XML code:

<? 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 = "GoldenGate2 "/>

    

</ Framelayout >

The view used to run the above layout is :

Start the Tools>hierarchyviewer.bat tool to view the current UI structure view :

We can clearly see the presence of two framelayout nodes, it is obvious that these two completely identical nodes caused the waste of resources (here can be reminded that in the development of the project can be customary through hierarchyviewer to view the current UI resource allocation), So how do you solve this problem (how do you get rid of redundant framelayout nodes in the current example)? This is the time to use <merge/> tags to deal with similar problems. We replace the framlayout in the above XML code with the 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 = "GoldenGate2 "/>

    

</ Merge >

UI structure diagram:

The effect shown in emulator after running the program is the same, but the UI structure viewed through hierarchyviewer is changed, and the redundant framelayout nodes are merged together. Or it can be understood that the subset of the merge tag is added directly to the activity's framelayout and nodes (it is important to note that the root node of all activity Views is framelayout). If you create a layout that does not use framlayout as the root node (instead of defining root tags such as linerlayout), you cannot use the above example to optimize the UI structure by using merge.

In addition to the above example, Meger has another usage, and when an include or viewstub tag is imported from an external XML structure, the imported XML can be represented as a root node in the merge. This way, when embedded in the parent structure, it is good to dissolve the subset it contains into the parent structure without the redundant nodes.

There are two additional points that require special attention :

<merge/> can only be used as the root node of XML layout.

When the XML layout that needs to be expanded is itself composed of the merge as the root node, the imported XML layout needs to be placed in the ViewGroup, and the attachtoroot must be set to true.

Android <merge> Tags