制約とgif動画で見るいろんな制約の付け方

# 制約の付け方 
Swift愛好会初心者向けハンズオン資料のために作りました。
ハンズオンをしなくても参考になるところがあるかもしれませんので書き残します

## 単位
- pointという単位で大きさと位置を指定します

## 指定できるもの
### 大きさ( scale )を決める
 - 縦幅を決める ※1
 - 横幅を決める ※2
 - 
<img width="268" alt="スクリーンショット 2018-02-18 4.50.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/86930/0dbb3338-757e-aa12-a8ec-72ebef4fd0c5.png">

### 上下左右の位置( position )を決める
 - 上、下の位置をきめる ※3
 - 左、右の位置を決める ※4
 
 <img width="268" alt="スクリーンショット 2018-02-18 4.50.50 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/86930/5ebc0832-9218-729e-7b19-b65fb95bc792.png">

>※1 (上下positionが決まっている場合不要)
※2 (左右positionが決まっている場合不要)
※3 (上下どちらかと縦幅が決まっている場合はもう片方の上下どちらかが不要)
※4 (左右どちらかと横幅が決まっている場合はもう片方の左右どちらかが不要)

#### 慣れるまでは、「だいたい上下左右が決まっていればOK」とおもってればOKです！(説明下手でごめんなさい)


## 各実践方法gif


うにゅーんっ青い線を引っ張る動作は、 **controlキーを押しながらドラッグ&ドロップ** で行ってます！

カーソルがおよいでしまってごめんなさい,,,

#### 縦横幅を数値で指定する

- たて 100 
- よこ 200
- 上から 30 (下は縦幅が決まってるので指定する必要がない)
- 左から 30 (右は横幅が決まってるので指定する必要がない)

![固定幅.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/55a0404a-e328-2762-c75d-aec620bcb96f.gif)

#### 間違ってつけてしまった制約の削除

- 左でつけてしまった制約を選択(or 画面からも選択可能)
- Deleteキーを押す
- （削除したくないものを削除した場合はcontrol + z で戻せます）

![制約を削除.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/d11983bf-1a40-fbd7-0948-d206de966d86.gif)


#### よこ軸の中心に置く
- たて 100 
- よこ 200
- 上から 30 (下は縦幅が決まってるので指定する必要がない)
- よこが中心に来るようにする
![横中心.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/c9fb6560-c7d9-5747-4a3a-9beb8dbd2887.gif)


#### たて軸の中心に置く
- たて 100 
- よこ 200
- 左から 30 (右は横幅が決まってるので指定する必要がない)
- たてが中心に来るようにする

![たて中心.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/4f0b2d27-fd07-dfb3-a102-4aeb447a5917.gif)

#### 画面いっぱいにする(他の素材の幅と合わせることで他の素材とおなじ大きさにできる)
- たて 画面幅と合わせる
- よこ 画面幅と合わせる
- 上から 0
- 左から 0

![画面いっぱい.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/96060739-02a3-e70d-d213-292965fb9beb.gif)

#### 縦横比を指定する(たて1：よこ２)
- たて(一辺)を固定値で決める
- たて１に対してよこ2にAspect比を指定する
- 上から 30
- 左から 30

![比率指定.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/3dfbf78e-db50-38c9-94aa-55395a1edacf.gif)

#### 画面の〜割の幅にする
- たて 画面幅の5割
- よこ 画面幅の5割
- 上から 0
- 左から 0

![割合.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/04c6296e-cd4d-c01b-75c3-7bcf2512b709.gif)

#### 幅を~以上~以下にする(UILabel。分かりづらく、あまり良い例じゃないのは理解している..どなたかお助けを...)
- 上を指定
- 左右を指定
- 下を指定し、30以上のGraterThanにする(下までの距離が30point以上あることを保証する制約)

(青いViewに重ならないように30以上の幅にしたい場合を想定しています)

- センター揃えになってしまう(上揃えにしたい)
![labelせんたーになっちゃう.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/ff4f20a2-1213-2bd8-7bc7-1a5c1c5697d2.gif)

- 範囲がわかりやすいように色をつける

![label2いろづけ.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/eeda336a-f446-373f-82c4-0b43ddebb496.gif)

- 上揃えにするために下の制約を外す

![上揃えにする.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/bafb87ca-cb18-f846-7db9-bef778054d3b.gif)

- 1行で途切れてしまうのでNumberOfLinesに0を設定して無限に改行できるようにする
 
![label3かいぎょう.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/70ee42c7-cafa-c538-8c26-890a398e5024.gif)

- 青い部分まで侵食されてしまうので、青い部分の上30pointで止まるように、３０point以上を保証する制約をかける
![label3下の制約.gif](https://qiita-image-store.s3.amazonaws.com/0/86930/4df99b04-a239-f809-aa21-7b129451c8a3.gif)

よくわからないとおもいますごめんなさい。。。説明を省いたハンズオン用の制約の付け方は[こちら](https://qiita.com/gotou015/items/260c9cc6045e183e3e9d)


#### 優先順位をつける方法がある
- ちょっと実例が浮かばないので、今回は無しで