From 50e990c64fa23ce94efa76b9e72df7f8ec3cee6a Mon Sep 17 00:00:00 2001 From: Scott Main Date: Thu, 21 Jun 2012 17:14:39 -0700 Subject: Massive clobber of all HTML files in developer docs for new site design Change-Id: Idc55a0b368c1d2c1e7d4999601b739dd57f08eb3 --- .../guide/developing/debugging/debugging-ui.jd | 547 --------------------- 1 file changed, 547 deletions(-) delete mode 100644 docs/html/guide/developing/debugging/debugging-ui.jd (limited to 'docs/html/guide/developing/debugging/debugging-ui.jd') diff --git a/docs/html/guide/developing/debugging/debugging-ui.jd b/docs/html/guide/developing/debugging/debugging-ui.jd deleted file mode 100644 index 22748be..0000000 --- a/docs/html/guide/developing/debugging/debugging-ui.jd +++ /dev/null @@ -1,547 +0,0 @@ -page.title=Debugging and Profiling User Interfaces -parent.title=Debugging -parent.link=index.html -@jd:body - -
- -
- -

-Sometimes your application's layout can slow down your application. - To help debug issues in your layout, the Android SDK provides the Hierarchy Viewer and - layoutopt tools. -

- -

The Hierarchy Viewer application allows you to debug and optimize your user interface. It - provides a visual representation of the layout's View hierarchy (the View Hierarchy window) - and a magnified view of the display (the Pixel Perfect window).

- -

layoutopt is a command-line tool that helps you optimize the layouts and layout - hierarchies of your applications. You can run it against your layout files or resource - directories to quickly check for inefficiencies or other types of problems that could be - affecting the performance of your application.

- -

Debugging and Optimizing User Interfaces with Hierarchy Viewer

- -

Running Hierarchy Viewer and choosing a window

-

- To run Hierarchy Viewer, follow these steps:

-
    -
  1. - Connect your device or launch an emulator. -

    - To preserve security, Hierarchy Viewer can only connect to devices running a - developer version of the Android system. -

    -
    2. -
  2. - If you have not done so already, install the application you want to work with. -
    3. -
  3. - Run the application, and ensure that its UI is visible. -
    4. -
  4. - From a terminal, launch hierarchyviewer from the - <sdk>/tools/ - directory. -
    5. -
  5. - The first window you see displays a list of devices and emulators. To expand the list - of Activity objects for a device or emulator, click the arrow on the left. This displays a - list of the Activity objects whose UI is currently visible on the device or emulator. The - objects are listed by their Android component name. The list includes both your application - Activity and system Activity objects. A screenshot of this window appears in - figure 1. -
    6. -
  6. - Select the name of your Activity from the list. You can now look at its view - hierarchy using the View Hierarchy window, or look at a magnified image of the UI using - the Pixel Perfect window. -
    7. -
-

- To learn how to use the View Hierarchy window, go to - About the View Hierarchy window. To learn how to use the - Pixel Perfect window, go to About the Pixel Perfect window. -

- -

Figure 1. Hierarchy Viewer device window

-

About the View Hierarchy window

-

- The View Hierarchy window displays the View objects that form the UI of the - Activity that is running on your device or emulator. You use it to look at individual - View objects within the context of the entire View tree. For each View object, the View - Hierarchy window also displays rendering performance data. -

-

- To see the View Hierarchy window, run Hierarchy Viewer as described in - the section Running Hierarchy Viewer and choosing a window. Next, click - View Hierarchy at the top of the device window. -

-

- You should see four panes: -

- -

- When the UI of the current Activity changes, the View Hierarchy window is not automatically - updated. To update it, click Load View Hierarchy at the top of the window. -

-

- Also, the window is not updated if you switch to a new Activity. To update it, start by - clicking the window selection icon in the bottom left-hand corner of the window. This - navigates back to the Window Selection window. From this window, click the Android - component name of the new Activity and then click Load View Hierarchy - at the top of the window. -

-

- A screenshot of the View Hierarchy window appears in figure 2. -

- -

Figure 2. The View Hierarchy window

-

Working with an individual View in Tree View

-

- Each node in Tree View represents a single View. Some information is always visible. Starting - at the top of the node, you see the following: -

-
    -
  1. - View class: The View object's class. -
    2. -
  2. - View object address: A pointer to View object. -
    3. -
  3. - View object ID: The value of the - android:id - attribute. -
    4. -
  4. - Performance indicators: A set of three colored dots that indicate the rendering - speed of this View relative to other View objects in the tree. The three dots - represent (from left to right) the measure, layout, and draw times of the rendering. -

    - The colors indicate the following relative performance: -

    -
      -
    • - Green: For this part of the render time, this View is in the faster 50% of all - the View objects in the tree. For example, a green dot for the measure time means - that this View has a faster measure time than 50% of the View objects in the tree. -
      • -
    • - Yellow: For this part of the render time, this View is in the slower 50% of all - the View objects in the tree. For example, a yellow dot for the layout time means - that this View has a slower layout time than 50% of the View objects in the tree. -
      • -
    • - Red: For this part of the render time, this View is the slowest one in the tree. - For example, a red dot for the draw time means that this View takes the most - time to draw of all the View objects in the tree. -
      • -
    -
    5. -
  5. - View index: The zero-based index of the View in its parent View. If it is the only child, - this is 0. -
    6. -
