diff options
Diffstat (limited to 'docs/html/resources/articles/layout-tricks-reuse.jd')
| -rw-r--r-- | docs/html/resources/articles/layout-tricks-reuse.jd | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/docs/html/resources/articles/layout-tricks-reuse.jd b/docs/html/resources/articles/layout-tricks-reuse.jd new file mode 100644 index 0000000..072ba89 --- /dev/null +++ b/docs/html/resources/articles/layout-tricks-reuse.jd @@ -0,0 +1,67 @@ +page.title=Layout Tricks: Creating Reusable UI Components +@jd:body + +<p>The Android platform offers a wide variety of UI <em>widgets</em>, small +visual construction blocks that you can glue together to present users with +complex and useful interfaces. However applications often need higher-level +visual <em>components</em>. To meet that need, and to do so efficiently, you can +combine multiple standard widgets into a single, reusable component. </p> + +<p>For example, you could create a reusable component that contains a progress +bar and a cancel button, a panel containing two buttons (positive and negative +actions), a panel with an icon, a title and a description, and so on. You can +create UI components easily by writing a custom <code>View</code>, but you can +do it even more easily using only XML.</p> + +<p>In Android XML layout files, each tag is mapped to an actual class instance +(the class is always a subclass of {@link android.view.View} The UI toolkit lets +you also use three special tags that are not mapped to a <code>View</code> +instance: <code><requestFocus /></code>, <code><merge /></code> and +<code><include /></code>. This article shows how to use <code><include +/></code> to create pure XML visual components. For information about how to +use <code><merge /></code>, which can be particularly powerful when +combined with <code><include /></code>see the <a +href="{@docRoot}resources/articles/layout-tricks-merge.html">Merging Layouts</a> +article. </p> + +<p>The <code><include /></code> element does exactly what its name +suggests; it includes another XML layout. Using this tag is straightforward as +shown in the following example, taken straight from <a +href="http://android.git.kernel.org/?p=platform/packages/apps/Launcher.git;a= +tree;h=refs/heads/master;hb=master">the source code of the Home application</a> +that ships with Android:</p> + +<pre class="prettyprint"><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></pre> + +<p>In the <code><include /></code> only the <code>layout</code> attribute +is required. This attribute, without the <code>android</code> namespace prefix, +is a reference to the layout file you wish to include. In this example, the same +layout is included three times in a row. This tag also lets you override a few +attributes of the included layout. The above example shows that you can use +<code>android:id</code> to specify the id of the root view of the included +layout; it will also override the id of the included layout if one is defined. +Similarly, you can override all the layout parameters. This means that any +<code>android:layout_*</code> attribute can be used with the <code><include +/></code> tag. Here is an example:</p> + +<pre class="prettyprint"><include android:layout_width="fill_parent" layout="@layout/image_holder" /> +<include android:layout_width="256dip" layout="@layout/image_holder" /> +</pre> + +<p>This tag is particularly useful when you need to customize only part of your +UI depending on the device's configuration. For instance, the main layout of +your activity can be placed in the <code>layout/</code> directory and can +include another layout which exists in two flavors, in <code>layout-land/</code> +and <code>layout-port/</code>. This allows you to share most of the UI in +portrait and landscape.</p>
\ No newline at end of file |