3.1 レイアウトの基本


　今までレイアウトについて誤魔化しながら紹介してきましたが、本節で詳細に紹介します。
Androidにおけるレイアウトは非常に奥が深く、カスタマイズ性に富んでいます。
その為、基本的な事をするだけであれば容易ですが、複雑なことをしようとすると次第に難しくなります。
ここではまずレイアウトの基本を押さえ、徐々に複雑なレイアウトも勉強していきましょう。

まず、レイアウトとは、これまでも紹介してきた通り、Viewと呼ばれるボタンや画像などの機能を並べ、位置関係を決める為のものです。



これまでは、縦方向や横方向にViewを並べる「LinearLayout」を使ってきました。
ここでレイアウトの種類について説明します。

LinearLayout	Viewを縦・横方向に並べるレイアウト
TableLayout	Viewを表形式に並べるレイアウト
FrameLayout	Viewを左上を原点に重ねるレイアウト
RelativeLayout	複数のViewを相対的に配置するレイアウト
AbsoluteLayout	Viewを絶対座標で配置するレイアウト

以上の5種類が存在します。
表にしたい・重ねたい等、行いたいことに応じてレイアウトを使い分けます。

各レイアウトの詳細については次の章から紹介しますが、その前に、レイアウトの要となる2つの属性について紹介します。

今までViewが横方向と縦方向に対して属性を持っていたことをご存じでしょうか。
試しにボタンを適当に３つGraphical Layoutのエディタで作って下さい。



このソースを確認すると、当然3つのButtonとなるViewが作られるわけですが、

---

<?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">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

---

横方向のレイアウト属性である layout_width と、
縦方向のレイアウト属性である layout_height に "wrap_content" が指定されています。
Viewが持つ縦横方向の属性には2つあり、簡単に言えば意味として

wrap_content	最小
fill_parent	最大

となります。(fill_parentはmatch_parentと記す場合もあります)

最小と言うのは指定された属性の中でViewが機能する最小という意味になります。
例えば今回ボタンのテキストに「Button」が指定されているので、「Button」が表示できる最小サイズになっています。

では、試しに button1 の 横方向の属性を最大にしてみましょう。

---

<?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">

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

---

すると



このように、button1の横方向が最大サイズになりました。
では、縦方向も最大にしてみましょう。

---

<?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">

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

---

すると



縦も横も画面いっぱいになりました。
しかしこれではbutton2やbutton3が押せません。

そこで、ボタンに「ウェイト」を入れてみます。
一旦ボタンの状態を最初に戻し(wrap_contetに戻す)、



button1を選択した状態で「プロパティ」の「Layout weight」に「1」を入力して下さい。
button2を選択した状態で「プロパティ」の「Layout weight」に「2」を入力して下さい。
button3を選択した状態で「プロパティ」の「Layout weight」に「1」を入力して下さい。

※ Layout width ではなく weight なので注意

プロパティが表示されていない場合は
「ウィンドウ」＞「ビューの表示」＞「その他」＞「一般」＞「プロパティ」
で開けます。

すると、ソースコードは以下のようになります。

---

<?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">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height=wrap_content
        android:text="Button"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_weight="2"/>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_weight="1"/>

</LinearLayout>

---

そして表示した結果は以下の通り



button1 : button2 : button 3 = 1 : 2 : 1
の割合で大きさが決まっています。

レイアウトにおいて、Layout_width, Layout_height, Layout_weight は基本となりますので覚えておいて下さい。