Androidアプリ入門 No.33 LinearLayoutの基本

LinearLayout

LinearLayoutの基本

ここまでの例でずっと使ってきているが、最初にLinearLayoutの基本を解説する。主な属性は以下となる。

属性	説明
orientation	horizontalかverticalを指定する。それぞれ水平方向、垂直方向へのレイアウト。
background	背景色。
baselineAligned	ベースラインに合わせて配置するか。
baselineAlignedChlidIndex	レイアウト内のどのコンポーネントにベースラインを合わせるかindexを指定する。

まずは、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="240dip"
        >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="160dip"
            android:layout_height="fill_parent"
            android:background="#f00"
            >
        </LinearLayout>
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="160dip"
            android:layout_height="fill_parent"
            android:background="#0f0"
            >
        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="240dip"
        android:background="#00f"
        >
    </LinearLayout>
</LinearLayout>

MainActivity.javaは以下のようにする。レイアウトファイルを読み込むだけとなる。

package sample.at;

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

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

実行結果は以下。

次に、LinearLayoutだけだとわかりにくい部分もあるためTextViewを配置して動作を確認する。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="wrap_content"
        android:background="#f00"
        >
        <TextView
            android:text="あいうえお"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <TextView
            android:text="かきくけこ"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <TextView
            android:text="さしすせそ"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <TextView
            android:text="たちつてと"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <TextView
            android:text="なにぬねの"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        >
        <TextView
            android:text="あいうえおかきくけこさしすせそたちつてとなにぬねの"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
    </LinearLayout>
</LinearLayout>

実行結果は以下。horizontalでレイアウトされたTextViewははみ出した場合最後のTextViewだけが折り返される。

次に、きれいにレイアウトするためのbaselineAligned属性について解説する。

<?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="wrap_content"
        android:background="#f00"
        android:baselineAligned="false"
        >
        <TextView
            android:text="あいうえお"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <EditText
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:baselineAligned="true"
        >
        <TextView
            android:text="あいうえお"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <EditText
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00f"
        android:baselineAligned="true"
        >
        <TextView
            android:text="あいうえお"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <EditText
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            />
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            >
            <EditText
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                />
            <EditText
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

実行結果は以下。1行目はbaselineAlignedをfalseに指定しているため縦位置に中央ぞろえされずに左上からコンポーネントが配置される。そのため、EditTextに対してTextViewが上部に配置されている。
対して、2行目はbaselineAlignedをtrueに指定しているため縦位置に中央ぞろえされている。
最後の3行目は、一番最後にLinearLayoutで縦方向にEditTextを並べている。こういった場合、何も指定しないと最初のコンポーネントに合わせて位置合わせが行われるため以下の実行結果のようになっている。

次に、baselineAlignedChildIndexを1にして動作を確認する。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="wrap_content"
        android:background="#f00"
        android:baselineAligned="false"
        >
        <TextView
            android:text="あいうえお"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <EditText
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#0f0"
        android:baselineAligned="true"
        >
        <TextView
            android:text="あいうえお"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <EditText
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00f"
        android:baselineAligned="true"
        >
        <TextView
            android:text="あいうえお"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#000"
            />
        <EditText
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            />
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:baselineAlignedChildIndex="1"
            >
            <EditText
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                />
            <EditText
                android:layout_width="50dp"
                android:layout_height="wrap_content"
                />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

実行結果は以下。縦方向に配置したコンポーネントのindexが1つまり2番目のコンポーネントに合わせて配置されているのがわかる。