Stack Viewについて簡単におさらいしてみました。

今話題のStackView、or ちょっと前に話題のStackViewについて知識がついたかもと思ったので記事にして見ました。:hatching_chick:

何ができるかなどや、参考になる記事、参考にさせていただいた、勉強させていただいた記事を先に書いておきます。

URL: http://qiita.com/yucovin/items/ff58fcbd60ca81de77cb
URL: http://qiita.com/kinopontas/items/d08f84dbb711c5acbe28

今回は流れを紹介します。

**まずはじめに今回StackViewを使わないバージョンのラベル3つ(上3つ)とStackViewを使うラベル3つ(下3つ)を用意します**

<img width="318" alt="スクリーンショット 2017-08-23 23.47.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/8db1b6fa-77a7-ea9e-4691-60b56fa88528.png">

**次にStackViewを使うラル3つをShiftキーをおしながらクリックして3つ選択します。**
<img width="321" alt="スクリーンショット 2017-08-23 23.47.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/c5b48b42-3b3c-8528-f876-59eb23c1b3ac.png">

**選択し終わったら下の方の**
<img width="490" alt="スクリーンショット 2017-08-23 23.47.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/ab55860e-9c05-fd97-a8b9-75ca8b0ac021.png">

**この印をポチッとします。これでStackViewで囲まれるので、**
<img width="21" alt="スクリーンショット 2017-08-23 23.47.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/914e82f8-bfb3-c258-2f62-19278d29421a.png">

**下のラベルの3つだけ窮屈になってます**
<img width="317" alt="スクリーンショット 2017-08-23 23.48.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/77f89584-27a9-3d86-a13c-cf5b4b02a4ae.png">

**作成したStackViewを選択したままアートリビュートのSpacingを10に設定します**
<font color="red">これはStackViewで囲まれているラベルの余白を10とるよということです。</font>
<img width="263" alt="スクリーンショット 2017-08-23 23.48.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/fedf544e-397f-1f9a-b2a3-84e257371407.png">

**次にStackViewを使わないバージョンに真ん中の上と下つければ同じ感じになるかと思い**
<img width="322" alt="スクリーンショット 2017-08-23 23.48.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/93f44144-33d8-ae4c-3996-e7308ab5ff37.png">

**こんな感じでつけます。そんなにうまく行かないので赤いのを適当に消して行くと**
<img width="275" alt="スクリーンショット 2017-08-23 23.49.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/24f5a897-6c28-11ef-efcc-d8be35830991.png">

**最終的にこんな感じで制約がつきます。**
<img width="761" alt="スクリーンショット 2017-08-23 23.58.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/7000c287-0d2a-5b3d-655a-a2d671c98f61.png">

**次に下の図ように接続して、上の真ん中のラベルと下のラベルの表示をtrueにして非表示にします。**
<img width="1027" alt="スクリーンショット 2017-08-24 0.00.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/f7ec346b-e079-1160-3920-77696f8d6cff.png">

**よし！ビルど！どうだ！！**
<img width="310" alt="スクリーンショット 2017-08-24 0.01.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/f89aae82-59ab-ce8b-9852-0d9c2750a179.png">

<font color="red">……。何も変わってないじゃんって思います。</font>

**変化を見るために色をつけます**
<img width="1064" alt="スクリーンショット 2017-08-24 0.01.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/f615ab95-ced9-5cdf-fc98-1c9b0d22ce3b.png">

**よし！ビルど！どうだ！！**
<img width="309" alt="スクリーンショット 2017-08-24 0.02.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/818c79ef-5379-f3c6-796f-4c317eab0041.png">

<font color="red">……。変わったけど何がいいのってなります。でもこれができるってすごいです。上はラベルの隙間があいてしまいますが、下はラベルがなかったかのようにしてくれます。</font>

**もし仮にセルなんかで写真と文字を表示させといて写真がない場合、その写真はなかったことにして文字をいっぱいに表示したい時、これをするだけでその処理ができてしまうという。使いようによっては大変な時間削減になると思いました。**

**他にも均等の幅を取りたいだけなら囲ってあと余白つければできるということも素敵だと思いました。**

実際に使う場合はある程度Viewの大きさを設定したりする必要がありますが、これができるというだけでとっても幸せになると思いました。:shamrock:

ちなみにこの場合だとなりませんが、セルなどでStackView内のラベルがあるバージョンとないバージョンだと、どっちなの的な感じにずらっとログが出されます。その時は、hiddenを調整しているコントレインの縦幅と横幅で設定をしていたら、縦幅と横幅の以下のアートリビュートを開き、
<img width="255" alt="スクリーンショット 2017-08-24 21.24.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/8dc2e550-6953-a83c-41aa-2d17b5053f2c.png">

のPriorityを999にすれば無くなります！！:shamrock: