ConstraintLayoutレイアウトファイル(XML)制約の書き方。配置パターン別の属性とパラメーター【Androidアプリ開発】

2023-07-29Sample Code

ビューの文字列の表示

Androidアプリの主流レイアウトのConstraintLayoutのXMLの書き方を配置パターン別に書いていきます。Android Studioのレイアウトエディタでは出来ない事や細かな調整はXMLで記述します。

XMLの宣言、ルート要素・子要素の説明や必須属性の説明は下記の記事へどうぞ。

ConstraintLayoutの制約の考え方については下記の記事へ。

ビューに表示する文字列の設定

text属性に文字列を設定します。

android:text="文字列"

string.xmlでテキストを管理している場合は[@string/]の後に文字列を記述します。

android:text="@string/文字列"

相対位置の制約

startとleft、endとrightは同じ位置です。単独で使わない限りstart・endの方で書くのが一般的です。

水平・垂直軸共にパラメーターは下記の2つになります。

parent親のレイアウトに対して制約します。
ビューのID他のビューに対して制約します。他のビューのIDを指定する。
例) @+id/button1

水平軸に制約する

相対位置水平軸の制約の位置関係
layout_constraintStart_toStartOf
layout_constraintLeft_toLeftOf

layout_constraintStart_toEndOf
layout_constraintLeft_toRightOf

layout_constraintEnd_toStartOf
layout_constraintRight_toLeftOf

layout_constraintEnd_toEndOf
layout_constraintRight_toRightOf

垂直軸に制約する

垂直軸に別名はありません。

相対位置垂直軸の制約の位置関係
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

相対位置の設定例

下図のBを制約した場合の設定例です。ボタンAは親に対して制約しています。幅はmargin属性を記述します。

相対位置の制約の例
<Button
        android:id="@+id/button-a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="80dp"
        android:layout_marginTop="100dp"
        android:text="button-a"
        layout_constraintStart_toEndOf="parent"
        layout_constraintTop_toTopOf="parent" />
<Button
        android:id="@+id/button-b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="button-b"
        layout_constraintTop_toBottomOf="@+id/button-a" />

マージンの制約

幅・高さにマージンを設定します。パラメーターはAndroidが使えるサイズ単位全てが使えると思いますが一般的に[dp]を使います。これもstartとleft、endとrightは同じ位置です。

android:layout_marginStart
android:layout_marginLeft
android:layout_marginEnd
android:layout_marginRight
android:layout_marginTop
android:layout_marginBottom
dp、px、sp、pt、in、mm基本的にdpを使う。

GONEビューに制約する場合

ビューをGONE(非表示)にした場合はデフォルトではマージン0として扱われます。これを再定義したい場合に設定します。

layout_goneMarginStart
layout_goneMarginLeft
layout_goneMarginEnd
layout_goneMarginRight
layout_goneMarginTop
layout_goneMarginBottom
dp、px、sp、pt、in、mm基本的にdpを使う。

ベースラインで制約する

他のビューのベースラインに対して位置合わせします。パラメーターは他のビューです。

ベースラインの位置関係
app:layout_constraintBaseline_toBaselineOf
ビューのID他のビューのIDを指定する。
例) @+id/button1

ベースラインの設定例

下図の様にボタンビューに対してテキストビューを制約した設定例になります。ボタンは親に対して制約をしています。

ベースラインの制約の設定例
<Button
        android:id="@+id/button7"
        android:layout_width="124dp"
        android:layout_height="167dp"
        android:text="Button7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.222"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="114dp"
        android:layout_height="73dp"
        android:layout_marginStart="68dp"
        android:text="ベースライン"
        app:layout_constraintBaseline_toBaselineOf="@+id/button7"
        app:layout_constraintStart_toEndOf="@+id/button7" />

ガイドラインに対して制約する

