1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
=head1 NAME
hierarchyviewer - a tool to debug and optimize Android user interface
=head1 SYNOPSIS
hierarchyviewer
=head1 DESCRIPTION
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 Layout View) and a magnified inspector of the display (the Pixel Perfect
View).
To get the Hierarchy Viewer started:
=over 3
=item 1.
Connect your device or launch an emulator.
=item 2.
Launch Hierarchy Viewer from the shell or your desktop environment's menu.
=item 3.
In the window that opens, you'll see a list of Devices. When a device is
selected, a list of currently active Windows is displayed on the right. The
<Focused Window> is the window currently in the foreground, and also the
default window loaded if you do not select another.
=item 4.
Select the window that you'd like to inspect and click Load View Hierarchy. The
Layout View will be loaded. You can then load the Pixel Perfect View by clicking
the second icon at the bottom-left of the window.
=back
If you've navigated to a different window on the device, press Refresh Windows
to refresh the list of available windows on the right.
=head2 Layout View
The Layout View offers a look at the View layout and properties. It has three
views:
Tree View: a hierarchy diagram of the Views, on the left.
Properties View: a list of the selected View's properties, on the top-right.
Wire-frame View: a wire-frame drawing of the layout, on the bottom-right.
Select a node in the Tree View to display the properties of that element in the
Properties View. When a node is selected, the Wire-frame View also indicates the
bounds of the element with a red rectangle. Double click a node in the tree
(or select it, and click Display View) to open a new window with a rendering
of that element.
The Layout View includes a couple other helpful features for debugging your
layout: Invalidate and Request Layout. These buttons execute the respective
View calls, invalidate() and requestLayout(), on the View element currently
selected in the tree. Calling these methods on any View can be very useful when
simultaneously running a debugger on your application.
The Tree View can be resized by adjusting the zoom slider, below the diagram.
The number of View elements in the window is also given here. You should look
for ways to minimize the number of Views. The fewer View elements there are in
a window, the faster it will perform.
If you interact with the device and change the focused View, the diagram will
not automatically refresh. You must reload the Layout View by clicking Load View
Hierarchy.
=head2 Pixel Perfect View
The Pixel Perfect View provides a magnified look at the current device window.
It has three views:
Explorer View: shows the View hierarchy as a list, on the left.
Normal View: a normal view of the device window, in the middle.
Loupe View: a magnified, pixel-grid view of the device window, on the right.
Click on an element in the Explorer View and a "layout box" will be drawn in the
Normal View to indicate the layout position of that element. The layout box uses
multiple rectangles, to indicate the normal bounds, the padding and the margin
(as needed). The purple or green rectangle indicates the normal bounds of the
element (the height and width). The inner white or black rectangle indicates the
content bounds, when padding is present. A black or white rectangle outside the
normal purple/green rectangle indicates any present margins. (There are two
colors for each rectangle, in order to provide the best contrast based on the
colors currently in the background.)
A very handy feature for designing your UI is the ability to overlay an image
in the Normal and Loupe Views. For example, you might have a mock-up image of
how you'd like to layout your interface. By selecting Load... from the controls
in the Normal View, you can choose the image from your computer and it will be
placed atop the preview. Your chosen image will anchor at the bottom left
corner of the screen. You can then adjust the opacity of the overlay and begin
fine-tuning your layout to match the mock-up.
The Normal View and Loupe View refresh at regular intervals (5 seconds by
default), but the Explorer View does not. If you navigate away and focus on a
different View, then you should refresh the Explorer's hierarchy by clicking
Load View Hierarchy. This is even true when you're working in a window that
holds multiple Views that are not always visible. If you do not, although the
previews will refresh, clicking a View in the Explorer will not provide the
proper layout box in the Normal View, because the hierarchy believes you are
still focused on the prior View.
Optional controls include:
Overlay: Load an overlay image onto the view and adjust its opacity.
Refresh Rate: Adjust how often the Normal and Loupe View refresh their display.
Zoom: Adjust the zoom level of the Loupe View.
=head1 COPYRIGHT
This manual page is licensed under the Apache License, Version 2.0.
Copyright (C) 2013 www.linuxtopia.org
Copyright (C) 2013 Jakub Adam <jakub.adam@ktknet.cz>
|
