0
1

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 3 years have passed since last update.

iOSアプリのスプラッシュ画面の作成と設定(注:Xcodeでクラッシュ発生)

Last updated at Posted at 2020-11-21

この記事は、iOSアプリ開発から公開までの流れ の第7章です。

- 注意 -
Xcodeがクラッシュする現象を確認しています。
(2020/11/21)
クラッシュ時のコメントに以下を添えて Apple 社に提示済み。
修正または回避手順が確認できれば記事を更新します。
(2020/12/14 追記)
Life Cycle を変更すると回避できました。
Xcodeプロジェクトの作成 の手順3.の設定画面で Life Cycle 項目を SwiftUI App から UIKit App Delegate に変更すると現象は発生しなくなりました。また、後述の手順 11. 〜 16. が不要になりました。
そもそも Life Cycle が何なのかわかりませんが、回避できたのでこの設定で進めます。

再現手順は以下のとおりです。再現性があることを確認しています。私の環境では100%発生します。修正または回避策のご提示をお願いいたします。

クラッシュ手順:

  1. 以下のサイトにまとめた手順に従い設定します
    https://qiita.com/manabapp/items/1c6b8259ed9f5b8db4ad
  2. インスペクタを表示します

環境:
MacBook Air M1 256MB / macOS 11.0.1 / Xcode 12.2

本稿では、iOS アプリのスプラッシュ画面の作成および設定の手順を記載します。

スプラッシュ画面とはアプリ起動処理中に表示されるアレです。
今回は、アプリアイコンを真ん中に配置しただけのシンプルな画面を作ります。

1. Keystone を起動し、背景を塗りつぶしなしにします

サイズは、アプリアイコンの作成と設定の手順と同様に正方形サイズにします。
1.jpeg

2. オリジナル画像を挿入し、インスタントアルファを押します

フォーマット > イメージタブ > インスタントアルファボタン
2.jpeg

3. 背景をクリックして水色になったら終了
3.jpeg
4. イメージで書き出します
4.jpeg
5. PNG フォーマットを選択して次へ

透明な背景で書き出す をチェックすること。
5.jpeg

6. 任意のファイル名を入力して書き出す
6.jpeg
7. 透過画像(下の方)が出来上がり
7.jpeg
8. Assets.xcassets でフッター部分の + で Image Set を選択します
8.jpeg
9. 任意の名前を入力します

例:SplashImage
9.jpeg

10. 作成した透過画像を枠にセットします

1x, 2x, 3x の使い分けが判らないため、全部同じ画像を Drag & Drop します。
10.jpeg

11. ソースフォルダにファイルを追加します
11.jpeg

12. Launch Screen テンプレートファイルを指定して Next

12.jpeg
13. 任意のファイル名を入力して Create

私はデフォルトのままにしました。
13.jpeg

14. iPhone 画面が現れました

デフォルトでアプリ名のラベルが付いているので、私は削除します。
14.jpeg

15. General タブの Launch Screen File で追加したファイルを設定します
15.jpeg
16. 元に戻り、インスペクタで背景を変更します

右から3番目の Attributes inspector タブ > Background で System Background Color を選択します。
ダークモードで黒い背景にしたいので。
16.jpeg

17. 右上の + ボタンを押して先ほど登録した透過画像を iPhone 画面に Drag & Drop でセットします
17.jpeg
18. 画像を縦横同サイズのまま縮小して右下3番目のボタンをクリック

WidthHeight をチェックして、Add 2 Constraints をクリックします。
縦横サイズが固定化されるため、いい感じのサイズにしましょう。
小さすぎると、Pro Max な iPhone では豆粒に見えてしまいます。
あと、画像はちょうど真ん中に配置しておくこと。
18.jpeg

19. 次に、右下2番目のボタンをクリック

Horizontally in ConstrainerVartically in Constrainer をチェックして、Add 2 Constraints をクリックします。

19.jpeg
20. 下にある View as iPhone XX (wR hC) をクリック

横向き / ダークモード / 他機種でも真ん中に画像が配置されるか確認します。
20.jpeg

21. シミュレータで確認します
21.jpeg
22. 念のため、横向きダークモードでも確認します
22.jpeg

終わり。

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?