diff options
Diffstat (limited to 'docs/html/training/improving-layouts/optimizing-layout.jd')
| -rw-r--r-- | docs/html/training/improving-layouts/optimizing-layout.jd | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/docs/html/training/improving-layouts/optimizing-layout.jd b/docs/html/training/improving-layouts/optimizing-layout.jd new file mode 100644 index 0000000..3237780 --- /dev/null +++ b/docs/html/training/improving-layouts/optimizing-layout.jd @@ -0,0 +1,156 @@ +page.title=Optimizing Layout Hierarchies +parent.title=Improving Performance of Layouts +parent.link=index.html + +trainingnavtop=true +next.title=Re-using Layouts with <include/> +next.link=reusing-layouts.html + +@jd:body + + + +<div id="tb-wrapper"> +<div id="tb"> + +<!-- table of contents --> +<h2>This lesson teaches you to</h2> +<ol> + <li><a href="#Inspect">Inspect Your Layout</a></li> + <li><a href="#Revise">Revise Your Layout</a></li> + <li><a href="#Layoutopt">Use Layoutopt</a></li> +</ol> + +<!-- other docs (NOT javadocs) --> +<h2>You should also read</h2> +<ul> + <li><a href="{@docRoot}guide/topics/ui/declaring-layout.html">XML Layouts</a></li> + <li><a +href="{@docRoot}guide/topics/resources/layout-resource.html#include- element">Layout +Resource</a></li> +</ul> + +</div> +</div> + + +<p>It is a common misconception that using the basic layout structures leads to the most efficient +layouts. However, each widget and layout you add to your application requires initialization, +layout, and drawing. For example, using nested instances of {@link android.widget.LinearLayout} can +lead to an excessively deep view hierarchy. Furthermore, nesting several instances of {@link +android.widget.LinearLayout} that use the {@code layout_weight} parameter can be especially +expensive as each child needs to be measured twice. This is particularly important when the layout +is inflated repeatedly, such as when used in a {@link android.widget.ListView} or {@link +android.widget.GridView}.</p> + +<p>In this lesson you'll learn to use <a +href="{@docRoot}guide/developing/tools/hierarchy-viewer.html">Heirachy Viewer</a> and <a +href="{@docRoot}guide/developing/tools/layoutopt.html">Layoutopt</a> to examine and optimize your +layout.</p> + + + +<h2 id="Inspect">Inspect Your Layout</h2> + +<p>The Android SDK tools include a tool called <a +href="{@docRoot}guide/developing/tools/hierarchy-viewer.html">Heirachy Viewer</a> that allows +you to analyze your layout while your application is running. Using this tool helps you discover +bottlenecks in the layout performance.</p> + +<p>Hierarchy Viewer works by allowing you to select running processes on a connected device or +emulator, then display the layout tree. The traffic lights on each block represent its Measure, +Layout and Draw performance, helping you identify potential issues.</p> + +<p>For example, figure 1 shows a layout that's used as an item in a {@link +android.widget.ListView}. This layout shows a small bitmap image on the left and two stacked items +of text on the right. It is especially important that layouts that will be inflated multiple +times—such as this one—are optimized as the performance +benefits will be multiplied.</p> + +<img src="{@docRoot}images/training/layout-listitem.png" alt="" /> +<p class="img-caption"><strong>Figure 1.</strong> Conceptual layout for an item in a {@link +android.widget.ListView}.</p> + +<p>The {@code hierarchyviewer} tool is available in {@code <sdk>/tools/}. When opened, +the Hierarchy Viewer shows a list of available devices and its running components. Click +<strong>Load View Hierarchy</strong> to view the layout hierarchy of the selected component. For +example, figure 2 shows the layout for the list item illustrated by figure 1.</p> + +<div style="float:left;width:455px"> +<img src="{@docRoot}images/training/hierarchy-linearlayout.png" alt="" /> +<p class="img-caption"><strong>Figure 2.</strong> Layout hierarchy for the layout in figure 1, +using nested instances of {@link android.widget.LinearLayout}.</p> +</div> + +<div style="float:left;width:155px;margin-left:2em"> +<img src="{@docRoot}images/training/hierarchy-layouttimes.png" alt="" /> +<p class="img-caption"><strong>Figure 3.</strong> Clicking a hierarchy node shows its +performance times.</p> +</div> + +<p style="clear:left">In figure 2, you can see there is a 3-level hierarchy with some problems +laying out the text items. Clicking on the items shows the time taken for each stage of the process +(figure 3). It becomes clear which items are taking the longest to measure, layout, and render, and +where you should spend time optimizing.</p> + +<p>The timings for rendering a complete list item using this layout are:</p> +<ul> + <li>Measure: 0.977ms</li> + <li>Layout: 0.167ms</li> + <li>Draw: 2.717ms</li> +</ul> + + +<h2 id="Revise">Revise Your Layout</h2> + +<p>Because the layout performance above slows down due to a nested {@link +android.widget.LinearLayout}, the performance might improve by flattening the layout—make +the layout shallow and wide, rather than narrow and deep. A {@link android.widget.RelativeLayout} as +the root node allows for such layouts. So, when this design is converted to use {@link +android.widget.RelativeLayout}, you can see that the layout becomes a 2-level hierarchy. Inspection +of the new layout looks like this:</p> + +<img src="{@docRoot}images/training/hierarchy-relativelayout.png" alt="" /> +<p class="img-caption"><strong>Figure 4.</strong> Layout hierarchy for the layout in figure 1, +using {@link android.widget.RelativeLayout}.</p> + +<p>Now rendering a list item takes:</p> +<ul> + <li>Measure: 0.598ms</li> + <li>Layout: 0.110ms</li> + <li>Draw: 2.146ms</li> +</ul> + +<p>Might seem like a small improvement, but this time is multiplied several times because this +layout is used for every item in a list.</p> + +<p>Most of this time difference is due to the use of {@code layout_weight} in the {@link +android.widget.LinearLayout} design, which can slow down the speed of measurement. It is just one +example of how each layout has appropriate uses and you should carefully consider whether using +layout weight is necessary.</p> + + +<h2 id="Layoutopt">Use Layoutopt</h2> + +<p>It is always good practice to also run the <a +href="{@docRoot}guide/developing/tools/layoutopt.html">layoutopt</a> tool on your final layout files +to search for places in your view hierarchy that may be optimized. Layoutopt is also in your SDK +{@code tools/} directory and takes a layout directory name or a space-separated list of layout files +that you'd like to inspect.</p> + +<p>When you run {@code layoutopt} on a layout file, it prints a line number for each issue found, a +description of the issue, and for some types of issues it also suggests a resolution. For +example:</p> + +<pre class="no-pretty-print classic"> +$ layoutopt samples/ +samples/compound.xml + 7:23 The root-level <FrameLayout/> can be replaced with <merge/> + 11:21 This LinearLayout layout or its FrameLayout parent is useless +samples/simple.xml + 7:7 The root-level <FrameLayout/> can be replaced with <merge/> +</pre> + +<p>After you apply the suggested layout optimizations, run Hierarchy Viewer again to inspect the +performance changes.</p> + |