Chainでレイアウトを調整【ConstraintLayoutの技】

この記事ではConstraintLayoutのChain（チェーン）について解説していきます。

2つ以上のコンポーネントをひとまとめにして、それを中央に配置したい。

コンポーネントを等間隔に並べたいな。

チェーンを使うことでこのようなレイアウトを簡単に作れてしまいます。

上段：テキストビューとテキストビューの2つを合わせ（横方向に対して）中央に配置
下段：ボタンを（横方向に対して）均等に配置

例では”横方向に対して”のみですが、もちろん縦方向にも調整が可能です。
他にも種類があるので解説していきます。

Chain（チェーン）とは
Chain（チェーン）の種類
Chain（チェーン）の設定方法
おわりに

Chain（チェーン）とは

チェーンは、横方向または縦方向に対して設定が可能で、各コンポーネントを1つのまとまりとして認識して動作してくれます。

Chain（チェーン）の種類

チェーンには複数のスタイルがあります。

チェーンのスタイル

spread
spread_inside
packed

※chainStyle に設定が可能なスタイルです。

これらのスタイルを使うことで次のようなレイアウトを作ることができます。

※画像はandroidのdevelopersサイトからお借りしています。

それぞれ次のように設定することで実現できます。

Spread Chain：spreadを設定または、設定なし ※デフォルトがspread
Spread Inside Chain：spread_insideを設定
Weighted Chain：スタイルは設定なしで、各コンポーネントのwidthをmatch constraint (0dp)にしてweightで大きさを調整
Packed Chain：packedを設定
Packed Chain with Bias：packedを設定し、biasを設定

Chain（チェーン）の設定方法

設定したいコンポーネントを選択して、「右クリック > Chains」から「Create Horizontal Chain」または「Create Vertical Chain」を選ぶだけでOKです。
デフォルトではチェーンスタイルは設定されないので、spreadのレイアウトになります。

スタイルを変えたい場合はAttributesの欄からlayout_constraintHorizontal_chainStyleまたはlayout_constraintVertical_chainStyleを探して設定してください。
もちろん、xmlからでも設定可能で、以下のように設定可能です。

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/buttonBackground"
    android:text="ボタン1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

ポイント
どのコンポーネントに chainStyle 属性を設定するかですが、head要素と呼ばれるコンポーネントに対して設定をおこないます。