Androidレイアウトの要点だけ: LinearLayoutでパーツを均等に配置したい

AndroidのUI制作で、LinearLayoutを使って画面の横幅のちょうど２等分にしたいときがあります。このようなときは、LinearLayoutされているパーツ（ボタンとか）にたいして"android:layout_weight"プロパティを設定します。これの使い方のちょっとしたコツのメモ。


結論からいうと、layout_weightとlayout_widthが関連していて、以下の図のような関係性です。ボタンが２つ並んでいる一行が、各LinearLayoutに対応します。

1. layout_width=wrap_contentで、layout_weightを指定しない場合
LiearLayoutにボタンを追加した直後が、この状態でしょう。ボタンはそのラベルのテキストを表示できるだけの幅（width）をそれぞれ確保します。結果、上記のようにボタンごとのサイズが変わります。

2. layout_width=wrap_contentのまま、layout_weightを指定する場合
1の状態に、layout_weightを追加してみます。layout_weightは比率を決めるプロパティで、たとえばボタンが2つあったとして、それぞれlayout_weightが1なら、2つのボタンは1:1の幅（Horizontalの場合）でレイアウトされます。同様に一つが1、もう一つが2のweightなら1:2の幅になります。

しかし、上記の画像の例ではlayout_weightを1:1にしているのに、そのようになっていません。これは、layout_width=wrap_contentが影響を与えてしまっている状態で、layout_weightを付与した意図どおりのレイアウトになっていません。

3. layout_weightを指定して、layout_width=0dpに変更した場合
layout_weightの指定だけをレイアウトに影響させるには、layout_widthの影響を消してやれば良いです。つまり、layout_width=0dpと指定する。こうすると上記画像のようにlayout_weightの指定だけがレイアウトに影響し、きれいに1:1の横幅でレイアウトされるようになります。

最後に、上記レイアウトの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:id="@+id/textView3" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="layout weightの検証"></TextView>

    <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1. width=wrap_content, layout_weight指定なし"></TextView>

    <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content">

        <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="OK"></Button>

    </LinearLayout>

    <TextView android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="2. width=wrap_content, layout_weight指定=1:1"></TextView>

    <LinearLayout android:id="@+id/linearLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content">

        <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="キャンセルするよ" android:layout_weight="1"></Button>

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

    </LinearLayout>

    <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="3. width=0dp, layout_weight指定=1:1"></TextView>

    <LinearLayout android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="wrap_content">

        <Button android:id="@+id/Button01" android:layout_weight="1" android:text="キャンセルするよ" android:layout_height="wrap_content" android:layout_width="0dp"></Button>

        <Button android:id="@+id/Button02" android:layout_weight="1" android:text="OK" android:layout_height="wrap_content" android:layout_width="0dp"></Button>

    </LinearLayout>

</LinearLayout>