diff options
Diffstat (limited to 'docs/html/training/improving-layouts/reusing-layouts.jd')
| -rw-r--r-- | docs/html/training/improving-layouts/reusing-layouts.jd | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/docs/html/training/improving-layouts/reusing-layouts.jd b/docs/html/training/improving-layouts/reusing-layouts.jd new file mode 100644 index 0000000..8f9729a --- /dev/null +++ b/docs/html/training/improving-layouts/reusing-layouts.jd @@ -0,0 +1,150 @@ +page.title=Re-using Layouts with <include/> +parent.title=Improving Performance of Layouts +parent.link=index.html + +trainingnavtop=true +previous.title=Optimizing Layout Hierarchies +previous.link=optimizing-layout.html +next.title=Loading Views On Demand +next.link=loading-ondemand.html + +@jd:body + + +<div id="tb-wrapper"> +<div id="tb"> + +<!-- table of contents --> +<h2>This lesson teaches you to</h2> +<ol> + <li><a href="#Create">Create a Re-usable Layout</a></li> + <li><a href="#Include">Use the <include> Tag</a></li> + <li><a href="#Merge">Use the <merge> Tag</a></li> +</ol> + +<!-- other docs (NOT javadocs) --> +<h2>You should also read</h2> +<ul> + <li><a href="{@docRoot}resources/articles/layout-tricks-reuse.html">Creating Reusable UI +Components</a></li> + <li><a href="{@docRoot}resources/articles/layout-tricks-merge.html">Merging Layouts</a></li> + <li><a +href="{@docRoot}guide/topics/resources/layout-resource.html#include-element">Layout +Resource</a></li> +</ul> + +</div> +</div> + + + +<p>Although Android offers a variety of widgets to provide small and re-usable interactive elements, +you might also need to re-use larger components that require a special layout. To efficiently +re-use complete layouts, you can use the {@code <include/>} and {@code <merge/>} tags +to embed another layout inside the current layout.</p> + +<p>Reusing layouts is particularly powerful as it allows you create reusable complex layouts. For +example, a yes/no button panel, or custom progress bar with description text. +It also means that any elements of your application that are common across multiple layouts can be +extracted, managed separately, then included in each layout. So while +you can create individual UI components by writing a custom {@link android.view.View}, you can +do it even more easily by re-using a layout file.</p> + + +<h2 id="Create">Create a Re-usable Layout</h2> + +<p>If you already know the layout that you want to re-use, create a new XML file and define the +layout. For example, here's a layout from the G-Kenya codelab that defines a title bar to be +included in each activity (<code>titlebar.xml</code>):</p> + +<pre> +<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" + android:layout_width=”match_parent” + android:layout_height="wrap_content" + android:background="@color/titlebar_bg"> + + <ImageView android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:src="@drawable/gafricalogo" /> +</FrameLayout> +</pre> + +<p>The root {@link android.view.View} should be exactly how you'd like it to appear in each +layout to which you add this layout.</p> + + +<h2 id="Include">Use the <include> Tag</h2> + +<p>Inside the layout to which you want to add the re-usable component, add the {@code +<include/>} tag. For example, here's a layout from the +G-Kenya codelab that includes the title bar from above:</p> + +<p>Here's the layout file:</p> + +<pre> +<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" + android:orientation="vertical" + android:layout_width=”match_parent” + android:layout_height=”match_parent” + android:background="@color/app_bg" + android:gravity="center_horizontal"> + + <strong><include layout="@layout/titlebar"/></strong> + + <TextView android:layout_width=”match_parent” + android:layout_height="wrap_content" + android:text="@string/hello" + android:padding="10dp" /> + + ... + +</LinearLayout> +</pre> + +<p>You can also override all the layout parameters (any {@code android:layout_*} attributes) of the +included layout's root view by specifying them in the {@code <include/>} tag. For +example:</p> + +<pre> +<include android:id=”@+id/news_title” + android:layout_width=”match_parent” + android:layout_height=”match_parent” + layout=”@layout/title”/> +</pre> + + + +<h2 id="Merge">Use the <merge> Tag</h2> + +<p>The {@code <merge />} tag helps eliminate redundant view groups in your view hierarchy +when including one layout within another. For example, if your main layout is a vertical {@link +android.widget.LinearLayout} in which two consecutive views can be +re-used in multiple layouts, then the re-usable layout in which you place the two views requires its +own root view. However, using another {@link android.widget.LinearLayout} as the root for the +re-usable layout would result in a vertical {@link android.widget.LinearLayout} inside a +vertical {@link android.widget.LinearLayout}. The nested {@link android.widget.LinearLayout} +serves no real purpose other than to slow down your UI performance.</p> + +<p>To avoid including such a redundant view group, you can instead use the +{@code <merge>} element as the root view for the re-usable layout. For example:</p> + +<pre> +<merge xmlns:android="http://schemas.android.com/apk/res/android"> + + <Button + android:layout_width="fill_parent" + android:layout_height="wrap_content" + android:text="@string/add"/> + + <Button + android:layout_width="fill_parent" + android:layout_height="wrap_content" + android:text="@string/delete"/> + +</merge> +</pre> + +<p>Now, when you include this layout in another layout (using the {@code <include/>} tag), the +system ignores the {@code <merge>} element and places the two buttons directly in the +layout, in place of the {@code <include/>} tag.</p> + |