LinearLayout

使いやすいアプリケーションは、見た目がわかりやすく、また入力もしやすいものです。ですから画面レイアウトの設計と、それに基づいた実装はとても重要です。

画面レイアウトを制御するには、LinearLayout、RelativeLayout、FrameLayout、TableLayoutなどのクラスを使います。ここではLinearLayoutの使い方について書いてみます。LinearLayoutクラスはViewを縦または横に並べて配置するものです。

以下の例は、res/layout/main.xml を編集して、テキストを縦方向や横方向に配置します。方向の指定には「android:orientation」を使用します。「vertical」を指定すると縦方向、「horizontal」で横方向になります。

---

◆ 縦方向に並べる

まずはテキストを横方向に並べてみましょう。

Androidプロジェクトの設定

プロジェクト名:	LinearLayoutTest1a
ビルドターゲット:	Android 2.1-update1
アプリケーション名:	LinearLayoutTest1a
パッケージ名:	jp.co.triware.samples.LinearLayoutTest1a
アクティビティーの作成:	LinearLayoutTest1a
最小SDKバージョン:	7

LinearLayoutTest1a.java

package jp.co.triware.samples.LinearLayoutTest1a;

import android.app.Activity;
import android.os.Bundle;

public class LinearLayoutTest1a extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
        android:text="縦方向に"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
    <TextView
        android:text="配置します"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

「android:layout_width」と「android:layout_height」で幅と高さを指定します。「fill_parent」は親のサイズ、「wrap_content」はオブジェクト(今回はテキスト)のサイズに合わせます。

※Android 2.2以降は「fill_parent」ではなく「match_parent」が推奨されています。ここではAndroid 2.1を対象としていますので「fill_parent」を使用します。

実行結果

---

◆ 横方向に並べる

次はテキストを横方向に並べてみましょう。画面(横方向)を半分に区切って、それぞれ左詰めで表示してみます。

Androidプロジェクトの設定

プロジェクト名:	LinearLayoutTest1b
ビルドターゲット:	Android 2.1-update1
アプリケーション名:	LinearLayoutTest1b
パッケージ名:	jp.co.triware.samples.LinearLayoutTest1b
アクティビティーの作成:	LinearLayoutTest1b
最小SDKバージョン:	7

LinearLayoutTest1b.java

package jp.co.triware.samples.LinearLayoutTest1b;

import android.app.Activity;
import android.os.Bundle;

public class LinearLayoutTest1b extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	>
	<TextView
		android:text="横方向に"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		/>
	<TextView
		android:text="配置します"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_weight="1"
		/>
</LinearLayout>

「android:layout_weight」というプロパティは配置の重みを指定しています。これがないと上記の例では「横方向に」だけが表示されて、「配置します」が表示されませんので気をつけましょう。私は最初これに気づかず苦労しました。

実行結果

---

◆ 縦と横を組み合わせる

最後はLinearLayoutを組み合わせてみましょう。

LinearLayoutはネストして（入れ子にして）使うこともできます。以下の例では、画面を4分の1に区切って、それぞれの中央にテキストを表示します。横方向に並べるLinearLayoutを2つ用意して、それを縦方向に並べるLinearLayoutを作ります。

Androidプロジェクトの設定

プロジェクト名:	LinearLayoutTest1c
ビルドターゲット:	Android 2.1-update1
アプリケーション名:	LinearLayoutTest1c
パッケージ名:	jp.co.triware.samples.LinearLayoutTest1c
アクティビティーの作成:	LinearLayoutTest1c
最小SDKバージョン:	7

LinearLayoutTest1c.java

package jp.co.triware.samples.LinearLayoutTest1c;

import android.app.Activity;
import android.os.Bundle;

public class LinearLayoutTest1c extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        >
        <TextView
            android:text="左上"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            />
        <TextView
            android:text="右上"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        >
        <TextView
            android:text="左下"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            />
        <TextView
            android:text="右下"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_gravity="center_vertical"
            android:gravity="center"
            />
    </LinearLayout>
</LinearLayout>

「android:layout_gravity」はオブジェクトを親オブジェクトに対してどこに配置するか、「android:gravity」はオブジェクトの中身をどこに配置するかを指定します。

上の例では、TextViewにこの2つのプロパティがあります。「android:layout_gravity」でLinearLayoutの中央(縦方向)にTextViewを配置して、「android:gravity」で文字列をTextViewの中央(横方向)に配置するように指定しています。

実行結果