[Swift] SizeClassの使い方まとめ

この記事では、iOSアプリ開発に関する初心者向けの情報を共有します。
私の認識違いなどがありましたらコメントでお知らせいただけると幸いです。

# SizeClassとは
***一つのストーリーボードファイルに様々な画面サイズと方向のためのユーザーインターフェースレイアウトを設計できるようサポートするクラスです。***
<br>
サイズクラスを理解するためには、下図を参考にしてください。
<img width="750" alt="スクリーンショット 2020-05-06 21.38.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/96521e14-8ff5-39d8-524a-73571b75f498.png">
<img width="750" alt="スクリーンショット 2020-05-06 21.38.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/698e317e-31c8-6ccb-9015-879ae2cf36c0.png">


+ `Regular`はノーマルな大きさ、`Compact`は文字通り小さい大きさに理解して良いです。
+ `Portrait Orientation`(一般的な使い方である縦に立てて使用する)ではiPhoneは機種と関係なく`Regular`の高さと`Compact`の幅を持っています。
+ `Landscape Orientation`(横に倒して使用する)ではPlus、XR、Maxモデルの場合、`Compact`の高さと`Regular`の幅を持ち、その他の機種は`Compact`の高さと`Compact`の幅を持ちます。

したがって、CompactとRegularの間にそれぞれ異なる画面を作ることができます。(iPhone SE~iPhone Xの横モードでは見えなかったボタンがPlus、XR、Maxモデルの横モードでは見えるように。)

# 実習

<img width="762" alt="スクリーンショット 2020-05-06 22.56.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/12060416-4dc3-f469-d7f5-12eb11b88e6d.png">

イメージビューを水平的に中央に配置して、画面上から40pts離れた所に配置してみました。

<br>
<img width="1067" alt="スクリーンショット 2020-05-06 22.58.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/4d859341-6b6d-0d9b-1a33-a609fdd51a2b.png">

つぎは`Stackview`を利用して互いに30ptsほど離れたイメジを水平に配置することにします。

そして、今度は`Stackview`の下にボタンを一つ入れておきます。 またこのボタンは`Stackview`と一緒に`Horizontal Stackview`の中に入れてauto-layoutをしてみましょう。 
<br>
<img width="937" alt="スクリーンショット 2020-05-06 22.59.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/475c0fd4-864d-6620-7b22-316f96a4b65e.png">

まず、ボタンを一つ作って`Stackview`と先ほど作ったボタンを一緒にクリックして`Embed in`ボタンを押して`Horizontal Stackview`で包みます。 xcodeはかなりスマートなので`deal button`と`Dtackview`が互いに垂直に配置されていることが分かり、自動的に`Horizontal Stackview`で包んでくれるでしょう。 

<br>
<img width="769" alt="スクリーンショット 2020-05-06 22.59.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/4ce9b973-9d0c-7183-fe88-543e7308cf29.png">

後は、この`Vertical Stackview`にもう一度中央に位置させて、上のロゴとある程度離れるように再びconstraintsを設定しましょう。

外にある`Stackview`にconstraintsを付与すると内部の`Stackview`にあったconstraintsが全て消えました。 xcode が全て自動で処理してくれたようです。

<br>
<img width="717" alt="スクリーンショット 2020-05-06 23.00.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/8631d094-8ff4-c460-af0e-e46770bb29f7.png">

シミュレーター上からアプリを横に回転した時に正しく見えるか確認したら。。
レイアウトが壊れていました。
**この時にサイズクラスを利用するどころです。**

<br>

<img width="717" alt="スクリーンショット 2020-05-06 23.00.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/3b5454cf-87eb-df04-b827-3c7a6fcea3e4.png">

難しくありません。
変更させたい制約条件に追加事項を追加します。
今のような場合、下段のボタンと中間の`StackView`の間を縮めることでレイアウトを調整したいなら、 
 1. 該当`Stackview`の下段の制約条件をクリック
 2. `Spacing`(変更したい属性)の側にある+ボタンをクリック
 3. `Add Variation`クリック
 4. 制約条件の調整
の順に操作します。

<img width="714" alt="スクリーンショット 2020-05-06 23.00.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/046f3ba0-96ab-b8ec-9109-e1f75727519d.png">

`wChC` (width `Compact`, height `Compact`)の属性20が追加されてレイアウトが変更されました。

<br>
<img width="716" alt="スクリーンショット 2020-05-06 23.01.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/6111c0c8-1df9-a1bc-ecb4-ba7813554bd9.png">

縦モードに変更すると、既存の設定値に戻ります。

<br>
<img width="713" alt="スクリーンショット 2020-05-06 23.18.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588409/e0a8888c-41b2-b165-5715-cc0ad5d3799e.png">

機種を変更し、iPhoneSEのように画面が小さい場合でも、同じく変更できます。
(上段の画像と中間のスタックビューの間を設定するイメージ)

# まとめ

足りない点が多いですけれども、助けになればいいと思います。

参考は以下のとおりです。
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/