10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

iOS16時代のLaunch ScreenとInfo.plistとSwiftUI

Last updated at Posted at 2022-10-07

はじめに

「部屋とYシャツと私」みたいなタイトルになりましたが、
SwiftUIのみでアプリ開発する時に便利な、Info.plistでLaunch Screenを設定する方法について記載します。
本当はiOS14時代から設定できるようになっていましたが、Xcode14で試してみると他の方の記事の内容と差異があったので、最新手順や調査結果、所感なども記載します。

まとめ

  • 今時のLaunch Screenはカスタマイズして作るものではなくなりました。
    Info.plistでLaunch Screenを設定するのであれば、
    • デフォルト設定のままで良い。(systemBackground背景色のみ)
    • 設定したとしても背景色のみで十分。
  • iOS16でアップル純正のプリインストールアプリをいくつか調査しましたが、特別なLaunch Screenは設定されておらず、デフォルト設定となっているようです。

理由

(黄色い背景がLaunch Screen)
timeline.png

ユーザーにしっかりとメッセージを訴求するのが難しいので、手間をかけてLaunch Screenを作るモチベーションが低い。

  • 0.5秒程度しか表示されない。
  • 画面中央に固定サイズのアイコンを表示する程度しかできない。
    • LaunchScreen.storyboardでは可能だった以下の事ができません。
      • 画面解像度に合わせてレイアウトを調整する。
        • 特に画像サイズの調整。
      • iPhone / iPadで表示を変える。
      • Portrait / Landscapeで表示を変える。
      • 初期化処理が終了するまでLaunch Screen表示を継続する。1
project_name_App.swift
@main
struct project_name_App: App {
    var body: some Scene {
        WindowGroup {      // Launch Screenには手間をかけない。
            ContentView()  // ここ以降の表現をもっと考えた方が良い。
        }
    }
}

設定方法

事前準備

プロジェクトの作成

Xcode 14にて上記設定でプロジェクトを作成します。

画像の設定

画像データを用意します。サイズは320x320ポイント以下にしておきます。(説明は後ほど)

AssetsImage Setを作成して、名前を設定します。(今回はLaunchImageに設定)
SS2022-10-06 13.18.57.png
今回は作業を簡略化するために以下の設定にしました。

  • Scales = Single Scale (@2x, @3x画像を使用しない)
  • Appearances = None (Dark Mode用画像を使用しない)

背景色の設定

AssetsColor Setを作成して、名前を設定します。(今回はSystemYellowに設定)
Color > Contentに色を設定します。(今回はsystemYellowColorに設定)
SS2022-10-06 13.34.34.png

Info.plistの設定

Info.plistの場所

Xcode13以降、新規プロジェクトでInfo.plistが生成されなくなりました。
TARGETS > Info > Custom iOS Target PropertiesこれがInfo.plist相当です。
aaaaaa.png

UILaunchScreenの削除

Launch Screenを開くと、その下にUILaunchScreenが設定されていますが、これを削除します。
SS0001.png

Image Nameの設定

Launch Screenの(+)ボタンを押します。
202022-10-05_14.04.58-2.png
メニューが出てくるのでImage Nameを選択します。
202022-10-05_14.05.51.png
「画像の設定」で作成した「LaunchImage」をValueに設定します。
2022-10-06_11.02.25.png

Background colorの設定

Image Nameの下にBackground colorを追加して、「背景色の設定」で作成した「SystemYellow」をValueに設定します。
2022-10-05 21.07.42.png

完成

ビルドして実行すればLaunch Screenが表示されるはずです。

Tips

Launch ScreenはOSにキャッシュされますので、開発中にLauncn Screenを変更したら端末を再起動することをお薦めします。(SimulatorはDevice > Restart)
何もしないと、古いLaunch Screenが表示されてしまい、しばらく悩むことになります。:fearful:

解説

画像サイズ

画像サイズは、(幅 x 高さ):320 x 320 ポイント以下にすることをお薦めします。
(理由は下記参照)

実験

以下の画像を用意しました。
iPhone 14 Proで画面いっぱいに表示されるサイズです。

結果

機種 キャプチャー 解像度(ポイント)
iPhone SE (1st) 320 x 568
iPhone 14 Pro Max 428 x 926
  • 端末の画面サイズに合わせて画像をリサイズしてくれることはなく、そのままのサイズで表示される。
  • 表示位置は画面中央になる。
  • よって、画像サイズが不適切な場合
    • 画面が小さい端末:画像の中央部分しか表示されない。
    • 画面が大きい端末:画像の周囲に隙間ができる。

考察

  • 画像サイズは、現状で画面が一番小さいiPhone SE (1st)の画面幅(320ポイント)に合わせておけば、画像表示が欠ける心配をしなくて済みます。
  • 端末の回転も考慮すると、幅と高さを同じにしておけば良いと思います。
  • かつてのLaunchImageのように画像を全画面表示することは諦めて、アイコンとして表示することを考えた方が良いと思います。

画像の回転

Deployment Info > Orientationを設定してあれば、端末の向きに応じて画像が回転します。

画像の複数表示

Image Nameを複数設定しようとしても、Image Nameが既に設定されている旨のアラートが表示されるので、複数の画像を表示することはできません。

Development Environment

  • Xcode 14.1 beta 3
  • iOS 16.1 beta 4 - iOS 15.0

所感 (ポエム)

  • 近年のスマホの高性能化

    • 複数のアプリを起動したままにしておいても十分なメモリ量が搭載されるようになった。
    • よく使うアプリをApp Switcherで切り替えて使用するケースをよく見るのでLaunch Screenが露出する機会は少なくなっていると感じる。
  • アプリを起動してから操作可能になるまでの表現のトレンド

    • 今まで
      • Launch Screenのような静止状態でユーザーを待たせる。(ストレスフル:angry:)
    • これから
      • ”新たな表現”でストレスを感じさせない工夫が求められていると感じる。
        (または、起動シーケンスの改善によって一瞬でアプリが起動したように感じさせる)

      • “新たな表現”の例

        • redacted Modifier
        • アニメーション
        • フェードイン
        • サウンド再生
        • バイブレーション
  • つまり
    現状に満足せず、良いアプリを作るために改善を続けていきましょう。:muscle:

ご注意

ここに記載された内容は個人的な感想や見解ばかりであり、Apple社などの推奨や見解ではありません。

  1. LaunchScreenを表示したままにしてViewControllerを動かす

10
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?