Android Studio 2.2 Layout EditorのConstraintLayoutを設定する各UI部品

**ConstraintLayoutはAndroid Studio2.2 Preview3では新規プロジェクト作成時のデフォルトのUI要素となっています。**
良い悪いはおいておいて、そのため一旦学んでおくと良いと思います。
ちょっとAndroid Studio上のUIの部品がたくさんあって、どうやって操作するのか戸惑ったのでまとめてみます。

# Constraint
Constraintは制約という意味があります。Constraintを制約と読み替えて読むとわかりやすいかもしれません。
## Constraintをつける

ConstraintでRelativeLayoutのように他のViewとの関係を定義できます。
丸いhandleをドラッグアンドドロップすることでつけられます。
![constraint.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/77118de6-f0aa-61fa-c2f0-5cdadaa20c52.gif)
## デフォルトのマージンの設定
Constraintをつけると自動的に上の8となっているdp分marginが入ります。
このmarginのdpはこの「8」となっているところ押すと切り替えができます。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/c6787b10-7461-26ee-a7d1-7b2ef04214d0.png)

## 左右または上下のConstraint設定されている場合の割合の調整
同様に親レイアウトからの制約も設定できます。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/52fac7af-5b1d-007c-f8b2-8ee008404c72.png)
右と左両方のConstraintが設定されている場合は波線になり、このモードの時は左右の比率を設定することができます。
![constraint_position.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/43a0b040-26a6-6377-e019-4b26cab82c41.gif)

## ベースラインを合わせるConstraintをつける
カーソルを合わせてしばらく待つとベースラインを合わせることができるhandleが出てくるので、それをドラッグアンドドロップすることでcontraintをつけられます。
![constraint_base.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/5b19d93c-a0ae-505d-e451-cec00a8c4d6b.gif)

## Viewの大きさの調整
右側にこんなのが出ていると思います。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/bb9b4992-c073-7b31-081b-45b6dd560504.png)
しばらくカーソルを合わせていると説明が出てきます
### Fixed
「Fixed」となっています。「Fixed」の場合はレイアウトに「20dp」などと設定されている状態です。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/e192d32a-f9bb-b957-8acb-e912f0e92aec.png)
### WrapContent
お馴染みのWrapContentです。文字や画像の大きさによってViewの大きさが決定されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/c1baab4c-4164-4b17-ca36-a0e535613852.png)

### AnySize
ここが一番抑えておくべきポイントです。
Constaintを満たす最大のViewの大きさにすることができます。
この画像は小さい画像なので横をWrapContentにするとすごく縮んでいます。
それをAnySizeにすると以下のように変化します。
言い換えれば`match constraint`と言えそうです。

| | |
|---|---|
| WrapContent | ![image](https://qiita-image-store.s3.amazonaws.com/0/27388/ee5971f9-97fd-5966-44c5-a017f4201ac3.png) |
| AnySize | ![image](https://qiita-image-store.s3.amazonaws.com/0/27388/63b150b6-bbe5-3760-9ba3-d40884d7276f.png) |

## レイアウトの要素一覧を表示する
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/d603412b-345c-540f-38ef-3999a7f207dd.png)でよく利用するものだけ表示されるので、それと全てが切り替えできます。
![constraint_properties.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/8b562e51-9a8d-dc40-31ce-9ff335bd3292.gif)


## Constraintが見えるかどうかを切り替える
磁石マーク![image](https://qiita-image-store.s3.amazonaws.com/0/27388/0a792cd9-a2d4-aae4-21f0-5454d70cbe1d.png)で先程から表示されている矢印などのConstraintの表示を切り替えます


## Auto Connectを使うかどうか切り替える
AutoConnectを使わないとViewを置くだけでは、Constraintはつきません。
AutoConnectを使うとViewをおいた時に近くのViewから勝手にConstraintをつけてくれます
![constraint_auto_connect.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/7ea1929e-65dc-cd41-c637-4e3771a2cd65.gif)


## Constraintを消す
ViewについているConstraintを全て消してくれます。
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/6aa6fb65-264e-c125-8b02-1b397e200e94.png)

## InferConstraint
豆電球を押すことで、すでに置かれているViewに自動でConstraintをつけることができます。
![constraint_infer.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/52ab4da6-8a18-1d82-86ce-75116d656385.gif)

# Viewを整頓する
shiftを押しながら複数選択して、いろいろ行うことができます。
ただこれをやるだけではConstraintはつかないようなので、別に付ける必要があります。(プレビューだけつく)
## マージンを調整
デフォルトのマージンに揃えたり、それぞれレイアウトにマージンを分配したり、
![constraint_pack.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/288cc064-1a5f-8d15-7c19-8e1f42152cf3.gif)
それぞれを同じく大きくしたりできます。
![constraint_pack2.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/b4e57238-22a7-0343-2045-f3fbe9235a36.gif)


## Viewを整列
複数選択してそれっぽいボタンを押せばできます。
![constraint_arrange.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/762d1802-19f7-57f3-bfd3-8270479ff943.gif)
Viewを真ん中に持っていくこともできます。
![constraint_arrange2.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/76d21d08-443b-e7a9-67a6-813c3ff55292.gif)

## Guide Lineを入れる
ガイドラインを入れてレイアウトを揃えることもできます。(Material Design的にはKeyLine？ https://material.google.com/layout/metrics-keylines.html#metrics-keylines-keylines-spacing )

![constraint_guide.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/fb01232c-958b-0295-3273-819406dfd48e.gif)

ちなみにこれを使うと実際にレイアウトにViewが入るので、それを元にレイアウトしていくことになります
![image](https://qiita-image-store.s3.amazonaws.com/0/27388/221113d8-21d9-2131-61a9-58d301bf5cd0.png)

## Constraintのエラーを治す
だいたいがConstraintが足りなくてエラーが出ているのでInfer Constraintするか、Constraintを設定してあげましょう。(Viewの場所や大きさが不定になっていてエラーになるようです)
![constraint_error.gif](https://qiita-image-store.s3.amazonaws.com/0/27388/97bc2e21-8604-a4f7-87db-89cc42ff2a06.gif)




# まとめ
結構難しいイメージが有りましたが、覚えてしまえばそんなに大変でもなかったのと、Viewの整列など意外と直感的に操作できるので良いかもしれません。