Chapter01：LinearLayoutの特徴

では、ようやくレイアウトXMLの説明に入ります。
今回は、サンプルアプリのChapter01でLinearLayoutの説明をします。

まだプロジェクトをインポートしていない場合は、こちらの記事を先に読んでください。

先に説明しておきますが、Androidのレイアウト要素には、以下の種類があります。

• LinearLayout(リニアレイアウト)
• RelativeLayout(リレーティブレイアウト)
• FrameLayout(フレームレイアウト)
• TableLayout(テーブルレイアウト)
• AbsoluteLayout(現在は非推奨)

5種類ありますが、ほとんどの場合、上の3種類のみを使います。特に、LinearLayoutとRelativeLayoutを多用するので、この講座（基本編）では、この2つに絞って説明します。

そもそもLayoutって何？

Layoutは、HTML的に平たくいうと、divタグみたいなものです。入れ物です。TableLayoutはtableタグみたいなものですが。しかし、名前が違うのでそれぞれ特徴があります。しかしここでは言及しません。

LinearLayoutって何？

LinearLayoutは、もっとも素直なレイアウトで、左上詰めで子要素を配置するレイアウトです。一番多用するレイアウトです。子要素を配置する方向（縦か横か）を決めることができます。
Chapter01の画面は以下のようになっています。

この画面はLinearLayoutというレイアウトとTextViewというウィジェットで構成されています。パッと見では、全部縦方向に配置されているようにみえるかもしれませんので、視覚的に表してみます。青い枠のLinearLayoutの中に、赤い枠のLinearLayoutが入っています。赤い枠のほうは、横方向にレイアウトを配置しています。

コードレビュー

では、レイアウトのソースコードを見てみましょう。
Sample01プロジェクトの、/res/layout/chapter01.xml を開いて下さい。

注目するべきところは、LinearLayoutという要素の、android:orientationという属性です。それ以外は単にテキストを表示しているだけなので、まぁそんなものだと思っておいてください。

ちなみに、layout_widthとlayout_heightは要素の横幅、縦幅を表します。fill_parentだと親要素分全部使います。つまり、width: 100%;です。wrap_contentは、必要な分だけ使うという指定です。数値でも指定可能ですが、ひとまずはこの2つを押さえましょう。また、match_parentというのもあります。2.2以降では、fill_parentではなく、match_parentを使いますが、Xperiaがある限りは、fill_parentを使わざるをえません…。

<?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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_linearlayout_vertical" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_2" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_3" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_linearlayout_horizontal" />
    <!-- ここから水平方向 -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter01_test_4" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter01_test_5" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter01_test_6" />
    </LinearLayout>
    <!-- ここまで水平方向 -->
    <!-- また垂直方向 -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_7" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_8" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/chapter01_test_9" />
</LinearLayout>

orientation属性は、子要素の配置方向を決定します。

• vertical・・・縦方向
• horizontal・・・横方向

途中に存在するLinearLayoutも、親要素のLinearLayoutの子要素なので、あくまで縦方向に配置される要素として置いてあります。しかし、その中身は横方向に配置されています。

単純な例でLinearLayoutを紹介しましたが、複雑なレイアウトも、ほとんどはLinearLayoutを入れ子にしたレイアウトです。縦方向の途中の要素で横方向のレイアウトが必要になったら、LinearLayoutを追加して、orientationをhorizontalに設定して配置。それを抜けたらまた縦方向。もし横方向内で縦のレイアウトが使いたい場合は、さらにLinearLayoutを入れ子にして…という感じです。

divタグの中にdivタグを入れて、さらにdivタグを入れて…というのに似ています。

LinearLayoutの特徴が分かっていただけましたでしょうか？
次回は、RelativeLayoutの特徴を説明します。