起動画像のサイズを自動で合わせる手順(LanchScreen.storyboard使用)

確実に必要になるのに毎回忘れそうなので、、
※下記手順では背景が端末毎のサイズに合うようにリサイズされる為、アスペクト比が微妙に崩れます

0.背景画像の用意
iPhone内で一番サイズが大きいiPhone6Plusに合わせたサイズで用意
⇒ 414x736(同@2x、@3x)

1.背景画像の設置
LanchScreen.storyboardのView上にimage Viewを配置(wAny hAnyに対してのみ)

ドキュメントアウトライン上で「View」と「配置したimage View」を選択し
Pinから「Eual Widths」「Equal Heights」を追加

「配置したimage View」に対して
Alignから「Horizontally in Container:0」「Vertically in Container:0」を追加

「配置したimage View」に対して
アトリビュートインスペクタ > View > Mode > 「Scale To Fill」を指定


2.ロゴやタイトル画像の設置
背景とは別にimage Viewを設置

ドキュメントアウトライン上で「View」と「配置したimage View」を選択し
Pinから「Eual Widths」or「Equal Heights」のどちらかを追加

上記で追加したConstraintに対して
アトリビュートインスペクタ > Multiplierで画面に対する比率を設定(画面半分なら0.5等)

「配置したimage View」に対して
Alignから「Horizontally in Container:xx」「Vertically in Container:yy」を追加
※配置は特に上記である必要はないですが、ロゴ等であれば中心を基点に配置した方が自然なので

「配置したimage View」に対して
アトリビュートインスペクタ > View > Mode > 「Aspect Fit」を指定

「配置したimage View」に対して
Resolve Auto Layout issuesからUpdate Framesでサイズを修正
※対応しなくても描画に問題ないですが、警告削除の為


これで背景とロゴ・タイトルの画像2枚を用意すれば各端末で違和感なく表示されるようになるはず。

背景のアスペクト比を維持したい場合は・・・
・各サイズの画像を用意
・小さい画面の場合に上下が切れる前提の画像にする
辺りなのかなぁ・・


スポンサーリンク

この記事へのコメント


この記事へのトラックバック