Swift

【Swift】アプリ起動時のスプラッシュ(ローディング)画面作成方法

こんにちは!KON(@pippi_kon)です。

スマホアプリを起動した時、アプリの起動が完了するまでの間、起動画面(ローディング画面)が表示されます。

初期状態だと真っ白な画面が表示されますが、設定によってはオリジナルの画面を表示することができます。

Twitterを起動した時に表示される鳥のマークや、LINEを起動したときに出る吹き出しのマークなんかがそうですね。

そこで今回は、iPhoneアプリを開いた時に最初に表示される起動画面(スプラッシュ画面と言います)の設定方法についてご紹介します。

バージョン情報

この記事は以下のバージョンで記載しています。

Xcode:9.2

Swift:4.0.3(Swift4)

この記事をおすすめしたい人
  • スプラッシュ画面を設定したい方

スプラッシュ画面とは

スプラッシュ画面とは、iPhoneアプリを開いたときに一番最初に表示される起動画面のことです。

だいたいは、製作会社のロゴマークとか、アプリのアイコンなどが表示されます。

スプラッシュ画面はアプリを起動するたびに毎回表示されてユーザーの目に入るので、iOSアプリを作るにあたって非常に大切な要素です。

スプラッシュ画面を使って、自身やアプリのイメージを印象付けることができます。

 

初期状態のスプラッシュ画面

初期状態のスプラッシュ画面には何も設定されていません。



アプリを起動するとこのように真っ白な画面が表示されます。

 


スプラッシュ画面の設定方法

スプラッシュ画面を設定するためには、Xcode画面の「LaunchScreen.storyboard」を編集します。

初期状態では以下のように何も設定されていません。



繰り返しになりますが、「LaunchScreen.storyboard」を編集するだけでOKです。

他にプログラムコードを組み込んだり、他の設定をいじったりする必要はありません!

今回は「LaunchScreen.storyboard」にLabelを配置してみます。



「起動画面」というラベルを配置してみました。

この真っ白な背景に黒文字で「起動画面」と書かれた画面が、アプリ起動時に表示されます。

 

シミュレータで確認

作成したスプラッシュ画面をシミュレータで確認してみましょう。



初期状態では真っ白だった起動画面に、先ほど設定したLabel「起動画面」が表示されました!

今回はラベルを配置しましたが、代わりにイメージを配置することでTwitterやLINEのような起動画面を作ることができます。

 


最後に

いかがだったでしょうか?

今回は、iPhoneアプリを開いた時に最初に表示される起動画面(スプラッシュ画面)の設定方法についてご紹介しました。

スプラッシュ画面はiOSアプリを作るにあたって非常に大切な要素となります。

自分だけのオリジナルなスプラッシュ画面を作成して、自身やアプリのアピールを行いましょう!