XcodeのIBで画面サイズ毎に制約を追加する

エンジニアの渡邉です。 今回はXcodeのInterface Builder(以下IB)で画面サイズ毎に制約を…

エンジニアの渡邉です。

今回はXcodeのInterface Builder(以下IB)で画面サイズ毎に制約を追加する方法を紹介します。
IBで画面サイズ毎に制約を追加できるのは知っていたのですが、イマイチ方法がわからず、
なかなか思うようなレイアウトにならないことがあったので、改めて調べてみたのでブログに記載します。

プロジェクトを作成して、Main.storyboardのViewControllerに画像をおきます。
今回はこの画像を
iPhone7(wC hR)の時は中央左に表示し、
iPad Pro9.7inch(wR hR)の時は中央右に表示します。

まずは、ViewControllerのサイズはiPhone7(wC hR)のままで
共通の制約である、画像の縦横比とサイズ、中央の制約だけ追加しました。

まずはiPhone7(wC hR)から制約を追加していきます。
画面左に0の制約を追加します。

Utility Areaの制約部分をダブルクリックで以下の画面が開きます。

Installedの左にある+ボタンをクリックすると
popoverが開くので、Width:Compact Height:Regularにし、「Add Variation」をクリックします。

元々のチェックを外し、wC hRのチェックのみを残します。

これでiPhone7(wC hR)の制約追加は終了です。

続いてiPad Pro9.7inch(wR hR)の制約を追加します。
ViewをiPad Pro9.7inch(wR hR)に変更します。
制約が共通で設定した3つのみになっています。

先ほどと同じ手順でWidth:Regular Height:Regularの場合に右寄りの制約を追加します。

両端末でビルドして見ます。
まずはiPhone7から

中央左に表示されています。

続いてiPad Pro(9.7inch)

中央右に表示されています。

無事に画面サイズ毎に制約を追加することができました。
各viewサイズ毎に部品の位置が異なる場合や、マージンが異なる場合に
コードを書かなくてもIBで出し分けできるので積極的に使っていきたいです。