布局介绍

本文介绍了Android里常用的几种布局

①FrameLayout

FrameLayout是所有的Layout里面最简单的布局
FrameLayout类是对应Android布局的一个View。
FrameLayout的View是在左上角显示的，有多个子View的时候，按顺序追加覆盖即可。

根据Android版本不一样，执行结果也是不一样的。
上面的布局执行结果如下：

②LinearLayout

LinearLayout类是在横向或纵向进行配置的布局Layout

  • 縦方向　android:orientation="vertical"

  • 横方向　android:orientation="horizontal"

注意

各按钮的文字要完全表示出来的话，各自android:layout_weight属性要设为"1"。
weight的设定是给元素加权重。空白的地方，根据权重进行表示。没设的话，视同0
那么余白就会表示出来

③RelativeLayout

RelativeLayout是各个部件之间相互关联决定位置的Layout
相对于别的View可以指定相对位置

  • RelativeLayoutのすべての端の埋め込みサイズを指定できる 
1
android:padding="10dip"
  • TextViewの位置はデフォールトとする
  • EditTextはTextViewの下に設定します 
1
android:layout_below="@id/label"
  • 「取消」ボタンは親Viewの右側に配置する 
1
2
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
  • 「確認」ボタンは「取消」ボタンの左側、かつ「確認」ボタンの上端と「取消」ボタンの上端を揃える 
1
2
android:layout_toLeftOf="@id/cancel"
android:layout_alignTop="@id/cancel"

④TableLayout

TableLayoutは、TableRowというレイアウトを入れ子にして使用します。HTMLの<table>タグと<tr>タグによく似ていて、TableRowに含まれる要素数がテーブル全体のカラム数になります。カラムの幅が広いものに自動的に合わせられるため、整列させるのがとても簡単です。

■ TableLayoutの細かい設定
　以下は、Android Layout Editorから設定可能なそれぞれのレイアウトまたはウィジェットのプロパティです。
- TableLayout - android:shrinkColumns="0"
カラム幅を抑えたい場合に指定。複数指定する場合はカンマで区切る。カラムインデックスは、0から始まるので要注意
- TableLayout - android:stretchColumns="1"
カラム幅を広げたい場合に指定。指定すると余白部分が割り当てられる
- TableRow - android:layout_width="fill_parent"
TableRowを横幅いっぱいに使用するために設定

⑤AbsoluteLayout

AbsoluteLayoutは表示位置を絶対座標で指定するレイアウトです。

座標は、図2のように指定しています。

このレイアウトは余白を自動的に使用することはできず、ウィジェットの縦横のサイズを変えたい場合、自分で指定しなければなりません。
通常、デバイスごとに画面サイズが異なるため、絶対座標やサイズを指定すると、デバイスの画面に対して大き過ぎたり小さ過ぎたりすることがあるため、
特別な理由がない限りこのレイアウトを使用することはお勧めできません。

■ AbsoluteLayoutの細かい設定
- TextView/EditText - android:layout_x="..."
対象のウィジェットのX座標を指定。単位はピクセル
- TextView/EditText - android:layout_y="..."
対象のウィジェットのY座標を指定。単位はピクセル
- EditText/Button - android:layout_width="..."
対象のウィジェットの幅を指定。単位はピクセル

Layoutの実例

◆レイアウトの使用を「支払計算プログラム」で簡単な説明します。

  • 全体のレイアウトは以下である（RelativeLayoutとLinearLayoutの組合）

下面的[XMLを参照する]

  • 通常の場合に、RelativeLayoutとLinearLayoutを利用して、プログラム画面のレイアウトをすることができる。 RelativeLayoutは他のビューに対する相対位置の指定することが出来ます
    ▲例１、対象のビュー（上記図の②）の水平配置を親View（上記図の①）の幅に対して中央となるように配置したい場合には、 「android:layout_centerHorizontal="true"」 を指定します。

▲例２、Viewを親Viewの上下左右側に配置したい場合には、android:layout_alignParentTop／Bottom／Right／Leftを指定します。
「ボタン計算」と「ボタン終了」の設定は以下である

