Creating Reusable UI Components in Android Layout Tips

The Android platform provides a large number of UI artifacts, and you can build these small visual blocks (artifacts) into one to present complex and useful pictures to users. However, applications sometimes need some advanced visual components. To meet this requirement and achieve it efficiently, you can combine multiple standard components into a single, reusable component.

For example, you can create a reusable component with a progress bar and a cancel button, an Panel with two buttons (OK and cancel actions), and an Panel with icons, titles, descriptions, and so on. Simply, you can create an UI component by writing a custom View, but the simpler way is to use only XML.

In the Android XML layout file, 1, each tag corresponds to a real class instance (these classes 1 are all subclasses of View). The UI toolkit also allows you to use three special tags that do not correspond to specific View instances: < requestFocus / > , < merge / > , < include / > . This article will describe how to use the < include / > To create a simple XML visual component. Learn more about how to use < merge / > Please refer to the updated article Android Layout Tips for Merging Layouts, especially its relationship with < include / > Combine and use the powerful power embodied.

< include / > The element acts as its name 1; It is used to include other XML layouts. Use this tag as shown in the following example:

<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 feature is required. This feature, without the android namespace prefix, represents a reference to the layout you want to include. In this example, the same layout is included three times. This tab also allows you to override 1 features of the included layout. The above example shows that you can use android: id to specify the id of the root View in the included layout; It can also override the already defined layout id. Similarly, you can override all layout parameters. This means that any feature of android: layout_* can be found in the < include / > Use in. Here's an example:

<include android:layout_width="fill_parent" layout="@layout/image_holder" />

<include android:layout_width="256dip" layout="@layout/image_holder" />

This tag is especially useful when customizing UI according to device settings. For example, the main layout of Activity is placed under the layout/folder, and other layouts are placed under layout-land/and layout-port/. In this way, you can share most UI layouts in vertical and horizontal directions.

The include tag can implement the layout of referencing another layout in one layout, This is usually suitable for APP with complex interface layout and common layout for different interfaces. For example, the top layout, sidebar layout, bottom Tab column layout, ListView and GridView layout of each item, etc., extracting these layouts used by multiple interfaces in the same APP and referencing them through include tags can not only reduce the complexity of layout, but also achieve layout reuse (only one place needs to be modified when the layout is changed).

How to use include tags:
The include tag is very simple to use, just use layout= "@ layout/child_layout" where other layouts need to be referenced in the layout file:
< include layout="@layout/titlebar" / >