Chapter09: marginとpaddingについて

今回はmarginとpaddingについてです。
marginとpaddingについては、感覚的にはCSSと同じです。ただ、border領域がありません。borderは別途background属性でdrawable(画像もしくは描画を表すxml)指定で表現することになります。

• padding・・・要素から青枠までの領域（background属性が適用される範囲）
• margin・・・青枠から赤枠までの領域

marginは他要素からの距離になるので、Root要素（一番最初に定義されるLayoutなりView
なり）にmarginを定義しても、あまり意味がありません（定義できるけど動作が変？）。

marginを定義するのは、何かしらの子要素に対してのみ、行いましょう。


では、サンプルを見てみましょう。
Sample02アプリを起動して、メニューを押してchapter09を選んでください。
以下のような画面になります。

LinearLayoutのhorizontalを3つ準備して

• marginのみ設定
• paddingのみ設定
• marginとpaddingの両方設定

を作ってみました。background属性がわかりやすいように、色を付けています。
パッと見た感じ、わかりにくいので、ちょっと解説用に矢印をつけたバージョンが以下です。

marginのみでTop, Leftなどを別々に指定みてみたところ、marginのみではその通りに反映されました。

ところが、paddingのみで指定したところ、marginのときのようにはなりませんでした。ベースラインがpaddingTopの高いほうに合わせられました。オレンジ枠の部分はmarginでもpaddingでもありません。

marginとpaddingの両方を指定したところ、思った通りの結果ですが、ベースラインはpaddingに合わせられ、marginも反映されました。

コードレビュー

ではレイアウトのコードを見てみましょう。 Sample02プロジェクトの/res/layout/chapter09.xmlを開いてください。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <!-- 
        marginを指定する場合は、layout_marginを使います。
        個別に設定する場合は、
        layout_marginTop,
        layout_marginBottom,
        layout_marginRight,
        layout_marginLeft
        です。
        
        paddingを指定する場合は、paddingを使います。
        個別に設定する場合は、
        paddingTop,
        paddingBottom,
        paddingRight,
        paddingLeft
        です。
        
        CSSのブロック要素と同じく、コンテンツの周囲がpaddingで
        paddingの外側がmarginです。
        marginは、周囲の要素に対して有効なため、
        Root要素(ここでは2行目で定義しているLinearLayout)でmarginを
        定義しても有効ではありません。定義はできますが、動作が不確定ぽいです。
        Root以下の子要素で定義してください。
     -->
    <TextView
        android:text="@string/chapter09_margin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <!-- marginのみ設定 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="20dp"
            android:background="#008000" />
        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="40dp"
            android:layout_marginLeft="20dp"
            android:background="#4b0082" />
    </LinearLayout>
    <!--
        paddingのみ設定
        より大きな数値でpaddingが設定されている要素にベースラインが合ってしまうようです。
     -->
    <TextView
        android:text="@string/chapter09_padding"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="10dp"
            android:paddingLeft="20dp"
            android:paddingBottom="10dp"
            android:paddingRight="20dp"
            android:background="#008000" />
        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="40dp"
            android:paddingLeft="20dp"
            android:paddingBottom="20dp"
            android:paddingRight="40dp"
            android:background="#4b0082" />
    </LinearLayout>
    <TextView
        android:text="@string/chapter09_margin_padding"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <!-- marginとpaddingを設定 -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="20dp"
            android:paddingBottom="10dp"
            android:paddingRight="20dp"
            android:background="#008000" />
        <TextView
            android:text="@string/app_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:paddingTop="40dp"
            android:paddingLeft="20dp"
            android:paddingBottom="20dp"
            android:paddingRight="40dp"
            android:background="#4b0082" />
    </LinearLayout>
</LinearLayout>

marginは以下のようにして指定します。

• layout_margin・・・上下左右すべて同じ値を指定したい場合
• layout_marginTop・・・上のみ指定
• layout_marginBottom・・・下のみ指定
• layout_marginLeft・・・左のみ指定
• layout_marginRight・・・右のみ指定

marginの場合、layout_という接頭辞が付きます。個別に設定する機会のほうが多いかと思います。これはCSSのmarginの指定と同じですね。

