【Xcode】スプラッシュ画面(LaunchScreen)で画像が表示されない・画面が真っ黒になる事象の解消【iOS・Swift】
Xcode で iOSアプリ開発をしている際に、スプラッシュ画面が真っ黒になる事象が発生しました。
事象は以下のような感じで、アプリ起動直後に真っ黒な画面が表示されています。
スプラッシュ画面は、Xcodeプロジェクトを作成すると自動生成される LaunchScreen.storyboard を編集して作成していました。
以下のような感じで、LaunchScreen.storyboard に ImageView を配置しています。
ImageView には紫のグラデーション画像を置いていますが、ビルドして動作確認するとこれが表示されていません。
原因がわからず困っていましたが、色々と調べて試行錯誤している内に、私の環境では何とか解決することができました。
本記事では私が事象解決に際して実施した方法を記載しています。
画像の容量を落とす
iOSアプリの理想的なスプラッシュ画面は、アプリをタップした直後、起動した瞬間にすでに表示されるような挙動をしていると思います。一般的な企業がリリースしているアプリ(言い方を変えればちゃんとしたアプリ)も、おそらくそのような挙動をしているはずです。
スプラッシュ画面で使用しているリソースサイズが大きすぎると読み込みに時間がかかってしまい、アプリ起動のタイミングでスプラッシュ画面の読み込みが完了していない可能性があります。
私が使用していた画像リソースは、サイズが 4000 × 8000 で、容量158 KBでした。
これを 600 × 1200 程度までサイズを小さくしました(22KB)。
なお、Mac で画像サイズを小さくするには、標準で入っているプレビューアプリを使うだけで可能です。
方法については以下のサイトが分かりやすいです。
画像リソースをAssets.xcassetsの外におく
スプラッシュ画面で表示する画像リソースのみ、Assets.xcassetsの外に取り込みました。
どうやら、アプリが起動してからAssets.xcassetsに含まれるリソースがロードされるまでに、ある程度時間がかかるようです。
プロジェクトフォルダに画像リソースを直置きすることで、ロードが優先的に行われる可能性があります。
この考えは以下スタックオーバーフローの回答を参考にさせていただきました。
https://stackoverflow.com/a/32751777
↑上のセクションで取り込んだ画像の名前を変える
どうしてこれでうまくいくのかは分かりませんが・・・(Xcodeのキャッシュ周りが絡んでいるのかもしれません)
本記事では、「splash_background.png」から「splash_background_new.png」という名前に変更しました。
解決後のスプラッシュ表示
上の3つを実施した後、以下のようにちゃんとスプラッシュ画面が表示されるようになりました。