Androidはワンツーパンチ 三歩進んで二歩下がる

プログラミングやどうでもいい話

【Xcode12,iOS14】info.plistを使って起動時の画面(Launch Screen)を作成すると画像が画面いっぱいに拡大されてしまう現象のメモ

アプリ起動時に表示される画面を実装している時に問題が発生したので、メモを書いておきます。
情報は2021/04/17時点のものです。

起こった問題

info.plistを使って起動時の画面(Launch Screen)を作成すると画像が画面いっぱいに拡大されてしまったり画像が表示されない現象が発生した

info.plistを使った起動時の画面(Launch Screen)とは

画像名や背景色や表示オプションをキーと値のセットでinfo.plistに追加すると、アプリ起動時の画面(Launch Screen)を自動的にレイアウトして表示してくれる機能。
Xcode12iOS14以上で使えるようになった。

参考サイト

2021/04/17時点の公式ドキュメント。もっと詳しく説明されているドキュメントは発見出来ませんでした。
Apple Developer Documentation
https://developer.apple.com/documentation/bundleresources/information_property_list/uilaunchscreen

WWDC20のビデオでも触れられています。
What's new in SwiftUI - WWDC 2020 - Videos - Apple Developer
https://developer.apple.com/videos/play/wwdc2020/10041/?time=436

この機会にデザインガイドラインも読みました。
(スプラッシュ画面のようにデザインしてはいけないなどと書いてあり、今まではぼんやりと起動時にトップの画面の表示前に表示される画面はスプラッシュ画面というものだと思っていたのですが、Appleではスプラッシュ画面とLaunch Screenは厳しく区別しているのだと知りました)
Launch Screen - Visual Design - iOS - Human Interface Guidelines - Apple Developer
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen

公式以外で参考にしたサイトは以下のとおりです。作者様方に深く感謝しております。記事のコメント内で画像の拡大に触れられているものもあります。

Launch Screens and the SwiftUI App Life Cycle on iOS 14 - Daniel Bernal
https://danielbernal.co/creating-a-launch-screen-with-swift-ui/

Launch screens in Xcode: All the options explained - SwiftLee
https://www.avanderlee.com/xcode/launch-screen/

【Xcode12】Info.plist で Launch Screen を構成しよう – ギャップロ
https://gaprot.jp/2020/11/24/launch-screen-plist/

How to Build a Launch Screen With SwiftUI | by Kristaps Grinbergs | Better Programming
https://betterprogramming.pub/launch-screen-with-swiftui-bd2958771f3b

以下は画像が拡大してしまう件に触れているサイト様です

(Stretched) Launch Screen Images in SwiftUI: The fix - Daniel Bernal
https://danielbernal.co/stretched-launch-screen-images-in-swiftui-the-fix/

Launch screen image built with Info.plist stretched? : SwiftUI
https://www.reddit.com/r/SwiftUI/comments/iay8js/launch_screen_image_built_with_infoplist_stretched/

Setting launch screen image through info.plist - image stretches to cover full screen | Apple Developer Forums
https://developer.apple.com/forums/thread/671370

問題が発生した時点の開発環境

  • Xcode Version 12.4 (12D4e)
  • 問題が発生したプロジェクトのiOS Deployment Target 14.1
  • テスト用シミュレータ iPhone12 version14.4
  • テスト用実機 iPhone7 14.4.2

起こった問題の詳しい経緯

Launch Screens and the SwiftUI App Life Cycle on iOS 14 - Daniel Bernal
https://danielbernal.co/creating-a-launch-screen-with-swift-ui/
こちらのサイトを見てサンプルプロジェクトを作成し、シミュレータで実行すると指定した背景色と画像が表示されて思い通りの結果を得られました。
次の3つのプロパティを指定しました。
1. 背景色の名前
2. 画像の名前
3. Image respects safe area insetsというキーをNO(デフォルト)にした

期待通りに表示された実際の画面はこんな感じです。

f:id:sakura_bird1:20210418021437p:plain:w250
LaunchScreen1

しかし作成中の別のプロジェクトで上記の手順を再現してみるとシミュレータで実行した場合、Image Nameに指定した画像が拡大されて表示されてしまいました。
指定したプロパティはサンプルプロジェクトと同じです。

画像が拡大されてしまった画面はこんな感じです。

f:id:sakura_bird1:20210418021706p:plain:w250
LaunchScreen2

このプロジェクトは1年以上前に作ったプロジェクトで、その時点のデフォルト設定によりプロパティリストのLaunch screen interface file base nameというキーの値がLaunchScreenとなっていましたが、今回の修正でこのキーを削除しました。

実機(iPhone7)で実行した場合は初回のインストール時は画像が拡大されず期待したように表示されました。
しかし画像を変更して再インストールすると背景色は期待通りですが画像が表示されない現象が発生しました。

画像はpng形式にしました。
拡大表示されたことでpdf形式に変更して試してみましたが、うまく表示出来ない現象は変わりありませんでした。
またImage respects safe area insetsYESにしたりNOにしたりしても現象は変わりありませんでした。

何度か試行錯誤した結果、

  • Launch Screensの項目を変更してからアプリを上書きインストールした場合
  • アプリをアンインストール後に再インストールした場合

に発生するように思いました。
ですが、試行錯誤が足りないだろうし参考サイトのコメント欄などを読むとよくわからないタイミングで発生するような感じなのではっきりしたことは言えません。

参考サイトの情報を参考に、
シミュレータ/実機からアプリ削除→シミュレータ/実機をリスタート→実行した場合は今の所全て期待通りに動きました。
アプリアンインストールだけではだめで、端末再起動が必要なようです。

解決方法

現時点ではStoryBoardを使って起動時の画面を作成することにします。

ネットで検索した情報では原因や確実な対処方法ははっきりしませんでした。
シミュレータ/実機からアプリ削除→シミュレータ/実機をリスタートというのも毎度やっていられないし、開発の間があくと次回の発生時には忘れてしまいそうです。
これ以上は深堀りしないでStoryBoardを使うことにしました。

info.plistに書くだけで起動画面が出来るなんてシンプルで素晴らしいと喜んだのですが、今しばらくは様子見します。

以上です。