paddingは以下のようにして設定します。

• padding・・・上下左右すべて同じ値を指定したい場合
• paddingTop・・・上のみ指定
• paddingBottom・・・下のみ指定
• paddingLeft・・・左のみ指定
• paddingRight・・・右のみ指定

paddingの場合はpaddingなんちゃらです。これもCSSのpaddingと同じような設定なので、特に違和感ないと思います。

「いやいや！marginとpaddingの概念はわかったけども、そこに指定する値はどうやって算出するのさ！そもそもdpって何よ！？」って思ってる人が多いと思います。
なので、次はAndroidのレイアウトにおける単位を取り扱います。

Chapter06: フッターを作る方法

今回はフッターを作る方法です。
サイトを作っていても、全画面表示でフッターを一番下に表示する方法など、結構面倒ですが、Androidのレイアウトではそんなに難しいことではありません。方法はまぁ色々とありますが、感のいい人ならひょっとしたら気づいているかもしれません。

今回は、layout_weightを使います。

layout_weightといえば、Chapter03とChapter04で使いましたね。

では、サンプルを見てみましょう。
サンプルアプリでメニューを押して、chapter06を選択してください。
以下のような画面になります。

フッター側に特別な指定を行うのではなく、上のViewにlayout_weight属性をつけます。

コードレビュー

ではレイアウトのコードを見てみましょう。
Sample01プロジェクトの/res/layout/chapter06.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">
    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        >
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <TextView
                android:text="@string/chapter06_long_text"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" />
        </LinearLayout>
    </ScrollView>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button
            android:text="@string/chapter06_button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

ScrollViewにlayout_weight=1をつけています。これにより、同じ階層にあるLinearLayoutは子要素が使っている領域分（ここではボタン）のみ使用することになります。こんな感じで、フッターは簡単に実装できます。 ここでのフッターは常に画面に表示されているフッターになりますが、そうでないフッター（リストの一番下にあるフッターなど）は、またそれ用の実装方法があります。 リストのフッターの実装方法は、ListViewのFooterViewを追加するという方法でJavaでの記述が必要になるので、これ以上はここでは言及しません。 トップ画面でフッターをつけてくれと言われたら、こんな方法がある程度に覚えておいてください。

Chapter05: スクロールするViewの配置

今回はスクロールするViewについてです。
LinearLayoutの中には、いくらでも子要素を入れることができますが、画面内におさまらないくらいに子要素を追加すると、画面からはみ出たままで、画面はスクロールすることができません。

そういうときには、ScrollViewを使います。

よく見かけるリスト化されたView(ListView)や、グリッド表示のView(GridView)は、もともとスクロールするための機能を内包しているので、この処理は必要ありません。長いフォームなどの場合や、長い文章を読ませたい場合などに使うとよいでしょう。

画面をスクロールさせるためのViewですが、2種類あります。

• ScrollView(縦方向のスクロールを担当)
• HorizontalScrollView(横方向のスクロールを担当)

ScrollViewという名前だと縦横のどちらも使えそうで、縦方向のスクロールViewがVerticalScrollViewとかじゃないのが、何故かという話がちょろっとネットで話題になってたこともありました。ちょっと横道にそれてしまいましたが、HorizontalScrollViewはボタンの配置とかで使うことがあるので、横方向の場合は違う！ということくらいは覚えておきましょう。

では、サンプルを見てみましょう。
サンプルアプリでメニューを押して、chapter05を選択してください。
以下のような画面なります。

ここぞとばかりにTextViewをコピーしまくってみました。下のほうが薄らグラデーションがかかってるのがわかりますでしょうか？続きがあるよというのを見た目的にわかるようにするため、ScrollViewにはそのような機能があります。この範囲の長さなども変更可能です（ここでは取り上げない）

