[Xcode]UIViewが画面の大きさによってずれてしまう時の対処法

2021-02-21

XcodeでUIViewを使ってみたもののデバイスのサイズが違ってくると空きスペースが出来てしまう・・・という場合の対処方法について紹介します。

UIViewがずれてしまうケース

Appleが発売しているiPhoneですが、様々なケースがありますよね。

XcodeではiPhone6やiPhoneXなど様々なデバイスをシミューレータで確認できるので、デバイスごとの「ズレ」というものが生じる場合があります。

iPhone4Sをベースにストリーボードでデザインすると、シミュレーターをiPhone8に切り替えた場合デザイン崩れが生じていますね。(これは極端な例ですが)

ここでやりたいことは、デバイスの大きさが変わろうがiPhoneを横向きにしようがViewが画面全体にぴちっと収まっていることを実現したいわけです。

では、そのためには何をすれば良いのでしょうか？

XcodeにはAutoLayoutという機能が備わっており上記のような問題を解決してくれます。

さっそく使い方を見ていきましょう。今回はViewをどのデバイスサイズでも同じように画面いっぱいに表示することを目的とします。

画像で紹介しますが、画面右下のAdd New Constarinsをクリックしそれぞれのレギュレーションを追加していきます。

今回は縦横ともに0px、つまり画面に隙間なくViewが収まっている状態のConstrains(制約)を追加しました。

数値でpxの指定を、|-|のような箇所をクリックすることでその制約を追加することができます。

今回は4つのConstarins(制約)を追加したので、最下部に「Add 4 Constarins」と表示されているのでクリックで追加します。

追加すると、画面のように4つの制約が追加されたのが確認できます。

いかがでしたでしょうか？今回、UIViewが画面の大きさによってずれてしまう時の対処法を紹介しました。

AutoLayoutを使うことで簡単にレスポンシブなデザインを実装することができます。