Go to Qiita Advent Calendar 2024 Top
LoginSignup
18
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@naoiin株式会社カサレアル

ConstraintLayoutのRelative positioningの基本

Posted at

検証環境

この記事の内容は、以下の環境で検証した。

  • Android Studio 3.0.2
  • constraint-layout 1.0.2

はじめに

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

ConstraintLayoutを理解する前に・・・

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

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

view_parts_name.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

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

layout_constraintLeft_toRightOf

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

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

layout_constraintRight_toLeftOf

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

right_left.png

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

layout_constraintRight_toRightOf

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

right_right.png

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

layout_constraintTop_toTopOf

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

top_top.png

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

layout_constraintTop_toBottomOf

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

top_bottom.png

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

layout_constraintBottom_toTopOf

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

bottom_top.png

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

layout_constraintBottom_toBottomOf

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

bottom_bottom.png

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

layout_constraintBaseline_toBaselineOf

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

baseline_baseline.png

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

layout_constraintStart_toEndOf

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

start_end.png

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

layout_constraintStart_toStartOf

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

start_start.png

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

layout_constraintEnd_toStartOf

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

end_start.png

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

layout_constraintEnd_toEndOf

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

end_end.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
layout_constraintLeft_toRightOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf		 left_start系.png
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf		 right_end系.png
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf		 top系.png
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf		 bottom系.png
layout_constraintBaseline_toBaselineOf baseline系.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

18
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?