2023/8/2

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

この記事からわかること

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

index

[open]

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

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

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」をクリックします。

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

真ん中の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" />

このapp:layout_constraintHorizontal_weightはLinearLayoutのlayout_weightと同じです。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Android