) Use of merge and include tags in Android

1. Use the <include/> label to reuse the layout code.

If you need to use the same layout design in a project, you can use the <include/> label to reuse the layout code. This label is not described in the android development documentation. This tag is used in the android main screen program:

 

 

[XHTML: showcolumns]View plaincopy

··· · 50 ······· · 90 ····· · 140 · 150

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>

 

 

In this way, you can reference a layout segment multiple times without repeatedly copying or pasting it. You can use the include tag to override the values of some attributes. For example, the preceding example overwrites the id value in the referenced layout. The following is another example:

[C-sharp]View plaincopy

1. <Include Android: layout_width = "fill_parent" layout = "@ layout/image_holder"/>
2. <Include Android: layout_width = "256dip" layout = "@ layout/image_holder"/>

2. Use the <merge/> label to reduce the view hierarchy

In the android layout file, a top-level container is required to accommodate other components, but multiple components cannot be placed directly. For example, the following code:

[C-sharp]View plaincopy

1. <Framelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
2. Android: layout_width = "fill_parent"
3. Android: layout_height = "fill_parent">
5. <Imageview
6. Android: layout_width = "fill_parent"
7. Android: layout_height = "fill_parent"
8. Android: scaletype = "center"
9. Android: src = "@ drawable/golden_gate"/>
11. <Textview
12. Android: layout_width = "wrap_content"
13. Android: layout_height = "wrap_content"
14. Android: text = "Golden Gate"/>
16. </Framelayout>

The <merge/> label is introduced separately because it plays an important role in optimizing the UI structure. The objective is to optimize the entire android layout structure by deleting redundant or additional layers.

3. We will use an example to understand the actual functions of this tag, so that we can more intuitively understand the usage of <merge/>.

 

Create a simple layout with two views elements: imageview and textview. By default, these two elements are placed in framelayout. The effect is to display an image in full screen in the main view, and then display the title on the image, which is located below the view. The following is the XML code:

 

[XHTML: showcolumns]View plaincopy

··· · 50 ······· · 90 ····· · 140 · 150

1. <Framelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
2. Android: layout_width = "fill_parent"
3. Android: layout_height = "fill_parent">
5. <Imageview
6. Android: layout_width = "fill_parent"
7. Android: layout_height = "fill_parent"
9. Android: scaletype = "center"
10. Android: src = "@ drawable/golden_gate"/>
12. <Textview
13. Android: layout_width = "wrap_content"
14. Android: layout_height = "wrap_content"
15. Android: layout_marginbottom = "20dip"
16. Android: layout_gravity = "center_horizontal | bottom"
18. Android: padding = "12dip"
20. Android: Background = "# aa000000"
21. Android: textcolor = "# ffffffff"
23. Android: text = "Golden Gate"/>
25. </Framelayout>

 

 

The layout running view on the application is as follows:

 

Start tools> hierarchyviewer. BAT to view the current UI Structure View:

 

 

We can see that two framelayout nodes appear in the structure contained by the red box, obviously, these two nodes with the same meaning cause a waste of resources (here we can remind you that you can habitually view the current UI resource allocation through hierarchyviewer in the Development Project ), so how can we solve this problem (in the current example, how can we remove redundant framelayout nodes )? In this case, the <merge/> label is used to solve similar problems. We replace framlayout in the above XML code with merge:

 

[XHTML: showcolumns]View plaincopy

··· · 50 ······· · 90 ····· · 140 · 150

1. <Merge xmlns: Android = "http://schemas.android.com/apk/res/android">
3. <Imageview
4. Android: layout_width = "fill_parent"
5. Android: layout_height = "fill_parent"
7. Android: scaletype = "center"
8. Android: src = "@ drawable/golden_gate"/>
10. <Textview
11. Android: layout_width = "wrap_content"
12. Android: layout_height = "wrap_content"
13. Android: layout_marginbottom = "20dip"
14. Android: layout_gravity = "center_horizontal | bottom"
16. Android: padding = "12dip"
18. Android: Background = "# aa000000"
19. Android: textcolor = "# ffffffff"
21. Android: text = "Golden Gate"/>
23. </Merge>

 

 

After running the program, the emulator displays the same effect. However, the UI structure viewed through hierarchyviewer has changed. The redundant framelayout nodes were merged, you can also add a subset of the merge label to the framelayout and node of the activity directly. (Note that the root nodes of all activity views are framelayout ). If the created layout does not use framlayout as the root node (but uses linerlayout to define root labels), you cannot use the preceding example to optimize the UI structure through merge.

 

4. Besides the above example, meger has another usage.

When the include or viewstub label is used to import the XML structure from outside, the imported XML can be represented by merge as the root node, in this way, after being embedded into the parent structure, the subset it contains can be well integrated into the parent structure without redundant nodes.

Pay special attention to the following two points:

• <Merge/> can only be used as the root node of XML layout.
• When the XML layout to be expanded is the root node of merge, You need to place the imported XML layout in the viewgroup, and set attachtoroot to true. (For more information, see inflate)