目的

iPhoneとiPadでレイアウトを変更したい場合の対応メモ

StoryBoardでもプログラムでも設定できるようだが、今回はStoryBoardのみでの設定の記事となります。
プログラムの場合UITraitCollectionを使うよう。

環境

  • Xcode Version 12.5
  • Swift 5

参照サイト

UITraitCollection
Apple Developer Adaptivity and Layout

レイアウトを変更したいとは!?

対応の前に、標準的な設定として、以下のようにLabelを簡易的に設定した。

アプリを実行すると以下のようになる。
iPad縦

iPad横

iPhone縦

iPhone横

どのレイアウトでもらべるが画面の上部に来る。

この記事の目的としては、
このLabelを端末の機種や向きによって、表示場所・レイアウトを変えたいというもの

例えばiPadだとらべるは画面の上部にあるけど、iPhoneだとらべるは画面の中央にしたいとか。

対応メモ

Size Classesについて

端末機種や向きによってオブジェクトの位置を変えるには、Size Classes設定というものを使う。
機種や向きに違いを4つにカテゴライズするというもの

例えばiPadの多くの種類だと、
縦向き・横向きRegular width, regular heightとなっている。

iPhone12 Pro Macだと
縦向きだとCompact width, regular height
横向きだとRegular width, compact height

iPhone Xだと
縦向きだとCompact width, regular height
横向きだとCompact width, compact height

と、widthと heightをcomapctregularで種類分けしている。

StoryBoardでの設定

StoryBoardで設定するには、まず、以下の画面の枠の端末名部分をクリックする。

すると設定項目が展開される。

項目に端末のシルエットがいくつか表示されているので、選択するとその端末のSize Classes設定が確認できる。
以下のような端末シルエットをクリックすると、
どうやらkPhone 12 Pro Maxのようで、
機種名の横にSize Classes設定*(wC hR) : Compact width, regular heightと同義*が確認できる。

別のシルエットで横向きを選択した。
iPad Proのようで、wR hRと表示された。あとStoryBoardの表示も対応サイズに見た目が変わる。

オブジェクトの設置

ということで、実際にLabelオブジェクトを設置してみる。

具体的な要望としては、

要望
iPadの場合は、縦横どちらでもLabelは画面下部に設置したい。
iPhoneの縦の場合は、Labelは画面上部に設置したい。
iPhoneの横の場合は、Labelは画面中央付近に設置したい。
という要望だとします。

設定方法は2種類あると思われます。

  • 画面下の「Vary for Traits」よりモードONの状態でLabelを設置し、Constraintsを設定する。
  • 先にLabelを設置し、その後ConstraintsよりSize Classesの設定を行う。

それで、今回はより便利に感じた2つ目の

  • 先にLabelを設置し、その後ConstraintsよりSize Classesの設定を行う。
    上記の設定方法だけメモしていきたいと思います。

まずiPadのどの機種でもどの向きでもよいので、シルエットを選択して、Labelを設置。
次にLabelのConstraints設定をします。
今回は機種や向き毎に高さだけ変わるので
Horizontalはcenterに。
Verticalの高さのを変えていくので、高さのConstraintsを選択。

Constraints設定の以下の画像の+ボタンをクリックします。
StoryBoardで表示されているSizeClassesの設定がデフォルトで行われているので、そのままAdd Variationボタンをクリック。

再度、高さのConstraintsを選択すると、wR hRの項目が追加されているので、その上のInstalledはチェックを外し、wR hRの項目だけチェックの状態とします。

次にwC hR:具体的にはiPhone 12 Pro Maxなどの縦の設定です。 シルエットを選択すると、StoryBoardの表示が変わります。
Labelはすでにあるので、それを所定の位置に移動して、Constraintsを設定後、Add Variation`します。

次にwR hCwC hCも同じように。
wR hCはiPhone 12 Pro Max横で設定。
wC hCはiPhone 4S横で設定しました。 Labelの高さを中央付近に設定。


上記具体的な機種名を出しましたが、wR hCとなっていれば、どの機種でも同じ設定となると思います。
また、wR hCwC hCは同じ高さで設定したので、Constraints設定で選択項目を変更してもよいです。わざわざStoryBoardで機種を選択する必要ないと思います。

最終的にLabelのConstraintsは以下の様になりました。
StoryBoardで表示されていない端末の設定は非選択状態となっています。

これでやっと設定は完了です。

挙動

iPadとiPhone 12 Pro Maxの挙動は以下のようになりました。
自分の想定の挙動です。
iPhoneのほうが少し分かりづらいですが、labelの高さが変わっています。


所感

ちょっとソースは不明ですが、Appleは縦向き・横向きでも同じUIのほうがユーザビリティが良い。そうするべきみたいな記事を見た気がして。
申請時にイチャモンつけられるかもしれませんが、上記のように設定できるしそれはないか。。

↑蛇足情報ですけども

作業としては、上記見てもわかるように、1つのオブジェクトなのに設定項目が多いですね。
オブジェクトの種類や向きの分設定する必要があるからですね。
確認する項目が多く、漏れが発生しやすい作業で大変だと思いました。

以上です。