2023/8/2

【Android Studio】Chainsの使い方！ConstraintLayoutで横や縦並びを実装する

この記事からわかること

Android StudioのConstraintLayoutのChainsとは？
Viewを横並びや縦並びに配置する方法
SpreadやSpread inside、Packed、Weighted Studioの違い

index

[open]

ConstraintLayoutとは？
Chainsとは？
ChainStyleの種類
Spread
Spread inside
Packed
Weighted

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

参考文献：公式リファレンス：ConstraintLayout

環境

Android Studio：Flamingo
Kotlin：1.8.20

ConstraintLayoutとは？

AndroidのConstraintLayoutとはビューに制約を設けて配置するLayoutsの1種です。AndroidではButtonやTextViewなどのビュー要素を「Widgets」と呼びます。そしてそのWidgetsを配置するためにConstraintLayoutなどの「Layouts」があります。またWidgetsはLayoutsの中にしか配置することはできません。Androidのレイアウトファイルでは必ずルートにLayoutsのいずれかを指定する必要があります。

ConstraintLayoutの具体的な使用方法に関しては以下の記事を参考にしてください。

【Android Studio】LinearLayoutの使い方！Viewを縦や横並びにする方法

Chainsとは？

ChainsとはConstraintLayoutで使用できる水平方向または垂直方向に複数のビューをリンクさせて配置方法です。まずは3つのButtonを横並びに配置してみます。リンクさせたいButtonをShiftを押しながら選択し、右クリック「Chains」＞「Create Horizontal Chain」をクリックします。

真ん中のButtonのみ上下の制約を設けて両サイドのButtonは真横に来るように動かしておきます。

コードは以下のようになります。

<androidx.constraintlayout.widget.ConstraintLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity"
  tools:layout_editor_absoluteX="0dp"
  tools:layout_editor_absoluteY="50dp">

  <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button"
      app:layout_constraintEnd_toStartOf="@+id/button2"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintStart_toStartOf="parent"
      tools:layout_editor_absoluteY="342dp" />

  <Button
      android:id="@+id/button2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toStartOf="@+id/button3"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintStart_toEndOf="@+id/button"
      app:layout_constraintTop_toTopOf="parent" />

  <Button
      android:id="@+id/button3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.5"
      app:layout_constraintStart_toEndOf="@+id/button2"
      tools:layout_editor_absoluteY="342dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

ChainStyleの種類

横並びにした3つのボタンはChainsを利用してリンク状態になりました。ChainsではChainStyleが色々用意されており、指定したスタイルによってビューの配置が変化します。

上から以下のスタイルを指定しています。

Spread
Spread inside
Packed
Weighted

Spread

Spreadは均等に配置されるスタイルです。これがデフォルトで設定されています。

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread" />


<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button1"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread"/>


<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button2"
    app:layout_constraintHorizontal_chainStyle="spread"/>

Spread inside

Spread insideは両端のビューのみ画面端に、残りは均等に配置されるスタイルです。

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="81dp"
    app:layout_constraintHorizontal_chainStyle="spread_inside"/>

<Button
    android:id="@+id/button5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button6"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button4"
    app:layout_constraintTop_toBottomOf="@+id/button2"
    app:layout_constraintHorizontal_chainStyle="spread_inside"/>

<Button
    android:id="@+id/button6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button5"
    tools:layout_editor_absoluteY="81dp"
    app:layout_constraintHorizontal_chainStyle="spread_inside"/>

Packed

Packedは中心に集合するように配置されるスタイルです。

<Button
    android:id="@+id/button7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button8"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="160dp" />

<Button
    android:id="@+id/button8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button9"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button7"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintTop_toBottomOf="@+id/button5" />

<Button
    android:id="@+id/button9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button8"
    app:layout_constraintHorizontal_chainStyle="packed"
    tools:layout_editor_absoluteY="160dp" />

Weighted

WeightedはSpreadまたはSpread insideが指定されている場合に各ビューに対して割合を指定して配置されるスタイルです。app:layout_constraintHorizontal_weightに割合となる値を渡します。layout_widthには0が指定されている必要があります。

<Button
    android:id="@+id/button10"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toStartOf="@+id/button11"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_weight="3"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="240dp" />

<Button
    android:id="@+id/button11"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="32dp"
    android:text="Button"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintEnd_toStartOf="@+id/button12"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button10"
    app:layout_constraintHorizontal_weight="2"
    app:layout_constraintTop_toBottomOf="@+id/button8" />

<Button
    android:id="@+id/button12"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_chainStyle="spread"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintHorizontal_weight="1"
    app:layout_constraintStart_toEndOf="@+id/button11"
    tools:layout_editor_absoluteY="240dp" />