-

- When you select a node, additional information for the View appears in a small window above - the node. When you click one of the nodes, you see the following: -

- -

- An annotated screenshot of an individual node in the Tree View window appears in figure 3. -

- -

Figure 3. An annotated node in Tree View

-

Debugging with View Hierarchy

-

- The View Hierarchy window helps you debug an application by providing a static display - of the UI. The display starts with your application's opening screen. As you step through - your application, the display remains unchanged until you redraw it by invalidating and - then requesting layout for a View. -

-

- To redraw a View in the display: -

- -

- Manually redrawing a View allows you to watch the View object tree and examine the properties of - individual View objects one step at a time as you go through breakpoints in your code. -

-

Optimizing with View Hierarchy

-

- View Hierarchy also helps you identify slow render performance. You start by looking at the - View nodes with red or yellow performance indicators to identify the slower View objects. As you - step through your application, you can judge if a View is consistently slow or slow only in - certain circumstances. -

-

- Remember that slow performance is not necessarily evidence of a problem, especially for - ViewGroup objects. View objects that have more children and more complex View objects render - more slowly. -

-

- The View Hierarchy window also helps you find performance issues. Just by looking at the - performance indicators (the dots) for each View node, you can see which View objects are the - slowest to measure, layout, and draw. From that, you can quickly identify the problems you - should look at first. -

-

Examining and Designing User Interfaces with Pixel Perfect

-

- Pixel Perfect is a tool for examining pixel properties and laying out UIs from a design drawing. -

-

About the Pixel Perfect window

-

- The Pixel Perfect window displays a magnified image of the screen that is currently - visible on the emulator or device. In it, you can examine the properties - of individual pixels in the screen image. You can also use the Pixel Perfect window - to help you lay out your application UI based on a bitmap design. -

-

- To see the Pixel Perfect window, run Hierarchy Viewer, as described in - the section Running Hierarchy Viewer and choosing a window. Next, click - Inspect Screenshot at the top of the device window. The Pixel Perfect window - appears. -

-

- In it, you see three panes: -

- -

- The panes are not automatically refreshed when you change one of the View objects or go to - another Activity. To refresh the Pixel Perfect pane and the Loupe pane, click - Refresh Screenshot at the top of the window. This will change the panes - to reflect the current screen image. You still may need to refresh the View Object pane; - to do this, click Refresh Tree at the top of the window. -

-

- To automatically refresh the panes while you are debugging, set - Auto Refresh at the top of the window, and then set a refresh rate - with the Refresh Rate slider at the bottom of the Loupe pane. -

-

Working with Pixel Perfect overlays

-

- You often construct a UI based on a design done as a bitmap image. The Pixel Perfect window - helps you match up your View layout to a bitmap image by allowing you to load the bitmap as an - overlay on the screen image. -

-

- To use a bitmap image as an overlay: -

- -

- The overlay is not saved as part of the screenshot when you save the screen image as a PNG - file. -

-

- A screenshot of the Pixel Perfect window appears in figure 4. -

- -

Figure 4. The Pixel Perfect window

-

Optimizing layouts with layoutopt

-

- The layoutopt tool lets you analyze the XML files that define your - application's UI to find inefficiencies in the view hierarchy.

- -

- To run the tool, open a terminal and launch layoutopt <xmlfiles> - from your SDK tools/ directory. The <xmlfiles> argument is a space- - delimited list of resources you want to analyze, either uncompiled resource xml files or - directories of such files. -

-

- The tool loads the specified XML files and analyzes their definitions and - hierarchies according to a set of predefined rules. For every issue it detects, it - displays the following information: -

- -

The following is a sample of the output from the tool:

-
-$ 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/>
-samples/too_deep.xml
-   -1:-1 This layout has too many nested layouts: 13 levels, it should have <= 10!
-   20:81 This LinearLayout layout or its LinearLayout parent is useless
-   24:79 This LinearLayout layout or its LinearLayout parent is useless
-   28:77 This LinearLayout layout or its LinearLayout parent is useless
-   32:75 This LinearLayout layout or its LinearLayout parent is useless
-   36:73 This LinearLayout layout or its LinearLayout parent is useless
-   40:71 This LinearLayout layout or its LinearLayout parent is useless
-   44:69 This LinearLayout layout or its LinearLayout parent is useless
-   48:67 This LinearLayout layout or its LinearLayout parent is useless
-   52:65 This LinearLayout layout or its LinearLayout parent is useless
-   56:63 This LinearLayout layout or its LinearLayout parent is useless
-samples/too_many.xml
-   7:413 The root-level <FrameLayout/> can be replaced with <merge/>
-   -1:-1 This layout has too many views: 81 views, it should have <= 80!
-samples/useless.xml
-   7:19 The root-level <FrameLayout/> can be replaced with <merge/>
-   11:17 This LinearLayout layout or its FrameLayout parent is useless
-
-- cgit v1.1