SwiftUIの基本を身につけたい方はこちら

【SwiftUI】起動画面の画像が引き伸ばされる件について(Storyboardを使ってLaunch Screenを実装する方法)

事象

SwiftUIは、デフォルトで起動画面を装飾するファイルなどなく、Info.plistで起動画面を作成しなければなりません。Info.plistで行うため、画像のサイズや位置を決めることができません。

【SwiftUI】Info.plistを使ってLaunchScreenを実装する方法

で、今回起きた事象としては、画像がこのように引き伸ばされてしまいます。

対応方法

対応方法としては、2パターンあります。Single Scaleに変えて画像のサイズを微調整するか、Storyboardを使うかです。

自分は、どちらかというと、Storyboardを使う方をオススメします。

パターン1:Single Scaleにする

STEP.1
Single Scaleに変更

①画像を選択
Show (Show The Attributes inspector)をクリック
③ScalesをSingle Scaleに変更

STEP.2
キャッシュクリア

シミュレーターの中のアプリを削除し、シミュレーターを再起動してください。さらにXcodeで、クリーンビルドしておいた方が良いと思います。

これでも変わらない場合は、今まで使ったことない端末で実行してみてください。なぜか、キャッシュが残ってしまって、うまく反映されません。。

 

これで、このようになるはずです。

あとは元々の画像で大きさを変えてください。

でも結局小さい端末では、大きい画像で表示されちゃいますね。。

 

パターン2:Storyboardで行う方法

今回の対応で言うと、こちらの方がオススメです。

STEP.1
ファイル追加

Storyboardを追加します。

command + nで新規ファイルウィンドウを表示する
①Storyboardを選択
②Nextをクリック

STEP.2
名前をつける

LaunchScreen.storyboardと入力
②Createをクリック

STEP.3
画像を配置

普通に画像を配置して、AutoLayoutをつけてください。

STEP.4
Is Initial View Controller

①ボードの上のバーをクリック
Show (Show The Attributes inspector)をクリック
③Is Initial View ControllerをONにする

STEP.5
Info.plistに設定

①プロジェクトを選択
②TERGETSを選択
③Infoを選択
④元からあるLaunch Screenを削除する
⑤以下のプロパティを追加する。

key type value
Launch screen interface file base name String LaunchScreen

これでいい感じになりました!

結局SwitUIでStoryboardを使う羽目になってしまいました。。。

評価