はじめに

RelativeLayoutまでもがレガシーになる中、今週初めてConstraintLayoutを使いました。
今まで、「なんか複雑そうだな・・・」という思いで敬遠していましたが、簡単な配置であれば難しくなく、むしろ思いのままに配置できて気持ち良いほどでした。
そこで、コードと描画を見ながらConstraintLayoutの基本について紹介したいと思います。
Designを利用する方法もありますが、今回はText(xml)で解説をしていきます！
ConstraintLayoutを使っていない方、なんとなく敬遠している方に見ていただければ幸いです。
本当に基本だけで、chainもないので悪しからず。

基本属性の読み方

ConstraintLayoutに入りづらかった理由の一つに、「属性が長い」ということがありました。
長いからなんか難しいんだろうなー、読みたくないなーと思っていました。

基本属性(と勝手に言ってるだけです)はこちら

属性
layout_constraintEnd_toStartOf
layout_constraintStart_toEndOf
layout_constraintRight_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintBottom_toTopOf
layout_constraintTop_toBottomOf
layout_constraintStart_toStartOf
layout_constraintEnd_toEndOf
layout_constraintLeft_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintBottom_toBottomOf

なんだかぱっと見てもよくわからないですが、共通点があります。
layout_constraintXXX_YYYとなっていますね。
書く時はこうなっています。

    <TextView
        app:layout_constraintXXX_YYY="@id/ZZZ"

これを日本語にすると、
TextView(自分)のXXXをZZZのYYYと合わせる
となります。
つまり、layout_constraintLeft_toLeftOf="@id/ZZZ"は、私左側をZZZの左側と合わせるという意味になります。
縦と横で2つ定義することで、位置を決定することが出来ます。

センタリングの仕方

センタリングしたい上下、左右両方の制約を付けることで、その間に配置することが出来ます。
次のサンプルで確認しましょう。

サンプル

アルファベットを25個、四角いViewの周りに入れてみました。
ConstraintLayoutの1階層のみで構成しています。

fragment_constraint.xml

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/center_rectangle_view"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:background="@color/cardview_shadow_start_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

        ...
</ConstraintLayout>

真ん中にある灰色のViewは全体のViewに対してセンタリングしています。
親Viewを指定する際は、値にparentを設定します。

では次に、四角の左上にある「a」の設定を見てみましょう。

fragment_constraint.xml

    <TextView
        style="@style/ConstraintTextView"
        android:text="a"
        app:layout_constraintBottom_toTopOf="@id/center_rectangle_view"
        app:layout_constraintRight_toLeftOf="@id/center_rectangle_view"/>

・「a」の下を四角の上と合わせる
・「a」の右を四角の左と合わせる
これによって、「a」は四角の左上に配置されます。

大量のTextViewに同じ設定をするのが面倒だったのでstyleを設定しています(ConstraintLayoutとは関係ありません)

styles.xml

    <style name="ConstraintTextView">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">24sp</item>
        <item name="android:gravity">center</item>
    </style>

全部のコードは以下です。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/center_rectangle_view"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:background="@color/cardview_shadow_start_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="a"
        app:layout_constraintBottom_toTopOf="@id/center_rectangle_view"
        app:layout_constraintRight_toLeftOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="b"
        app:layout_constraintBottom_toTopOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="c"
        app:layout_constraintBottom_toTopOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="d"
        app:layout_constraintBottom_toTopOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="e"
        app:layout_constraintBottom_toTopOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toRightOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="f"
        app:layout_constraintRight_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="g"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="h"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="i"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="j"
        app:layout_constraintLeft_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="k"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintRight_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="l"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="m"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="n"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="o"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toTopOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="p"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintRight_toLeftOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="q"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="r"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="s"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="t"
        app:layout_constraintBottom_toBottomOf="@id/center_rectangle_view"
        app:layout_constraintLeft_toRightOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="u"
        app:layout_constraintRight_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintTop_toBottomOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="v"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintTop_toBottomOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="w"
        app:layout_constraintLeft_toLeftOf="@id/center_rectangle_view"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toBottomOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="x"
        app:layout_constraintRight_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toBottomOf="@id/center_rectangle_view"/>

    <TextView
        style="@style/ConstraintTextView"
        android:text="y"
        app:layout_constraintLeft_toRightOf="@id/center_rectangle_view"
        app:layout_constraintTop_toBottomOf="@id/center_rectangle_view"/>
</android.support.constraint.ConstraintLayout>

LinearやRelativeではなく、Constraintを利用していきましょう！