Tips

Android UI 基本 LinearLayout

Android UI 基本 LinearLayout

AndroidのUIを作るうえで基本となる内容をまとめたいと思います。

レイアウト単位についてレイアウトの基本的なポイントについて説明を行いました。
Androidには基本的なレイアウトが用意されており、そのうちよく使うものが以下のレイアウトです。

  • LinearLayout
  • RelativeLayout
  • FrameLayout

他にAbsoluteLayoutもありますが、現在は非推奨となっているため取り上げません。

今回はこのうちLinearLayoutについて説明します。

LinearLayout

LinearLayoutはすべての子ビュー(そのViewGroup内に含まれるView要素)を縦方向あるいは横方向に一列に並べるレイアウトです。

orientation属性

LinearLayout内の子ビューの並び方はandroid:orientationによって指定することが出来ます。
縦一列に並べたい場合はverticalを、横一列に並べたい場合はhorizontalを与えます。

下は三つのButtonビューを縦一列に並べた例です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button_A" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button_B" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button_C" />
 
</LinearLayout>

linarlayout_vertical

次は横一列に並べた場合です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button_A" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button_B" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button_C" />
 
</LinearLayout>

linarlayout_horizontal

 

layout_weight属性

LinearLayoutは子ビューにlayout_weight属性を持たせることが出来ます。
layout_weightは子ビューがレイアウト内で占める領域を”重み付け”します。

次の例は三つのButtonビューを縦に等間隔で並べた場合です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="button_A"
        android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="button_B"
        android:layout_weight="1"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="button_C"
        android:layout_weight="1"/>
 
</LinearLayout>

linearlayout_weight

このようにlayout_weightを用いて子ビューを等間隔に表示したい場合のポイントは、子ビューの並べる方向の大きさ(layout_widthまたはlayout_height)を0dpで指定することです。このように指定しないと想定通りの動作をしません。

以上、基本となるレイアウトのひとつであるLinearLayoutについて説明しました。

Androidアプリ開発の必須知識!JAVAプログラミングを学べる連載リンク

はじめてのJAVA 連載

Recent News

Recent Tips

Tag Search