ConstraintLayoutのRelative positioningの基本

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

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

[ConstraintLayoutを理解する前に・・・](https://qiita.com/naoi/items/aedc985e49669f8fff11)

# Constraint Layoutにおけるビューの基礎知識
Constraint LayoutでViewの位置を相対的に設定する際、Viewを下記の図の用に読んでいます。
まずはその言葉を理解してください。

![view_parts_name.png](https://qiita-image-store.s3.amazonaws.com/0/99960/5694dbba-3746-d0f1-ed5f-8cb3f33d4825.png)


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

* 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」で設定すると下記のようになります。

![left_left.png](https://qiita-image-store.s3.amazonaws.com/0/99960/3c40b81c-4b9e-bd9c-c9e4-d2c6e054bf03.png)


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

##  layout_constraintLeft_toRightOf
「 layout_constraintLeft_toRightOf」で設定すると下記のようになります。
![left_right.png](https://qiita-image-store.s3.amazonaws.com/0/99960/baca9b68-0245-64b0-f8d6-3e59bb827fe6.png)


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

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

![right_left.png](https://qiita-image-store.s3.amazonaws.com/0/99960/274cf274-efc0-1c13-6ddb-f8c8d35871de.png)


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

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

![right_right.png](https://qiita-image-store.s3.amazonaws.com/0/99960/b3c23ae9-b31a-b9c0-2d47-e3f278628f76.png)


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

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

![top_top.png](https://qiita-image-store.s3.amazonaws.com/0/99960/5b948c8a-ca6c-c215-07ad-4de06c4f26a3.png)


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

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

![top_bottom.png](https://qiita-image-store.s3.amazonaws.com/0/99960/d81f9c8d-bd7f-1d25-4ae0-ab408df287e9.png)


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

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

![bottom_top.png](https://qiita-image-store.s3.amazonaws.com/0/99960/30c4999e-8c89-6b2a-6588-aaa6c20b9083.png)


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

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

![bottom_bottom.png](https://qiita-image-store.s3.amazonaws.com/0/99960/9ca4afc4-3b69-d4e7-5861-15eda69bbd54.png)


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

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

![baseline_baseline.png](https://qiita-image-store.s3.amazonaws.com/0/99960/f20b3081-f8fc-73b1-080a-563267b67508.png)


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

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

![start_end.png](https://qiita-image-store.s3.amazonaws.com/0/99960/5f8cb810-f492-fe0f-5f91-0717b6d7dc56.png)


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

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

![start_start.png](https://qiita-image-store.s3.amazonaws.com/0/99960/473501d2-a0a7-7f51-9a06-ec6cf004f9e3.png)


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

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

![end_start.png](https://qiita-image-store.s3.amazonaws.com/0/99960/7e92ef12-23df-3263-d9bf-bb92e4e1daa3.png)


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

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

![end_end.png](https://qiita-image-store.s3.amazonaws.com/0/99960/e82ccf4b-83ee-86c8-9608-03395fc04f16.png)


「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<br>layout_constraintLeft_toRightOf<br>layout_constraintStart_toEndOf<br>layout_constraintStart_toStartOf|![left_start系.png](https://qiita-image-store.s3.amazonaws.com/0/99960/d997c20f-f57c-34df-d1f6-5062c9a1add3.png)|
|layout_constraintRight_toLeftOf<br>layout_constraintRight_toRightOf<br>layout_constraintEnd_toStartOf<br>layout_constraintEnd_toEndOf|![right_end系.png](https://qiita-image-store.s3.amazonaws.com/0/99960/967eabff-2ab8-cb32-511b-ff4f11dd0eca.png)|
|layout_constraintTop_toTopOf<br>layout_constraintTop_toBottomOf|![top系.png](https://qiita-image-store.s3.amazonaws.com/0/99960/031a78dd-7c5a-c173-ddeb-951b47851c64.png)|
|layout_constraintBottom_toTopOf<br>layout_constraintBottom_toBottomOf|![bottom系.png](https://qiita-image-store.s3.amazonaws.com/0/99960/178a77e7-e4b4-586d-f480-87316bebd75e.png)|
|layout_constraintBaseline_toBaselineOf|![baseline系.png](https://qiita-image-store.s3.amazonaws.com/0/99960/863adef8-c528-061e-1532-488dc0c0de63.png)|

以上の用になりました。設定項目の違いによって違いはなさそうです。
そして、baselineはAndroid Studioのバージョンが異なるため、少しだけ見た目が違いますが、概ね同じような表示です。

# まとめ
設定項目が多くて、最初は面食らってしまいますが、慣れれば大丈夫です。
これだけでは柔軟なレイアウトは作成できないので、Relative positioningだけではなく、別の設定項目も覚えなければならなそうです。

# 参考
今回使用したアイコンはIcons8を使用しています。
Icons8のライセンスは、 CC BY-ND 3.0です。
https://icons8.com/

ConstraintLayout
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html