環境

Xcode 8.3
Swift 3.0

マルチデバイスでの表示の対応って？

前回StoryboardとAutoLayoutについて簡単に記載いたしましたが、iPhoneやiPadはご存知の通り様々な端末サイズがあります。

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

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

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

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

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

（ちょっと横長になってます）

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

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

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

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

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

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

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

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

（画像ではわかりにくいですが、スクロールできます）

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

プレビュー機能

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

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

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

まとめ

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

次回は、Storyboardを使った遷移について書きます。