なお、基準となるViewの位置を指定し、追加するViewはその相対位置を指定する場合もある。
「ボタンＣ」と「ボタンＡＣ」の設定は以下である

「android:layout_toLeftOf="id/buttonAllClear"」を指定して、「ボタンＣ」を「ボタンＡＣ」の左側に配置されている。

LinearLayoutは縦又は横方向にビューを配置していくレイアウトです。
「支払計算プログラム」で、水平配置のView、横方向を設定します。上下配置のView、縦方向を設定します。
例、請求額のラベル（TextView）、請求額の入力（EditText）と単位（円　TextView）のレイアウトは水平配置とします。
それらの親View（LinearLayout：③）と総人数などの親View（LinearLayout：④）は上下配置とします

  • 画面の各Ｖｉｅｗの表示文字はLayout配置ファイルに指定します。

  • 共通のプロパディは様式ファイル「Sytle.xml」に記載します。
    下面的[様式XMLを参照する]

  • 上下に並べる場合の配置
    TextViewを上下行に並べる場合、最長文字のTextViewの右端にあわせる

階層ビューア

階層ビューア(Hierarchy Viewer)は、ユーザインターフェイスのデバッグと最適化を可能にするアプリケーションです。
これによりレイヤのビュー階層 ( レイアウトビュー ) を視覚的に表現し、拡大表示( ピクセルパーフェクトビュー ) による検査ができるようになります。
以下の手順を開始して階層ビューを取得します。

  1. デバイスを接続するか、エミュレータを起動します。
  2. ターミナルで、SDKの /tools ディレクトリから hierarchyviewer を起動します。
  3. 開いたウィンドウに Devices のリストが表示されます。デバイスが選択されると、現在アクティブになっている Windows のリストが右側に表示されます。 は現在フォアグランドのウィンドウで、別のものを選択しなければデフォルトのウィンドウがロードされています。
  4. 調べたいウィンドウを選択し、 Load View Hierarchy をクリックします。レイアウトビューが表示されます。
    その後、ウィンドウの左下にある 2 番目のアイコンをクリックすると、ピクセルパーフェクトビューがロードされます。
    デバイスで別のウィンドウにナビゲートした場合は、Refresh Windows を押して右の利用可能なウィンドウのリストをリフレッシュしてください。
  5. Inspect Screenshot をクリックします。ピクセルパーフェクトビューが表示されます。

階層ビューアの主画面

XMLを参照する

