Android UI optimization and tags

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:

<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>

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:

<Include android: layout_width = "fill_parent" layout = "@ layout/image_holder"/> <include android: layout_width = "256dip" layout = "@ layout/image_holder"/> use the <merge/> label to reduce the need for a top-level container to accommodate other components in the Android layout file., you cannot directly Place multiple components, such as the following code:
<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>

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.

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:

<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>

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 there are two framelayout nodes 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 use hierarchyViewer to view the current UI resource allocation 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:

<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>

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, alternatively, you can add a subset of the merge tag to the FrameLayout and node of the Activity (Note: 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.

Besides the preceding 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.