-
Notifications
You must be signed in to change notification settings - Fork 35
Expand file tree
/
Copy pathscreenarrangement.html
More file actions
305 lines (305 loc) · 9.94 KB
/
Copy pathscreenarrangement.html
File metadata and controls
305 lines (305 loc) · 9.94 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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!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>
Screen Arrangement Components - 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> > Screen Arrangement > ');</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>
Screen Arrangement Components
</h1>
<ul>
<li>
<a href="#HorizontalArrangement">
HorizontalArrangement
</a>
</li>
<li>
<a href="#TableArrangement">
TableArrangement
</a>
</li>
<li>
<a href="#VerticalArrangement">
VerticalArrangement
</a>
</li>
</ul>
<h2 id="HorizontalArrangement">
HorizontalArrangement
</h2>
<img alt="" src="images/horizontalarrangement.png" />
<p>
Use a horizontal arrangement component to display a group of components laid out
from left to right.
</p>
<p>
This component is a formatting element in which you place components that should be
displayed from left to right. If you want to have components displayed one over
another, use
<code>
VerticalArrangement
</code>
instead.
</p>
<p>
In a HorizontalArrangement, components are arranged along the horizontal axis,
vertically center-aligned.
</p>
<p>
If a HorizontalArrangement's Height property is set to Automatic, the actual height
of the arrangement is determined by the tallest component in the arrangement 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 Width 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>
Properties
</h3>
<dl>
<dt>
<code>
Visible
</code>
</dt>
<dd>
If true, component and its contents are visible.
</dd>
<dt>
<code>
Height
</code>
</dt>
<dd>
Horizontal arrangement height (y-size).
</dd>
<dt>
<code>
Width
</code>
</dt>
<dd>
Horizontal arrangement width (x-size).
</dd>
</dl>
<h2 id="TableArrangement">
TableArrangement
</h2>
<p>
Use a table arrangement component to display a group of components in a tabular
fashion.
</p>
<p>
This component is a formatting element in which you place components that should be
displayed in tabular form.
</p>
<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>
Properties
</h3>
<dl>
<dt>
<code>
Visible
</code>
</dt>
<dd>
If true, component and its contents are visible.
</dd>
<dt>
<code>
Rows (number-of-rows)
</code>
</dt>
<dd>
The number of rows in the table.
</dd>
<dt>
<code>
Columns (number-of-columns)
</code>
</dt>
<dd>
The number of columns in the table.
</dd>
<dt>
<code>
Height
</code>
</dt>
<dd>
Table arrangement height (y-size).
</dd>
<dt>
<code>
Width
</code>
</dt>
<dd>
Table arrangement width (x-size).
</dd>
</dl>
<h2 id="VerticalArrangement">
VerticalArrangement
</h2>
<img alt="" src="images/verticalarrangement.png" />
<p>
Use a vertical arrangement component to display a group of components laid out from
top to bottom, left-aligned.
</p>
<p>
This component is a formatting element in which you place components that should be
displayed one below another. The first child component is stored on top, the second
beneath it, and so on. If you want to have components displayed next to one
another, use
<code>
HorizontalArrangement
</code>
instead.
</p>
<p>
In a VerticalArrangement, components are arranged along the vertical axis,
left-aligned.
</p>
<p>
If a VerticalArrangement's Width property is set to Automatic, the actual width of
the arrangement is determined by the widest component in the arrangement 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 Height 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>
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.
<h3>
Properties
</h3>
<dl>
<dt>
<code>
Visible
</code>
</dt>
<dd>
If true, component and its contents are visible.
</dd>
<dt>
<code>
Height
</code>
</dt>
<dd>
Vertical arrangement height (y-size).
</dd>
<dt>
<code>
Width
</code>
</dt>
<dd>
Vertical arrangement width (x-size).
</dd>
</dl>
</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>