検証環境
この記事の内容は、以下の環境で検証した。
- Android Studio 3.0.2
- constraint-layout 1.0.2
はじめに
ConstrantLayoutには様々な設定項目があります。
下記の記事で記述したように、今回は「Margins」のみについて説明します。
また、レイアウトの配置や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」は同じ部位を指すため、この記事では一気に説明してしまいます。
この項目を設定した時の見た目は下図のとおりです。
Designタブでの見た目は下図のとおりです。
Designタブで「gone」の場合、見た目は変わるのですが、数値が100のままになっています。実際に動作させると期待通りの動きをしているので、IDEの不具合ではないかと思います。特に木にしなくても大丈夫です。
android:layout_marginEnd・android:layout_marginRight・layout_goneMarginEnd・layout_goneMarginRight
配置するときのポジションにおける「end」と「right」は同じ部位を指すため、この記事では一気に説明してしまいます。
この項目を設定した時の見た目は下図のとおりです。
Designタブでの見た目は下図のとおりです。
android:layout_marginTop・layout_goneMarginTop
この項目を設定した時の見た目は下図のとおりです。
Designタブでの見た目は下図のとおりです。
android:layout_marginBottom・layout_goneMarginBottom
この項目を設定した時の見た目は下図のとおりです。
Designタブでの見た目は下図のとおりです。
まとめ
Marginsはそこまで難しい内容ではないように感じます。startとleftの様に同じ動きをする項目はあるものの、配置と同じように捉えれば問題なさそうです。
参考
今回使用したアイコンはIcons8を使用しています。
Icons8のライセンスは、 CC BY-ND 3.0です。
https://icons8.com/
ConstraintLayout
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html