検証環境

この記事の内容は、以下の環境で検証した。
* Android Studio 3.0.2
* constraint-layout 1.0.2

はじめに

ConstrantLayoutには様々な設定項目があります。
下記の記事で記述したように、今回は「Relative positioning」のみについて説明します。

ConstraintLayoutを理解する前に・・・

Constraint Layoutにおけるビューの基礎知識

Constraint LayoutでViewの位置を相対的に設定する際、Viewを下記の図の用に読んでいます。
まずはその言葉を理解してください。

ここでは、下記の言葉がどこを指すかだけ理解できていればこれからの説明は理解できます。

top
baseline
bottom
left
start
right
end

設定出来る項目とその見た目

Constraint LayoutのRelative positioningで設定できる項目は下記のとおりです。

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

それでは、１つずつ説明していきます。

layout_constraintLeft_toLeftOf

「 layout_constraintLeft_toLeftOf」で設定すると下記のようになります。

「layout_constraintLeft」をどのViewの「toLeftOf」に合わせるかといった設定です。TextViewなどのGroupView以外だと重複しているうに見えてしまいます。GroupViewなどに活用できそうです。

layout_constraintLeft_toRightOf

「 layout_constraintLeft_toRightOf」で設定すると下記のようになります。

「 layout_constraintLeft」をどのViewの「toRightOf」に合わせるかといった設定です。

layout_constraintRight_toLeftOf

「 layout_constraintRight_toLeftOf」で設定すると下記のようになります。

「layout_constraintRight」をどのViewの「toLeftOf」に合わせるかといった設定です。

layout_constraintRight_toRightOf

「 layout_constraintRight_toRightOf」で設定すると下記のようになります。

「layout_constraintRight」をどのViewの「toRightOf」に合わせるかといった設定です。TextViewなどのGroupView以外だと重複しているうに見えてしまいます。GroupViewなどに活用できそうです。

layout_constraintTop_toTopOf

「 layout_constraintTop_toTopOf」で設定すると下記のようになります。

「layout_constraintTop」をどのViewの「toTopOf」に合わせるかといった設定です。TextViewなどのGroupView以外だと重複しているうに見えてしまいます。GroupViewなどに活用できそうです。

layout_constraintTop_toBottomOf

「 layout_constraintTop_toBottomOf」で設定すると下記のようになります。

「 layout_constraintTop」をどのViewの「toBottomOf」に合わせるかといった設定です。

layout_constraintBottom_toTopOf

「 layout_constraintBottom_toTopOf」で設定すると下記のようになります。

「 layout_constraintBottom」をどのViewの「toTopOf」に合わせるかといった設定です。

layout_constraintBottom_toBottomOf

「 layout_constraintBottom_toBottomOf」で設定すると下記のようになります。

「layout_constraintBottom」をどのViewの「toBottomOf」に合わせるかといった設定です。TextViewなどのGroupView以外だと重複しているうに見えてしまいます。GroupViewなどに活用できそうです。

layout_constraintBaseline_toBaselineOf

「 layout_constraintBaseline_toBaselineOf」で設定すると下記のようになります。

「layout_constraintBaseline」をどのViewの「toBaselineOf」に合わせるかといった設定です。

layout_constraintStart_toEndOf

「 layout_constraintStart_toEndOf」で設定すると下記のようになります。

「layout_constraintStart」をどのViewの「toEndOf」に合わせるかといった設定です。

layout_constraintStart_toStartOf

「 layout_constraintStart_toStartOf」で設定すると下記のようになります。

「layout_constraintStart」をどのViewの「toStartOf」に合わせるかといった設定です。TextViewなどのGroupView以外だと重複しているうに見えてしまいます。GroupViewなどに活用できそうです。

layout_constraintEnd_toStartOf

「 layout_constraintEnd_toStartOf」で設定すると下記のようになります。

「layout_constraintEnd」をどのViewの「toStartOf」に合わせるかといった設定です。

layout_constraintEnd_toEndOf

「 layout_constraintEnd_toEndOf」で設定すると下記のようになります。

「layout_constraintEnd」をどのViewの「toEndOf」に合わせるかといった設定です。TextViewなどのGroupView以外だと重複しているうに見えてしまいます。GroupViewなどに活用できそうです。

項目の優先度

上記の設定項目の中で、「あれ？これは同じような設定じゃないか？もし、同じような設定を2つ書いたらどうなるんだろう？？」と考えるのは当然だと思います。
調べてみました。
結果は以下の通りでした。

layout_constraintEnd_toEndOf > layout_constraintRight_toRightOf
layout_constraintStart_toStartOf > layout_constraintLeft_toLeftOf

設定する時は気をつけましょう。

Designタブの右上の線

優先度でも説明しましたが、同じような設定がある場合、Designタブの右上の各ビューのConstrainの線に違いがあるかも調べました。
結果は以下のとおりです。

項目	線のイメージ
layout_constraintLeft_toLeftOf layout_constraintLeft_toRightOf layout_constraintStart_toEndOf layout_constraintStart_toStartOf
layout_constraintRight_toLeftOf layout_constraintRight_toRightOf layout_constraintEnd_toStartOf layout_constraintEnd_toEndOf
layout_constraintTop_toTopOf layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf