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を指定するだけで簡単にできることがわかってもらえたかと思います。