AndroidStudio ConstraintLayout、ガイドライン、チェーン機能

ConstraintLayoutとは

そもそも,Constraintとは英語で制約という意味です。

ConstraintLayoutとは、その名の通り、レイアウト部品の１つです。
ConstraintLayout を使用すると、フラットなビュー階層を持つ大きくて複雑なレイアウトを作成できます（ビューグループのネストはありません）。
xmlファイルをコードではなく、視覚的に扱えるGUIで作っていくと効率よく作業ができます。
一方LinearLayoutは、ネストをして縦方向横方向の部品を並べていきます。

すべてのビューが兄弟ビューや親のレイアウトとの関係に従って配置される点で、これは RelativeLayout と似ていますが、RelativeLayout よりも柔軟性があります。

ConstraintLayoutは、全ての部品を相対指定します。

制約(Constraint)の定義

ConstraintLayout 内でビューの位置を定義するには、ビューに対して最低 1 つの水平方向の制約と 1 つの垂直方向の制約を設定する必要があります。各制約は、別のビュー、親のレイアウト、非表示のガイドラインとの接続や位置揃えを表します。
つまり、それぞれの部品との位置関係を指定してあげます。
例えば、「上はこの部品から8dp,左はこの部品から8dp」のように。

XMLファイルで記述もできるが、デザイン画面で扱う方が効率がいい気がします。

ConstraintLayoutにおけるlayout_width/height

デザイン画面で開発を進めていく場合、制約(Constraint)は、Constraint Widgetで設定していきます。

Constraint Widgetの下図の3つのアイコンを切り替えることで、親部品いっぱいまで幅や高さを広げる事や、センタリングが可能となる。

※XMLファイルの場合、親ビューの上限サイズまで拡張する場合は、layout_width/height属性に0dpを指定する(=Match Constraints)。**

・固定: 下のテキスト ボックスに特定のサイズを指定するか、エディタ内でビューのサイズを変更します。

・コンテンツをラップ: ビューはコンテンツを収めるのに必要なだけ拡大します。

・制約に合致: ビューは各辺の制約を満たす範囲内で（ビューのマージンを考慮して）可能な限り大きく拡大します。ただし、この動作は以下の属性と値で変更できます（これらの属性は、ビューの幅を「制約に合致」に設定した場合のみ有効です）。

横並びの変更

デザイン画面でレイアウトを調整すれば縦画面から、横画面の変更も簡単に出来る。

上図から、横画面に変更するには、etNameと、etMailの制約ハンドルを変更できれば横に持って来れる。

綺麗にベースラインを整えるには、名前を右クリック>Show Baselene>etNameまでドラッグドロップ

Tips ガイドライン

メニューバーから、add Vertical Guidelineを選択すると、ガイドラインを使用できる。
ガイドラインは、制約の設定先に指定しておくと、ガイドラインに沿って変更内容が更新されるので、便利な機能。

ガイドラインを設定することにより簡単に綺麗に配置が可能となります。

サンプルコード（ガイドライン）

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="115dp" />

Tips チェイン機能

チェイン機能を使うと、複数の画面部品を横方向、または縦方向にグループ化出来る機能です。

設定手順
チェインしたい部品を複数選択>右クリック>Chains>Create Horizontal Chain

さらに、
チェインされた部品を右クリック>Chains>Horizontal Chain Style
を選択すると、
[spread],[spread inside],[packed]の3個から機能を選ぶ事ができる。

どの機能もチェインした部品を均等に並べることができるので、１つ１つ設定する手間が省けます。