はじめてのSwiftアプリ制作5: StoryboardとAuto Layoutその2

今回は、Storyboardを使ってパーツを配置していく前にUIScrollViewを使った簡単ないマルチデバイスでの表示を対応する方法を書きます。

前回
[はじめてのSwiftアプリ制作4: StoryboardとAuto Layoutその1](http://qiita.com/tsubamechi/items/f8fe9e01395734e286e6)

## 環境
Xcode 8.3
Swift 3.0

## マルチデバイスでの表示の対応って？
[前回](http://qiita.com/tsubamechi/items/f8fe9e01395734e286e6)StoryboardとAutoLayoutについて簡単に記載いたしましたが、iPhoneやiPadはご存知の通り様々な端末サイズがあります。

そのため、親ビューからの上下左右の制約をつけてしまうと端末の大きさの問題で想定していたサイズで表示されないケースがあります。

以下の例で確認してみます。

（例）Viewの中に 300x600 の縦長の画像を入れて、Viewからの上下左右の空白分の制約をつける

<img width="331" alt="3.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/5f8906b2-36ba-fe2a-3655-f886acb71f87.png">

この場合、十分な端末サイズであるiPhone7で表示確認した場合正常な表示になりますが・・・

<img width="400" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/e981e7d4-4f16-1216-e9d5-98029f0f020b.png">

iPhone4sで表示確認した場合には、端末サイズが足りないため画像の大きさが変化してしまいます。

<img width="349" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/f82f6951-1ac3-41c9-638c-b136e06d5329.png">
（ちょっと横長になってます）

特に文字が入ってる画像やビューですと、文字が潰れてしまって読みにくくなってしまうこともありますのでこの表示は避けたいです。
そこで使用するのがUIScrollViewです。

ViewControllerの親ビューにUIScrollViewを追加します。

<img width="259" alt="5.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/9858c115-af68-918e-f759-01d7ce6b7dd6.png">

そして、ビューにたいして上下左右0の制約をつけて同じ大きさとしましょう。

<img width="773" alt="6.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/46797c60-b629-0960-56c3-9fbb11906450.png">

次に、ScrollViewの下にViewを追加しておきます。

<img width="259" alt="7.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/e2dfcd09-1b74-087f-6509-1cd89be1619f.png">

今度はScrollViewに対して上下左右0の制約をつけましょう。

<img width="673" alt="8.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/82106102-649a-e17a-42fa-9739e4acdc52.png">

今度はScrollViewに対しての制約のため制約が足りないと怒られてしまいます。
追加で高さ・幅をScrollViewと同じ大きさと定義しましょう。

<img width="445" alt="9.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/937096d5-2d83-5e5f-7a82-d071dea7b328.png">

さらに、同じ高さ・同じ幅という制約に対してPriorityという値を下げます。（デフォルトは1000）これは制約の優先度で、これを下げておくとこのViewの下で与えられた制約の優先度が上がるようになります。（これを行わないとView=ScrollViewという制約がこのViewの下で設定する上下左右の制約より優先度が高くなってしまい、結局表示は前の状態のままになります）

<img width="259" alt="10.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/615c2697-8c7d-2869-a2b9-a79f4a35a8a0.png">

最後に、このViewの下で先ほどと同様300x600の画像を追加し上下左右に制約をつけてみます。
そして、iPhone4sでの表示を確認すると・・・

<img width="694" alt="11.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/c52b12b2-b477-75bb-1d4a-2759497d5d9b.png">
（画像ではわかりにくいですが、スクロールできます）

300x600の画像サイズが保たれたまま高さが足りない部分はスクロールがされるようになりました。

## プレビュー機能
上記のUIScrollViewと制約の優先度は考慮してくれないようですが、通常の表示をした際のプレビュー機能を一覧で見ることができます。

[はじめてのSwiftアプリ制作2: Xcodeの機能](http://qiita.com/tsubamechi/items/ff3f2ce5cda751fa4dc3)でご紹介した右上のわっか印をクリックして、その中の選択されているファイルの横に「Automatic」となっていると思いますのでそれを「Preview」に変更すると以下のような画面で表示することができます。

<img width="1280" alt="12.png" src="https://qiita-image-store.s3.amazonaws.com/0/189662/8f68b44f-6406-d2c5-ca78-477c426c428d.png">

とりあえず表示崩れが起きうるかどうかということを確認したいのでしたら、こちらの機能を使って確かめるのが楽です。

## まとめ
* 親ビューからの上下左右の制約をつけた場合、端末のサイズによっては画像の表示サイズが変わってしまう。
* StoryboardでViewControllerを作った際にはUIScrollViewを追加して置くとマルチデバイス対応をある程度カバーできる。
* 上下左右の制約を追加しないケースでも特に弊害はないため、やり得。
* プレビュー機能を有効活用して、マルチデバイス対応が必要かどうか判断しよう。
 
次回は、Storyboardを使った遷移について書きます。