main.xml

  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
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="10dip"
        android:paddingBottom="10dip"
        android:text="@string/title"
        android:gravity="center"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:paddingBottom="2dip">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_marginLeft="12dip"
                    android:gravity="center"
                    android:text="@string/text_claim_amount" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_marginLeft="4dip"
                    android:layout_width="100dip"
                    android:id="@+id/editTextClaimAmount" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_marginLeft="2dip"
                    android:gravity="center"
                    android:text="@string/text_money" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="2dip">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:text="@string/text_total_persons"
                    android:layout_marginLeft="12dip"
                    android:gravity="center" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="60dip"
                    android:layout_marginLeft="43dip"
                    android:id="@+id/editTextTotalPersons" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:text="@string/text_person"
                    android:layout_marginLeft="4dip"
                    android:gravity="center" />
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_average_of_amount" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_ad"
                    android:layout_marginLeft="35dip" />
                <TextView
                    style="@style/style_text_view_numeric"
                    android:layout_width="50dip"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:id="@+id/textViewAverageOfAmount" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="7dip" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dip"
        android:background="#FF909090"
        android:layout_marginTop="6dip"
        android:layout_marginBottom="6dip" />
    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_fixed_person_a"
                    android:layout_marginRight="2dip" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="60dip"
                    android:id="@+id/editTextFixedPersonA" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_person"
                    android:layout_marginLeft="2dip" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_ad"
                    android:layout_marginLeft="6dip" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="100dip"
                    android:id="@+id/editTextFixedPaymentA" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="4dip" />
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_fixed_person_b"
                    android:layout_marginRight="2dip" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="60dip"
                    android:id="@+id/editTextFixedPersonB" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_person"
                    android:layout_marginLeft="2dip" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_ad"
                    android:layout_marginLeft="6dip" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="100dip"
                    android:id="@+id/editTextFixedPaymentB" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="4dip" />
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_fixed_person_c"
                    android:layout_marginRight="2dip" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="60dip"
                    android:id="@+id/editTextFixedPersonC" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_person"
                    android:layout_marginLeft="2dip" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_ad"
                    android:layout_marginLeft="6dip" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="100dip"
                    android:id="@+id/editTextFixedPaymentC" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="4dip" />
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dip"
                android:layout_marginBottom="6dip">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_remnant_person"
                    android:layout_marginLeft="70dip" />
                <TextView
                    style="@style/style_text_view_numeric"
                    android:layout_width="40dip"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:layout_marginLeft="2dip"
                    android:id="@+id/textViewRemnantPerson" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_person"
                    android:layout_marginLeft="2dip" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_ad"
                    android:layout_marginLeft="8dip" />
                <TextView
                    style="@style/style_text_view_numeric"
                    android:layout_width="66dip"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:id="@+id/textViewRemnantPayment" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="9dip" />
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="82dip"
                    android:layout_height="wrap_content"
                    android:text="@string/text_adjust_payment"
                    android:layout_marginLeft="70dip" />
                <EditText
                    style="@style/style_edit_text"
                    android:layout_width="100dip"
                    android:layout_marginLeft="2dip"
                    android:id="@+id/editTextAdjustPayment" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="3dip" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dip"
        android:background="#FF909090"
        android:layout_marginTop="3dip"
        android:layout_marginBottom="6dip" />
    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true">
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_total_payment"
                    android:layout_marginLeft="110dip" />
                <TextView
                    style="@style/style_text_view_numeric"
                    android:layout_width="80dip"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:layout_marginLeft="12dip"
                    android:id="@+id/textViewTotalPayment" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="7dip" />
            </LinearLayout>
            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dip">
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_difference"
                    android:layout_marginLeft="134dip" />
                <TextView
                    style="@style/style_text_view_numeric"
                    android:layout_width="80dip"
                    android:layout_height="wrap_content"
                    android:text="0"
                    android:layout_marginLeft="12dip"
                    android:id="@+id/textViewDifference" />
                <TextView
                    style="@style/style_text_view_string"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/text_money"
                    android:layout_marginLeft="7dip" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="2dip"
        android:background="#FF909090"
        android:layout_marginTop="6dip"
        android:layout_marginBottom="6dip" />
    <RelativeLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent">
        <Button
            style="@style/style_button"
            android:id="@+id/buttonAllClear"
            android:text="@string/button_all_clear"
            android:layout_marginTop="10dip"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true" />
        <Button
            style="@style/style_button"
            android:id="@+id/buttonClear"
            android:text="@string/button_clear"
            android:layout_toLeftOf="@id/buttonAllClear"
            android:layout_alignTop="@id/buttonAllClear" />
        <Button
            style="@style/style_button"
            android:id="@+id/buttonCalculate"
            android:text="@string/button_calculate"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true" />
        <Button
            style="@style/style_button"
            android:id="@+id/buttonClose"
            android:text="@string/button_close"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true" />
    </RelativeLayout>
</LinearLayout>

様式XMLを参照する

style.xml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="style_text_view_string">
        <item name="android:textSize">12sp</item>
        <item name="android:layout_height">35dip</item>
    </style>
    <style name="style_text_view_numeric">
        <item name="android:textSize">12sp</item>
        <item name="android:layout_height">35dip</item>
        <item name="android:gravity">right</item>
    </style>
    <style name="style_edit_text">
        <item name="android:textSize">12sp</item>
        <item name="android:layout_height">35dip</item>
        <item name="android:numeric">integer</item>
        <item name="android:gravity">right</item>
        <item name="android:singleLine">true</item>
    </style>
    <style name="style_button">
        <item name="android:layout_width">50dip</item>
        <item name="android:layout_height">40dip</item>
    </style>
</resources>

by 賀山中