公式ドキュメントのAuto Layout記事にあるStackViewの例を作成してみた！

#はじめに
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW12
この公式ドキュメントの例を元に、画像のようなレイアウト作成しました。
`Stack View`、`Content Hugging Priority`、`Content Compression Resistance Priority`の使い方や機能についてまとめてみようと思います。
![スクリーンショット 2020-11-24 20.47.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/0a61fcdd-1863-fd29-7ae9-1abb0736ee11.png)
# Stack Viewの使い方
いくつかやり方があるが、公式ドキュメントに載っていたやり方が分かりやすかったのでそのやり方を説明します。
`Label`と`textField`を`Stack View`でまとめるには、
![スクリーンショット 2020-11-24 20.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/db5c9c6a-3d08-8a9f-d842-e5be3bddfbfa.png)
二つを選択して
![スクリーンショット 2020-11-24 20.58.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/38ed602e-c230-c263-f5d5-311be6cc6640.png)
[Editor]>[Embed in]>[Stack View]を選択！
![スクリーンショット 2020-11-24 21.01.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/575ef9cc-5510-2369-7bdf-ee84caaa1c0b.png)
水平方向の`Stack View`ができました！
垂直に並べて同じ作業すれば垂直方向の`Stack View`ができます。
この作業を繰り返してレイアウトを作成していきます。
#完成したもの
最初にも載せたこれです。
![スクリーンショット 2020-11-24 20.47.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/dc4c8e50-bc2f-d5ed-618a-c09bceb0916a.png)
#Content Hugging PriorityとContent Compression Resistance Priority
この完成したレイアウトの`Content Hugging Priority`と`Content Compression Resistance Priority`は以下の通りです。
![スクリーンショット 2020-11-24 21.05.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/518f4da3-49c7-df13-43d0-0c5fb2a13d2c.png)
#Content Hugging Priority
Stack View内でパーツを配置して、Stack Viewの方が水平または垂直方向に対して大きく、余白が発生する場合の余白を埋めるためのものです。このHuggingの値が小さい方が空白を埋めるために広がるイメージです。
以下の画像はLabelとtextFieldの間が空いていてどちらかに余白を埋めさせるとします。
textFieldの`Content Hugging Priority`をLabelより低くして、`Stack View`の左右の幅を決めると、画像のようにtextFieldが余白を埋めてくれます。
![スクリーンショット 2020-11-24 21.33.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/25580ebd-76f9-3a02-131e-d11d869bb10f.png)
LabelのHorizontalの`Content Hugging Priority`の値は２５１。（画面一番右の下の方）
![スクリーンショット 2020-11-24 21.36.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/19905ab0-ede7-4954-9476-3c5fda11e753.png)
textFieldの`Content Hugging Priority`の値は２５０
![スクリーンショット 2020-11-24 21.39.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/ceab4579-c240-8030-8e82-8bca94b15d16.png)
#Content Compression Resistance Priority
こちらはパーツがStack Viewからはみ出るときに、優先して表示する方の値を大きくします。
labelの`Content Compression Resistance Priority`を７５１、textFieldを７５０にすると、labelがまず優先的に表示されてからtextFieldが表示されます。
![スクリーンショット 2020-11-25 5.44.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/155d5cb1-9442-9bb8-7d62-02fd7916bb9b.png)
逆に、labelを７５０、textFieldを７５１にするとtextFieldが優先的に表示され、今回のようにtextFieldの内容が長ければlabelを隠してしまいます。
公式ドキュメントで作成したレイアウトで、labelのResistanceが７５０でtextFieldが７４９になっている理由もこれと同じでしょう。
![スクリーンショット 2020-11-25 5.41.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/755375/4b784b76-a4e3-c403-5fbd-ed798db208a7.png)
#最後に
この辺りの知識は使いこなすことができれば、レイアウトの作成がやりやすくなり思うように動かせると思うので、しっかり使いこなしたいですね。
#参考サイト
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW12
https://blog.officekoma.co.jp/2019/02/stackview-content-hugging.html