ガイドラインを使うには下記の属性を含めます。

  1. 子要素のガイドラインの宣言
  2. orientation属性で水平軸か垂直軸かを指定する。
  3. layout_constraintGuide_begin属性かlayout_constraintGuide_end属性かsetGuidelinePercent属性で親コンテナとの幅を指定する。

ガイドラインの宣言

子要素のガイドラインを宣言します。

<androidx.constraintlayout.widget.Guideline>

orientation属性

水平軸のガイドラインか垂直軸のガイドラインかを指定します。

android:orientation
horizontal水平軸のガイドライン
vertical垂直軸のガイドライン

layout_constraintGuide_begin属性

ガイドラインの上または左からの距離を指定します。orientation属性とセットで使用します。horizontalを設定した場合は上→下の垂直の距離、verticalを設定した場合は左→右の水平の距離になります。

layout_constraintGuide_begin属性の位置関係
app:layout_constraintGuide_begin
dp、px、sp、pt、in、mm基本的にdpを使う。

layout_constraintGuide_end属性

ガイドラインの下または右からの距離を指定します。orientation属性とセットで使用します。horizontalを設定した場合は下→上の垂直の距離、verticalを設定した場合は右→左の水平の距離になります。

layout_constraintGuide_end属性の位置関係
app:layout_constraintGuide_end
dp、px、sp、pt、in、mm基本的にdpを使う。

setGuidelinePercent属性

距離を%比率で指定したい場合に使います。orientation属性とセットで使用します。

setGuidelinePercent属性の位置関係
app:setGuidelinePercent
0.0~1.00.5で50%(真ん中)

ガイドラインの設定例

下図の様にボタンビューをガイドラインに対して制約しています。ガイドラインは親に対して制約しています。

ガイドラインの制約例
   <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="72dp"
        android:layout_marginTop="148dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="@id/guideline19"
        app:layout_constraintTop_toTopOf="@id/guideline20" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline19"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintGuide_begin="88dp"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline20"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintGuide_begin="139dp"
        app:layout_constraintTop_toTopOf="parent" />

バリアに対して制約する

バリアは複数のビューに対して機能します。複数のビューの中で一番長いビューに自動的に合わせられます。バリアを使うには下記の属性を含みます。

  1. 子要素のバリアの宣言
  2. barrierDirection属性で位置を指定する。
  3. constraint_referenced_ids属性でビューを指定する。

バリアの宣言

子要素のバリアを宣言します。

<androidx.constraintlayout.widget.Barrier>

barrierDirection属性

バリアの位置を指定します。

app:barrierDirection
start、right、end、left、top、bottomバリアの位置を指定します。

constraint_referenced_ids属性

複数のビューを指定します

app:constraint_referenced_ids
ビューのID名,ビューのID名,…カンマ[,]区切りで指定します。

GONEビューに対するバリア

GONEビューが配置されてる場合にバリアを使うとデフォルト(true)ではそのサイズは考慮されます。考慮されない様に設定するにはfalseを設定します。

app:barrierAllowsGoneWidgets
trueGONEビューのサイズは計算されます。デフォルト値。
falseGONEビューのサイズは0として扱われます。

バリアの設定例

バリアが表示されてるだけの例になります。ButtonAは親に制約し、ButtonBはAと親に制約しています。

バリアの設定例
<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ButtonA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.471" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ButtonB"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.653"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1"
        app:layout_constraintVertical_bias="0.351" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="left"
        app:constraint_referenced_ids="button2,button1"
        tools:layout_editor_absoluteX="411dp" />

バイアス・センタリングに制約する

バイアス属性を使ってセンタリングします。数値をずらす事で左右上下どちらかに傾かせる事もできます。バイアスは水平軸・垂直軸があります。

0.0~1.0%指定。0.5で50%(真ん中)
app:layout_constraintHorizontal_bias
app:layout_constraintVertical_bias

バイアスの設定例

水平軸・垂直軸にそれぞれ0.5にして画面の真ん中にした例です。

バイアスによるセンタリングの制約例
<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

チェーンの制約