コードレビュー

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

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <!-- 
        この例のように、レイアウトに必ずViewが入ってなければいけないわけではありません。
        縦方向のスクロールが欲しい場合は、ScrollViewを使います。
        横方向のスクロールが欲しい場合は、HorizontalScrollViewを使います。
        今回は、ScrollViewのサンプルです。
        ScrollViewは、直近の子要素として、1つのViewしか受け付けません。
        ですので、ScrollViewの下には、LinearLayoutなどを配置し、
        その下にスクロールされるであろう要素を並べます。
        
        また、リスト表示をする場合はListViewなどを使いますが、ListView系は
        すでにScrollViewを梱包しているので、ScrollViewの下にListViewを入れる必要は
        ありません。
        
        あくまで、長いフォームなどを作る場合などに、ScrollViewを使うとよいでしょう。
     -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <!-- 手抜きでTextViewをたくさんコピーしています -->
        <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_linearlayout_vertical" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter01_linearlayout_vertical" />
（長いので省略）
    </LinearLayout>
</ScrollView>

ScrollViewの子要素には、1つしか置くことができません。2つ以上の要素を置くとエラーでアプリが落ちます。スクロールバーを表示する対象が1つだけだからなのでしょう。
なので、ScrollViewの子要素にはLinearLayoutもしくはRelativeLayoutなどを配置するとよいでしょう。そのレイアウトの下にはいくらでも子要素を配置できます。

LinearLayoutの中には大量にTextViewを入れています（長いので省略していますが）。
ScrollViewを使えば、後はレイアウトの配置は同じなので、特に困ることはないと思います。しかし、ScrollViewの中にScrollViewを入れたりするとよくわからない感じになることがあるので、そういう使い方はなるべく避けましょう。

最後がアバウトな書き方になってすみません！

Chapter04: 縦方向に均等配置

前回は、横方向に均等配置でした。今回は、縦方向に均等配置です。
内容はどう違うの？という話ですが、ほぼ同じです。
なので、今回はサラッと流します。

注目すべき点は、同じくlayout_weightです。

では、サンプルを見てみましょう。
サンプルアプリで、メニューを押して、chapter04を選択してください。
以下のような画面になります。

この画面は、LinearLayoutで横方向配置を指定した後に、さらにLinearLayoutを3つ入れて、それぞれは縦方向配置の設定をしています。
layout_weightは、レイアウトの重みづけで、高ければ高いほど重要度が増すとChapter03で説明しました。このレイアウトも、Chapter03の縦版なので、同様の設定になっています。

コードレビュー

では、レイアウトのソースコードを見てみましょう。Sample01プロジェクトの/res/layout/chapter04.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">
    <!-- 
        縦方向均等配置をするため、親要素のLinearLayoutのorientationをverticalに設定します。
        ここでは、layout_weightが肝です。指定された方向に対してウェイトが重い分だけ、拡がります。 
        デフォルトは0なので、1つの要素でも1を与えるとそれが残りの領域を占拠します。
        また、均等配置する方向が横の場合、layout_widthに有効な値をいれても無駄になるので0dpを入れます。
     -->
    <!-- 均等配置
         全ての要素にlayout_weight="1"を設定 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent">
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="@string/chapter04_button1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="@string/chapter04_button2" />
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="@string/chapter04_button3" />
    </LinearLayout>
    <!-- 1つの要素だけlayout_weightを設定
         ただし、layout_weightが設定されてないボタンが表示されるように、
         layout_height="wrap_content"にしてます。 -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent">
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter04_button4" />
        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter04_button5" />
        <Button
            android:id="@+id/button6"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="@string/chapter04_button6" />
    </LinearLayout>
    <!-- 全ての要素にlayout_weightを設定
         但し、button9のみweightを2にしている -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent">
        <Button
            android:id="@+id/button7"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="@string/chapter04_button7" />
        <Button
            android:id="@+id/button8"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="@string/chapter04_button8" />
        <Button
            android:id="@+id/button9"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="2"
            android:text="@string/chapter04_button9" />
    </LinearLayout>
</LinearLayout>

※以降、Chapter03と同じ言い回しになりますので、無視したい人は無視してください。
注目するべきは、layout_heightの値を0dpにしているところです。 layout_heightに0dp以外の有効な値を入れると、無駄に解析が入ってしまって非効率だからです。モバイル端末は基本的に非力だしバッテリー持たせる必要があるので、無駄な処理は極力削ります。それはプログラムだけでなく、レイアウトのXMLでも言えるのです。

