iOSアプリ開発メモ No.17 -異なる画面サイズでも同じレイアウトにしたかった-

今までiPhone8のレイアウトでそれっぽく作ってきたけど、他の機種で確認するとレイアウトがガタガタになってしまう…。 （iPadだと右上に寄っていて、iPhoneSEだと画面外にラナウェイする） 調べるとAuto LayoutやらSize ClassやらConstraintsやら、様々な情報が濁流(悪い意味で)となって押し寄せる。

一体どうすりゃいいんだと奔走。

調べてみた

Auto Layoutのチェック

まず一番目にする単語がAuto Layout。 いろいろなページをつまみ食いしてみると、なんとなく「Autolayoutにチェックすれば解決」みたいな印象を受けた。 MainStoryboardからView Controllerを選択して、File Inspectorを開くと出て来る「Use Auto Layout」にチェック。

いや、そもそもチェック入ってるし。 解決に至らず。

Constraintsの設定

次に目にするのがConstraints。 Constraintsというのは制約という意味らしく、「Viewに対する各パーツの位置」を決定するものだとか。 なんだか素晴らしいものに思えたので早速パーツを選択して、右下の「Add New Constrains」から制約を追加してみる。 追加の目安は「パーツを囲む赤い線がなくなる」ことで、それまで必要なConstraintsさんを追加する必要がある。

それっぽくやってSEのレイアウトを確認しても結局ガタガタに。

(どうしてそうなった…) しかもConflicting Constrains(制約が競合しちゃってるよ！)というエラーも出てくる始末。

Resolve Auto Layout Issuesという救世主

途方に暮れてたら右下にResolve Auto Layout Issuesという魅惑的なボタンを発見。 適当にポチポチしてReset to Suggested Constraintsというボタンを押したら、

iPhoneSEでもしっかりとしたレイアウトになった。 ちなみにAdd Missing ConstraintsをすることをXcodeからおすすめされて実行してもキレイにならなかった。 (きれいになってもどこにどの制約があるかわからなくなるから、あまり推奨されないらしい)

ちょっとAuto Layoutについて勉強する必要がありそうだ…。