線形レイアウトを作成する

Compose を試す
Jetpack Compose は、Android に推奨される UI ツールキットです。Compose でレイアウトを操作する方法を学習します。

LinearLayout は、すべての子を垂直方向または水平方向に一方向に揃えるビューグループです。レイアウト方向は android:orientation 属性で指定できます。

3 つの垂直スライスに分割されたレイアウトを示す画像
図 1.水平方向の子が 3 つある LinearLayout

LinearLayout の子はすべて順番に積み重ねられるため、縦方向のリストでは、幅に関係なく、行ごとに子が 1 つだけ含まれます。横型のリストは高さが 1 行のみであり、最も高い子の高さにパディングを加えた値になります。LinearLayout は、子間のマージンと、各子の重力(右、中央、左揃え)を尊重します。

レイアウトの太さ

LinearLayout では、android:layout_weight 属性を使用して個々の子に重みを割り当てることもできます。この属性は、画面上でビューが占有するスペースの観点から「重要度」をビューに割り当てます。重み値を大きくすると、親ビューの残りのスペースを埋めるように拡大されます。子ビューでは重み値を指定できます。ビューグループ内の残りのスペースは、宣言された重みに基づいて、子に均等に割り当てられます。デフォルトの重みは 0 です。

均等配分

それぞれの子が同じ画面上のスペースを使用する線形レイアウトを作成するには、垂直レイアウトの場合は各ビューの android:layout_height"0dp" に設定し、水平レイアウトの場合は各ビューの android:layout_width"0dp" に設定します。次に、各ビューの android:layout_weight"1" に設定します。

不均等配分

また、子要素が画面上のさまざまなスペースを使用する線形レイアウトを作成することもできます。以下の例を考えてみましょう。

  • テキスト フィールドが 3 つあるとします。2 つのフィールドの重み値が 1、3 つ目のフィールドの重み値がデフォルトの 0 です。3 番目のテキスト フィールドは、重みの値が 0 で、そのコンテンツに必要な領域のみを占有します。重み値が 1 の他の 2 つのテキスト フィールドは、3 つのフィールドすべてのコンテンツが測定された後に残ったスペースを埋めるように均等に拡張されます。
  • 一方、3 つのテキスト フィールドがあり、2 つのフィールドの重みの値が 1、3 つ目のフィールドの重みが 2 の場合、3 つのフィールドすべての内容の後のスペースは、重みの値が 2 のフィールドの半分に、重みの値が 1 のフィールドで半分ずつ分割されます。

以下の図とコード スニペットは、「メッセージを送信」アクティビティでレイアウトの重み付けがどのように機能するかを示しています。[To] フィールド、[Subject] 行、および [Send] ボタンは、それぞれ高さを必要なだけ占有します。メッセージ領域は、アクティビティの高さの残りを占めます。

垂直方向の LinearLayout で 3 つの EditText と 1 つのボタンが表示されている画像
図 2. 縦方向の LinearLayout に 3 つのテキスト フィールドと 1 つのボタン。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

LinearLayout の各子ビューで使用できる属性の詳細については、LinearLayout.LayoutParams をご覧ください。