layout_heightの効能は、LinearLayoutのorientationの方向で意味づけが決まるので、verticalの場合は、縦方向に効きます。なので、layout_height="0dp"なわけです。

均等配置がlayout_weightを指定するだけで簡単にできることがわかってもらえたかと思います。

Chapter03: 横方向に均等配置

LinearLayoutとRelativeLayoutの説明が終わりましたので、ここからはLinearLayoutを使った具体的なレイアウトの方法に入っていきます。とはいってもまだ基本編です。

アプリを使っている人はよく見かけていると思うのですが、ボタンなどの均等配置はどうやるのだろうか？と。CSSならば、もともと決まっているwidthの値を3で割って…などだと思うのですが、Androidでは、もっと簡単な方法が準備されています。

それはlayout_weightという属性です。

では、サンプルを見てみましょう。
サンプルアプリで、メニューを押して、chapter03を選択してください。
以下のような画面になります。

この画面は、LinearLayoutで縦方向配置の指定をした後に、さらにLinearLayoutを3つ入れて、それぞれは横方向配置の設定をしています。

先ほど言った、layout_weightという属性は、レイアウトの重みづけに当たります。高ければ高いほど、重要度が増します。下の画像の赤枠で囲まれている部分のように均等に配置したい場合は、layout_weight全て1にします。

他の場合も見てもらおうと思い、設定してありますが、2行目のボタンの部分は、ボタン4、ボタン5にはlayout_weightを指定していません。そして、ボタン6のみ、1を指定しています。すると、ボタン6が一番重要ということになり、残された領域全部を使います。

3行目のボタンは、全てにlayout_weightを指定していますが、ボタン9のみ、layout_weightに2を指定しています。重要度に比例して領域を確保するので、1:1:2の比率で配置されているのがわかります。

コードレビュー

では、レイアウトのソースコードを見てみましょう。 Sample01プロジェクトの/res/layout/chapter03.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のorientationをhorizontalに設定します。
        ここでは、layout_weightが肝です。指定された方向に対してウェイトが重い分だけ、拡がります。 
        デフォルトは0なので、1つの要素でも1を与えるとそれが残りの領域を占拠します。
        また、均等配置する方向が横の場合、layout_widthに有効な値をいれても無駄になるので0dpを入れます。
     -->
    <!-- 均等配置
         全ての要素にlayout_weight="1"を設定 -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/chapter03_button1" />
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/chapter03_button2" />
        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/chapter03_button3" />
    </LinearLayout>
    <!-- 1つの要素だけlayout_weightを設定
         ただし、layout_weightが設定されてないボタンが表示されるように、
         layout_width="wrap_content"にしてます。 -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter03_button4" />
        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter03_button5" />
        <Button
            android:id="@+id/button6"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/chapter03_button6" />
    </LinearLayout>
    <!-- 全ての要素にlayout_weightを設定
         但し、button9のみweightを2にしている -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/button7"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/chapter03_button7" />
        <Button
            android:id="@+id/button8"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/chapter03_button8" />
        <Button
            android:id="@+id/button9"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="@string/chapter03_button9" />
    </LinearLayout>
</LinearLayout>

注目するべきは、layout_widthの値を0dpにしているところです。dpという単位は初めて聞いたと思いますが、これはAndroidで各端末の解像度の違いを吸収するための単位です。基本的にdpを使ってレイアウトをするのですが、単位は他の記事で扱おうと思っているので、ここではこの辺で割愛します。

じゃあなんで注目やねんという話ですが、layout_widthに0dp以外の有効な値を入れると、無駄に解析が入ってしまって非効率だからです。モバイル端末は基本的に非力だしバッテリー持たせる必要があるので、無駄な処理は極力削ります。それはプログラムだけでなく、レイアウトのXMLでも言えるのです。

layout_weightの効能は、LinearLayoutのorientationの方向で意味づけが決まるので、horizontalの場合は、横方向に効きます。なので、layout_width="0dp"なわけです。

均等配置がlayout_weightを指定するだけで簡単にできることがわかってもらえたかと思います。

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の特徴を説明します。