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

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

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

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

LinearLayout のすべての子は順番にスタックされるため、縦方向のリストでは、幅に関係なく、1 行に 1 つの子しかありません。水平方向のリストの高さは 1 行のみで、最も背の高い子の高さにパディングを加えた値になります。LinearLayout は、子の間のマージンと、各子のグラビティ(右揃え、中央揃え、左揃え)を考慮します。

レイアウトの太さ

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

均等配分

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

不均等配分

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

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

次の図とコード スニペットは、「send message」アクティビティでレイアウトの重みがどのように機能するかを示しています。[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 をご覧ください。