-
Notifications
You must be signed in to change notification settings - Fork 35
Expand file tree
/
Copy pathsizes.html
More file actions
219 lines (219 loc) · 8.24 KB
/
Copy pathsizes.html
File metadata and controls
219 lines (219 loc) · 8.24 KB
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="App Inventor for Android" name="description" />
<meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords" />
<title>
Activity Starter - App Inventor for Android
</title>
<link href="/static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico" />
<link href="/static/images/appinventor-16.png" rel="icon" type="image/png" />
<link href="/static/css/appinventor.css" rel="stylesheet" />
<script src="http://www.google.com/js/gweb/analytics/autotrack.js">
</script>
<script>
var tracker = new gweb.analytics.AutoTrack({
profile: 'UA-5856106-2'
});
</script>
<script language = "JavaScript" src="/static/scripts/HeaderAndFooter.js"></script>
<style>
img.c2 {border-width:0}
div.c1 {clear:both;}
</style>
</head>
<body>
<script language = "JavaScript">createHeader('<div id="navigation-breadcrumb"> <a href="/learn/">Learn</a> > <a href="/learn/reference/">Reference</a> > Sizes > ');</script><br>
<div id="aiac">
<div class="main-container">
<div class="customhr customhr-gray">
</div>
<div class="content">
<div class="content-body">
<div class="learn-page">
<h1>
Specifying sizes of components
</h1>
<p>
When you create a visible component in the designer, you are typically given the
opportunity to specify its height and width. There are three choices:
</p>
<ol>
<li>
<i>
Automatic:
</i>
Size is chosen by the system
</li>
<li>
<i>
Fill parent:
</i>
Size is chosen to fill the space available.
</li>
<li>
<i>
Size specified in pixels
</i>
</li>
</ol>
Since not all Android devices have he same screen size, it's good to avoid
specifying sizes numerically as pixels if possible.
<p>
The notions of Automatic and Fill parent carry over to components that can contain
other components, such as vertical and horizontal arrangements, as described below.
</p>
<h3>
The Screen
</h3>
<p>
The Screen component has a
<code>
Scrollable
</code>
property. When the Scrollable
property is checked, the Screen component behaves like a VerticalArrangement whose
Height property is set to Automatic. When the Scrollable property is not checked,
the Screen component behaves like a VerticalArrangement whose Height property is
specified in pixels.
</p>
<h3>
VerticalArrangement
</h3>
<p>
In a VerticalArrangement, components are arranged along the vertical axis,
left-aligned.
</p>
<p>
If a VerticalArrangement's
<code>
Width
</code>
property is set to Automatic, the
actual width of the arrangement is determined by the widest component whose Width
property is not set to Fill Parent. If a VerticalArrangement's Width property is
set to Automatic and it contains only components whose Width properties are set to
Fill Parent, the actual width of the arrangement is calculated using the automatic
widths of the components. If a VerticalArrangement's Width property is set to
Automatic and it is empty, the width will be 100.
</p>
<p>
If a VerticalArrangement's
<code>
Height
</code>
property is set to Automatic, the
actual height of the arrangement is determined by the sum of the heights of the
components.
<b>
If a VerticalArrangement's Height property is set to Automatic, any
components whose Height properties are set to Fill Parent will behave as if they
were set to Automatic.
</b>
</p>
<p>
If a VerticalArrangement's Height property is set to Fill Parent or specified in
pixels, any components whose Height properties are set to Fill Parent will equally
take up the height not occupied by other components.
</p>
<h3>
HorizontalArrangement
</h3>
<p>
In a HorizontalArrangement, components are arranged along the horizontal axis,
vertically center-aligned.
</p>
<p>
If a HorizontalArrangement's
<code>
Height
</code>
property is set to Automatic, the
actual height of the arrangement is determined by the tallest component whose
Height property is not set to Fill Parent. If a HorizontalArrangment's Height
property is set to Automatic and it contains only components whose Height
properties are set to Fill Parent, the actual height of the arrangement is
calculated using the automatic heights of the components. If a
HorizontalArrangement's Height property is set to Automatic and it is empty, the
height will be 100.
</p>
<p>
If a HorizontalArrangement's
<code>
Width
</code>
property is set to Automatic, the
actual width of the arrangement is determined by the sum of the widths of the
components.
<b>
If a HorizontalArrangement's Width property is set to Automatic, any
components whose Width properties are set to Fill Parent will behave as if they
were set to Automatic.
</b>
</p>
<p>
If a HorizontalArrangement's Width property is set to Fill Parent or specified in
pixels, any components whose Width properties are set to Fill Parent will equally
take up the width not occupied by other components.
</p>
<h3>
TableArrangement
</h3>
<p>
In a TableArrangement, components are arranged in a grid of rows and columns, with
not more than one component visible in each cell.
<b>
If multiple components occupy
the same cell, only the last one will be visible.
</b>
</p>
<p>
Within each row, components are vertically center-aligned.
</p>
<p>
The width of a column is determined by the widest component in that column. When
calculating column width, the automatic width is used for components whose Width
property is set to Fill Parent.
<b>
However, each component will always fill the
full width of the column that it occupies.
</b>
</p>
<p>
The height of a row is determined by the tallest component in that row whose Height
property is not set to Fill Parent. If a row contains only components whose Height
properties are set to Fill Parent, the height of the row is calculated using the
automatic heights of the components.
</p>
<h3>
Canvas
</h3>
<p>
Only Balls and ImageSprites can be placed in a Canvas. Each Ball and ImageSprite is
positioned on the canvas based on its X and Y properties. A Ball's width and height
is always the diameter of the ball. The actual width/height of an ImageSprite whose
Width/Height property is set to Automatic or Fill Parent will be the width/height
of the image.
</p>
</div>
</div>
</div>
<div class="footer">
<script language = "JavaScript">createFooter();</script><br>
<div class="footer-lastupdate">
<script>
if (document.lastModified != '') {
var m = "Page last updated: " + document.lastModified;
var p = m.length-8;
document.writeln("<center>");
document.write(m.substring(p, 0));
document.writeln("<\/center>");
}
</script>
</div>
</div>
</div>
</div>
</body>
</html>