13
14

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.

ConstraintLayoutのMarginsの基本

Posted at

検証環境

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

  • Android Studio 3.0.2
  • constraint-layout 1.0.2

はじめに

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

ConstraintLayoutを理解する前に・・・

また、レイアウトの配置やViewの基礎知識は下記を参照してください。

ConstraintLayoutのRelative positioningの基本

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

Marginを設定する項目は下記のとおりです。
基本的には、「layout_ [gone] margin POSITION 」の構成をとっています。
「gone」のついている項目は、相対的な位置を示すために設定しているViewのVisivility属性の値によって、有効・無効が決まります。

  • android:layout_marginStart
  • android:layout_marginEnd
  • android:layout_marginLeft
  • android:layout_marginTop
  • android:layout_marginRight
  • android:layout_marginBottom
  • layout_goneMarginStart
  • layout_goneMarginEnd
  • layout_goneMarginLeft
  • layout_goneMarginTop
  • layout_goneMarginRight
  • layout_goneMarginBottom

それでは、説明をしていきます。

android:layout_marginStart・android:layout_marginLeft・layout_goneMarginStart・layout_goneMarginLeft

配置するときのポジションにおける「start」と「left」は同じ部位を指すため、この記事では一気に説明してしまいます。
この項目を設定した時の見た目は下図のとおりです。

start_left_margin.png

Designタブでの見た目は下図のとおりです。
Designタブで「gone」の場合、見た目は変わるのですが、数値が100のままになっています。実際に動作させると期待通りの動きをしているので、IDEの不具合ではないかと思います。特に木にしなくても大丈夫です。

start_left_margin_design.png

android:layout_marginEnd・android:layout_marginRight・layout_goneMarginEnd・layout_goneMarginRight

配置するときのポジションにおける「end」と「right」は同じ部位を指すため、この記事では一気に説明してしまいます。
この項目を設定した時の見た目は下図のとおりです。

end_right_margin.png

Designタブでの見た目は下図のとおりです。

end_right_margin_design.png

android:layout_marginTop・layout_goneMarginTop

この項目を設定した時の見た目は下図のとおりです。

top_margin.png

Designタブでの見た目は下図のとおりです。

top_margin_design.png

android:layout_marginBottom・layout_goneMarginBottom

この項目を設定した時の見た目は下図のとおりです。

bottm_margin.png

Designタブでの見た目は下図のとおりです。

bottom_margin_design.png

まとめ

Marginsはそこまで難しい内容ではないように感じます。startとleftの様に同じ動きをする項目はあるものの、配置と同じように捉えれば問題なさそうです。

参考

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

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

13
14
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
13
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?