【Xcode 】LaunchScreenで起動画面の画像を設定する

【Xcode 】LaunchScreenで起動画面の画像を設定する

どうもふっさんです。

今回はLaunchScreen.storyboardを使って、起動画面に画像を設定する方法を書いていきたいと思います。

 

LaunchScreen.storyboardで起動画面の画像を設定

UIImageViewを設定する

まずはXcodeのプロジェクトを作成し、作られたLaunchScreen.storyboardを開きます。

xcodeで起動画面を設定するLaunchScreenの画面

 

次に左下にあるUIKit一覧からimageViewを引っ張ってきます。

launchscreenにimageviewを設定

 

LaunchScreenにimageViewを設定

そしてimageViewを画面全体に設定してあげます。

launchscreenの画面全体にimageViewを設定する

これでimageViewの設定ができましたが、画面サイズの違うデバイスで実行すると画像がズレてしまうので、それを防ぐために下の設定をしていきます。

 

imageViewをクリックして、右上にある定規のようなアイコンをクリックします。

すると、下のような画面が開きます。

imageViewの画像サイズの設定

設定するのはこの部分。

imageViewの画像サイズの設定を詳細に行う画面

赤色の棒が二つ有効になっていると思いますが、これを全部有効にしてあげます。

imageViewの画像サイズの設定を行った後の画面

 

これでLaunchScreenによる起動画面の画像の設定が完了しました!

画像を用意する

左のフォルダ一覧からAssets.xcassetsを選択して、新しいimage setを作成します。

新しいimage setの作成

image set作成後の画面

そして作成したimage setに画像をドラッグ&ドロップしてあげると下のようになります。

image setに画像を設定

今回はふっさんの自作アプリ「Days」で使った起動画面用の画像を使用しました。

1xの画像サイズは640 × 1136のサイズで、2xが2倍(1280 × 2272)、3xが3倍(1920 × 3408)にした画像になります。

本当は画面サイズ毎に画像を用意すべきですが、自動で画像サイズが変わるようなので、この3枚で設定しています。

 

LaunchScreen.storyboardに戻って、image setを設定

LaunchScreen.storyboardに戻って、imageViewをクリックします。

右上にある左から四番目のアイコンをクリックすると、下のような設定画面が開きます。

LaunchScreenにimage setを設定

この欄の一番上にある「image View」の中にあるimage欄を、先ほど作ったimage setである「image」を設定します。

すると、設定とともに画像が表示されます。

LaunchScreenに画像を設定

 

これで起動してみると、設定した画像が開かれると思います!

以上でLaunchScreen.storyboardによる起動画面の画像設定が完了です!

 

まとめ

ちゃんと起動画面に画像が表示されたかな?

何かしらの不具合なり、画像がズレたなどあったらコメントの方に書いてもらえるとありがたいです。

今の所ふっさんはこのやり方で画像がズレたことはないので、ぜひ試して見てください〜!

 

iPhoneアプリ開発Tipsカテゴリの最新記事