チェーンのスタイルはSpread・Weighted・Packedの3種類あります。チェーンは水平軸・垂直軸に設定できます。

チェーンスタイルの例

チェーンを作成するには下記の設定をします。

  1. 各ビューを互いに制約する。
  2. ヘッドにチェーンスタイルを設定する。

各ビューを互いに制約する

各ビューを互いに制約します。例えばA・B・Cのビューがあった場合で水平軸のチェーンを作りたい場合は下記のようになります。

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@+id/button2" />
<Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/button1"
        app:layout_constraintEnd_toStartOf="@+id/button3" />
<Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@+id/button2" />

ヘッドにチェーンスタイルを設定する

下記の属性をチェーンヘッドに設定します。ヘッドは水平軸なら一番左側のビュー、垂直軸なら一番上のビューになります。

app:layout_constraintHorizontal_chainStyle
app:layout_constraintVertical_chainStyle

スタイルのパラメーターは下記の3種類になります。上の図のWeightedチェーンはspreadのスタイルを指定して、他の属性と組み合わせて作ります。こちらのやり方は後述します。また、Packedチェーンバイアスはbias属性と組み合わせて作ります。こちらも後述。

spreadspreadチェーンのスタイルを設定します。デフォルト。
spread_insidespread_insideチェーンのスタイルを設定します。
packedpackedチェーンのスタイルを設定します。

チェーンの設定例(spread)

水平軸のspreadチェーンです。水平軸・垂直軸に親コンテナを制約しています。

spreadチェーンの設定例
<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ButtonA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ButtonB"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent" />

Packedチェーンバイアスの設定例

Packedチェーンを作るにはチェーンヘッドに下記の属性を追記します。

  1. chainStyleをpackedにする。
  2. layout_constraintHorizontal_bias属性かlayout_constraintVertical_bias属性を設定する。

水平軸のバイアスを設定する場合は下記のようになります。ヘッドビューのみ記載してます。

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ButtonA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintVertical_bias"0.3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Weightedチェーンの設定例

Weightedチェーンを作るには下記の属性を設定します。

  1. 各ビューのlayout_width属性かlayout_height属性を0dpに設定する。
  2. チェーンヘッドのチェーンスタイルをspreadまたはspread insideに設定する。
  3. 各ビューにlayout_constraintHorizontal_weight属性かlayout_constraintVertical_weight属性で重みを設定する。

重みは例えばAとBのビューがあった場合Aにweight="2″、Bにweight="1″とした時にAはBの2倍の大きさになります。Bが100dpだったらAは200dpといった感じです。

<Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="ButtonA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="ButtonB"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button1"
        app:layout_constraintTop_toTopOf="parent" />

円形(Circular)配置

ビューを円形上に配置します。円の中心のにあるビューをbuttonAとして他のビューをbuttonBとした場合、buttonBに下記の属性を設定します。

  1. layout_constraintCircle属性で円の中心のビューを指定する。
  2. layout_constraintCircleRadius属性で円の中心からの距離を指定する。
  3. layout_constraintCircleAngle属性で円の角度を指定する。
レイアウト配置のCircularの例

layout_constraintCircle属性

円の中心にあるビューを指定します。

app:layout_constraintCircle
ビューのID円中心のビューのIDを指定する。
例) @+id/buttonA

layout_constraintCircleRadius属性

円の中心からの距離を指定します。

dp、px、sp、pt、in、mm基本的にdpを使う。
app:layout_constraintCircleRadius

layout_constraintCircleAngle属性

円の角度を指定します。

app:layout_constraintCircleAngle
0~360角度を数値で指定します。

円形(Circular)配置の設定例

円の中心にあるボタンビューAを親に対して制約し、ボタンビューBをAに対して円形配置しています。

円形(Circular)配置の設定例
    <Button
        android:id="@+id/buttonA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ButtonA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/buttonB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ButtonB"
        app:layout_constraintCircle="@+id/buttonA"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="120dp"
        tools:ignore="MissingConstraints" />