Android app layout tips: create reusable UI Components

The Android platform provides a wide range of visual UI components-Widgets. By combining these small visual components, You can provide users with complex and useful interfaces. However, applications often need some advanced visual components. To meet such requirements and achieve high efficiency, some standard widgets can be combined into a new reusable component.

For example, a widget contains a progress bar and an operation progress bar of a Cancel button, a panel containing two buttons (cancel and confirm operations), and a panel with an icon, title, and description. You can easily create UI components by writing custom View classes, but it is easier to use XML.

In the Android XML layout file, each tag corresponds to an actual class instance (this class is always a subclass of the View class). There are three special labels in the Android UI tool set, they do not have corresponding View instances: <requestFocus/>, <merge/>, and <include/>. This document describes how to use the <include/> label to create a pure XML visual component. For more information about how to use <merge/>, see the article "merge layout ".

These functions are more powerful when combined.

As the name suggests, the <include/> label is to include another XML layout in the current layout. The use of this label is as simple as shown in the following example. The example directly references the source code of the Android Home application:

<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 <include/>, only the layout attribute is required. The value of this attribute does not have the prefix of the android namespace. It is a reference to the layout file to be included. In this example, the same layout is contained three times. This label can also overwrite some attributes of the contained layout. In the preceding example, android: id specifies the id of the Root View of the layout to be included. If a new id is defined, the id of the contained layout will be overwritten. Similarly, all layout parameters can be overwritten. This means that any android: layout _ * attribute can be used in the <include/> label. In the following example, the same layout is included twice, but only the layout attribute is overwritten for the first time:

<! -- Override the layout height and width -->
<Includelayout = "@ layout/image_holder"
Android: layout_height = "fill_parent"
Android: layout_width = "fill_parent"/>
<! -- Do not override layout dimensions; inherit them from image_holder -->
<Includelayout = "@ layout/image_holder"/>

Warning to overwrite the layout size, you must overwrite the property android: layout_height and android: layout_width at the same time-not the height or width. If only one of them is overwritten, it will not have any effect. If the attribute is not overwritten, the property settings in the source layout are still inherited.

This tag is particularly useful when you need to customize the UI part based on device configurations. For example, the main layout of an Activity can be put into the layout/directory, and then include another layout stored in the layout-land/and layout-port/directory, in this way, you can share most of the UI elements in the landscape and landscape la S.

 

From FireOfStar's column