[Android] ConstraintLayout レイアウト逆引きまとめ


# はじめに
導入されてから久しいConstraintLayoutですが，みなさん使っているでしょうか．発表されてから3年ほど経ったのもあり，日本語の記事も結構増えてきました．

しかし，ボトムアップでわかりやすく使い方を説明してくれる記事は多いのですが，どうも事例ベースのまとめは少ないように感じます．記事を読んで試みるもなるほど，結局このレイアウトはどうやって作るんや…？　ちょっと急いでるし，まあLinearLayoutでええか…　みたいな．

ということで，本記事はレイアウトを先に紹介してからその実装方法を示す，逆引き式で使い方をまとめていきたいと思います．これであっちこっちのサイトを行ったり来たりしなくていいようになるといいな．つまり，

**ConstraintLayoutの仕組みは大体分かってるけど，実際に作りたいものが作れん**

みたいな人向けだと思います．

ですから，ConstraintLayoutの詳しい仕組みとかは他の記事にお任せします．
これとかめっちゃわかりやすい．

> [XMLで始めるConstraintLayout](https://qiita.com/nakker1218/items/0faa8c1ab504cc4cedea)

本記事の実装は[GitHub](https://github.com/tks10/ConstraintLayoutLibs/tree/master/app/src/main/res/layout)に置いています．
（AndroidStudioにCloneしてPreviewするのをオススメします）


# 目次
レイアウトをカテゴライズするのって難しいですね．ので，今回はパーツの個数で区切ろうと思います．基本的に3つのパーツまでのレイアウトを理解すれば，それより多くなっても大体作れます．ということで目次は

- [パーツが１つの場合](#１つの場合)
- [パーツが２つの場合](#２つの場合)
- [パーツが３つの場合](#３つの場合)
- [応用例](#応用例)

といった流れにしました．では見ていきましょう．

### 注意
実装例のXMLにマテリアルデザインを使っているので，この例をコピペで動かす時は`gradle`と`res/values/styles.xml`を以下のように編集してください．自分のレイアウトに適用する際は必要ありません．

```gradle:app/gradle
dependencies {
    api 'com.android.support:design:28.0.0-rc01'
    ...
}
```

```xml:styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
```

<br>

# １つの場合
１つだけしか使わないってケースは少ないかもしれないけれど，基本になるので少し丁寧に．
左下とか右上は書いてませんが，他のケースから察してください．おなしゃす．

## 中央
ど真ん中に表示．上下左右全てに制約をつけましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/7f1709f0-7c2e-0b4a-38b7-0d7357ec3bca.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```

## 上
`LinearLayout`だと簡単なやつ．`ConstraintLayout`では`Bottom`の制約をつけないことで実現します．
「**制約をつけない**」っていうのも手法の一つです．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/b6922275-8b36-22f6-54cd-ba7b7abc46bd.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
```


## 下
上の反対．`Top`の制約をつけません．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/cb0c4c6a-dc9b-803e-2f7a-410b82ca1370.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```



## 左
もうなんとなく言いたいことがわかると思います．
`End`の制約をつけません．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/d807788c-3921-f0f5-bf94-be0dc53ea03b.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```

## 右
`Start`の制約をつけません．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/924c40dc-b357-398d-7da4-54e12e14f631.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


## 左上
どんどん制約を減らします．`End`と`Bottom`の制約をつけません．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/19e32969-7581-25ab-d48a-a8a8eb64d191.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
```


## 右下
`Start`と`Top`の制約をつけません．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/94f24e12-eded-933c-f5d5-cba8005216e8.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


## 水平方向に好きな位置
図のように，マージンに比率を持たせることで実現します．
`app:layout_constraintHorizontal_bias`を指定しましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/153892fe-3ffb-d380-55aa-a7159f797a2f.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.3" />

</android.support.constraint.ConstraintLayout>
```


## 垂直方向に好きな位置
`app:layout_constraintVertical_bias`を指定します．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/652fdc04-a647-f502-a99f-293c74f9b33b.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.7" />

</android.support.constraint.ConstraintLayout>
```


## 好きな位置
先ほどの２つを組み合わせます．
`app:layout_constraintHorizontal_bias`
`app:layout_constraintVertical_bias`
を指定しましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/55e8f284-9c7c-36a4-3513-8e0f9b9ba252.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.8"
        app:layout_constraintVertical_bias="0.4" />

</android.support.constraint.ConstraintLayout>
```

<br>

# ２つの場合
互いに制約を加えるConstraintLayoutにおいて，２つのパーツを使いこなせることは結構重要です．複数の取り扱いがわかってしまえば，数が増えても大体は対応できると思うのです．

## 垂直方向に均等
マージンを均等化する場合です．特に難しいことは考えず，中央表示と同じ感覚で制約をつけます．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/b47eb97f-001f-9d64-0d9a-7b96c9a75e90.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/button2" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


## 水平方向に均等
水平方向も制約部位を変えるだけです．新しいパラメータはありません．

**ここからは数が多くなってしまうので水平方向なレイアウト（Horizontal）のみ例を示します．
縦方向（Vertical）なレイアウトを作りたい場合は，基本的に制約部位を変えるのと，`Horizontal`系のパラメータを`Vertical`系に変えるだけです．**
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/d36553d4-5e14-55af-6e61-9d47641b54b0.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```



### ちょっとずらしたい①（Space）
さて，ちょっとさっきのレイアウトを左右にずらしたいんだよなぁ，ってあると思います．
しかしこれが結構曲者で，見た目は似ているもののマージンを比率でコントロールする術はありません．
ここは`Space`を入れることで擬似的に実現しましょう．

これまでのレイアウト同様，`Weight`を用いて比率を決定できます．
**`width`を`0dp`にするのを忘れないようにしましょう．**
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/9faf1dd9-3532-87c5-0c35-46e3509bfe33.png width=35%>

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

    <Space
        android:id="@+id/space1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="1" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toEndOf="@id/space1"
        app:layout_constraintEnd_toStartOf="@id/space2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="2"/>

    <Space
        android:id="@+id/space2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="1" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/space2"
        app:layout_constraintEnd_toStartOf="@id/space3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2" />

    <Space
        android:id="@+id/space3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2" />

</android.support.constraint.ConstraintLayout>
```

### ちょっとずらしたい②（biasの組み合わせ）
先ほどは`Space`と`weight`パラメータを使って比率を決定し，要素をずらす事を実現しました．
ただ，単純に「[水平方向に好きな位置](#水平方向に好きな位置)」で述べた`bias`の組み合わせでも書けます．
この場合要素の大きさは`wrap_content`かdpを指定して固定したい場合に向いていますね．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/64381ad8-3cd5-fa15-1030-855fa887d0ac.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.4" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.9" />

</android.support.constraint.ConstraintLayout>
```


### 片方が端にある場合
しかし，片方が画面の端っこに固定（`fix`）されている場合は，`bias`を使うことができるようです．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/89f8dc5f-da05-d4ba-1f90-6a79cca510e7.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_bias="0.3" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


## くっつける
要素を中央に詰めて表示したい場合です．
`app:layout_constraintHorizontal_chainStyle="packed"`
を指定しましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/6502954c-e37b-4a67-1e88-133c4b50e7e5.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### ちょっとずらしたい
それをちょっと左右にずらしたいなぁ，というとき．
今回は`bias`が使えます．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/5059ecec-3f75-dcd4-bad2-d46ca3f43dcc.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.3" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### 垂直方向にずらす
`app:layout_constraintHorizontal_chainStyle="packed"`はあくまで水平方向に要素を詰めることしか指定していませんので，`app:layout_constraintVertical_bias`を弄ればそのまま要素を動かせます．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/1a24cd0a-cc3c-f89a-52f4-beb76191586d.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintVertical_bias="0.4"/>

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.7"/>

</android.support.constraint.ConstraintLayout>
```


### そんなにくっつなかなくていい
いや，確かに詰めて表示したいんだけどそんな密着しなくてええんや，って時．
素直に`android:layout_margin`を指定しましょう．

<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/b11a0b65-8b15-3ccb-791f-5bd90a4106a4.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.3" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginStart="15dp"/>

</android.support.constraint.ConstraintLayout>
```


## 画面全体に均等
要素で画面を全て使って表示したい時ですね．
`android:layout_width="0dp"`
`app:layout_constraintHorizontal_chainStyle="spread"`
を同時に指定することで実現します．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/04a63485-a68d-8703-cd95-9809601485fb.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### 比率を変えたい
`app:layout_constraintHorizontal_weight`で比率が指定可能です．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/75c3cd14-165e-bfb3-c8d2-af7524475e47.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="3" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2" />

</android.support.constraint.ConstraintLayout>
```


## 画面両端
要素を画面の両端に寄せたい時．
`app:layout_constraintHorizontal_chainStyle="spread_inside"`を指定しましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/50bee084-d3c2-8f22-5634-c8a975be072e.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### 比率を変えたい
これは`Space`の出番です．`width`を`0dp`にして`weight`を指定しましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/0d29656a-fc91-92dc-b967-6ee71b26a4aa.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/space1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="3"/>

    <Space
        android:id="@+id/space1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/space1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="1" />

</android.support.constraint.ConstraintLayout>
```


## パーツの端を揃える
左のようにサイズの異なる要素を端を揃えたい時．
ボタン2の`Top`の制約をつけないことで実現します．
**仕組み的にはパーツが１つの時に画面最下部に表示したのと全く同じです．**
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/edf93eca-f225-dec0-607c-2cd0a511edac.png width=35%>　→　<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/5e1346c8-aef3-ec07-b939-5e771d6e5a7c.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="140dp"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/button1" />

</android.support.constraint.ConstraintLayout>
```


## 中心を他パーツの端に揃える
これは知らないと難しそう．ボタン２の`Top`と`Bottom`を両方ともボタン１の`Bottom`に対して制約をつけることで実現します．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/4cf696bf-58e6-58b0-ab5b-49f71dc4d46b.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="140dp"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintBottom_toBottomOf="@id/button1" />

</android.support.constraint.ConstraintLayout>
```


## 文字を揃える
うおぉ，文字がずれとるやんけ…，って時．
`app:layout_constraintBaseline_toBaselineOf`を指定しましょう．
`TextView`なんかでは多用しそうですね．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/7cdc6772-8665-992f-55ea-fdc1f0a90feb.png width=35%>　→　<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/5664147a-d67d-c707-03ac-58c450ec4f11.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="140dp"
        android:text="1"
        android:gravity="bottom|center"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBaseline_toBaselineOf="@id/button1"/>

</android.support.constraint.ConstraintLayout>
```

<br>

# ３つの場合
さて，基本的にここからはこれまでの組み合わせです．
といって書かないのも無責任なので少し書きます．組み合わせ方を学びましょう．


## 水平方向に均等
２つの時と同じ．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/7337206d-8fca-33f6-4d61-12e318d06770.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### ちょっとずらしたい
これも[２つの時](#２つの場合)と全く同じ．`Space`を使うか，`bias`を組み合わせます．
xml省略．


## くっつける
`app:layout_constraintHorizontal_chainStyle="packed"`でしたよね．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/ec318b09-bb50-988c-91df-a8e938c97379.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### ちょっとずらしたい
`app:layout_constraintHorizontal_bias`です．
めっちゃ同じです．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/3bf0ddad-d896-1a6e-5c34-558fb4d2b4da.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.3" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```

### 部分的に詰めて表示する
これは新しい．全部じゃなくて，一部の要素だけ詰めたいんだよなぁって時．
ボタン３のボタン２に対する制約を外すことで，`chain`から離脱します．
画面右端とのスペースは，`margin`なり`guideline`で確保しましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/7caa24fc-a9b3-e164-f40f-de69045a2341.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:layout_marginEnd="15dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### そんなにくっつなかなくていい
やっぱりこれも`android:layout_margin`を適宜使いましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/5f4b518d-181a-0b1b-59bf-91623206d503.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.3" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginStart="10dp"/>

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginStart="15dp"/>

</android.support.constraint.ConstraintLayout>
```


## 画面全体に均等
`app:layout_constraintHorizontal_chainStyle="spread"`ですね．
説明することがない．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/bafe6e29-1e4e-a554-67ad-00542fa5c985.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### 比率を変えたい
．．．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/28d947c9-2211-29ae-e523-4487c2f5f883.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="1" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="2" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="4" />

</android.support.constraint.ConstraintLayout>
```

## 画面両端にくっつける
`app:layout_constraintHorizontal_chainStyle="spread_inside"`を指定します．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/38b28d89-1f9d-a65e-0db8-332e7d2b7df5.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>
```


### 比率を変えたい
おなじみ`Space`を使いましょう．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/7f17c6be-0a2b-51ba-1f09-bbeef3209aa4.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/space1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintHorizontal_weight="4" />

    <Space
        android:id="@+id/space1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/button1"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="1" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toEndOf="@id/space1"
        app:layout_constraintEnd_toStartOf="@id/space2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="4" />

    <Space
        android:id="@+id/space2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toEndOf="@id/button2"
        app:layout_constraintEnd_toStartOf="@id/button3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="3" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/space2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_weight="4" />

</android.support.constraint.ConstraintLayout>
```


# 応用例
さて，応用例と目次を作ってしまったからには書かなければならないのですが，そこそこ応用も書いてしまった気がします．とりあえず１つ書いておくので，これ欲しい！等々ありましたらリクエストをください．

## 一覧
これ，実は全て１つの場合の組み合わせでできています．
ボタン１は左上に表示．ボタン２はボタン１を画面最上部と捉えて左上に表示．以下再帰的に・・・，といった感じですね． ConstraintLayoutで組んでいれば画面がひっくり返ろうが解像度が違おうが大丈夫です．
ちなみに左にスペースがあるのは`android:padding="20dp"`を親要素に適用しているからですね．
<img src=https://qiita-image-store.s3.amazonaws.com/0/181933/fd2d68a3-d674-b91b-b77a-f2f2b3b92127.png width=35%>

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

    <android.support.design.button.MaterialButton
        android:id="@+id/button1"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button2"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:text="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button1" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button3"
        android:layout_width="170dp"
        android:layout_height="wrap_content"
        android:text="3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button2" />

    <android.support.design.button.MaterialButton
        android:id="@+id/button4"
        android:layout_width="140dp"
        android:layout_height="wrap_content"
        android:text="4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/button3" />

</android.support.constraint.ConstraintLayout>
```


# まとめ
色んなことに言えますが，ボトムアップで勉強すると同時に，ケース別にトップダウンで学ぶのも大事なんじゃないかなと思います．しかしそのトップにあたる資料が散らばってたり英語だったり．そんな時に使ってもらえたらええかなと．（半分自分用のメモ）

めんどいと思って結局使ってなかった方は，コピペでもなんでも使ってみてください．
こんなレイアウト欲しい等あれば，コメントにてよろしくお願いします．