【SwiftUI】背景に画像を綺麗に表示するには

SwiftUI
この記事は約3分で読めます。

ひかる
ひかる

iPhoneアプリの背景を、味気のない背景色から画像に変えたいのだけど・・・

Image の使い方

SwiftUIで背景に画像(写真や壁紙画像、アイコン)を貼るためには、Image(構造体)を使います。
png、jpeg、heicなどの拡張子がサポートされています。

Image("画像名")

Image | Apple Developer(イメージを表示するビュー)

Swift
var body: some view {
  ZStack {
    Image("TitleImage")
      .resizable()
      .ignoresSafeArea()
      .scaledToFill()
    VStack {
      
    }
  }
}

背景画像は、画面の一番奥に表示することが多いと思うので、ZStack以下にコードを書くことが多そうですね。

画像はAssets.xcassetsに格納する

Imageで指定する画像は、XcodeのAssets.xcassetsに格納し呼び出します。
フォルダを作って階層で画像を指定することも可能です。

画像を奇麗に表示させるためには、Modifire(モディファイア)を使ってレイアウトを整えていく必要が出てきます。重要なモディファイアを下記にまとめてみました。

Imageのモディファイア

今回利用した背景画像です。
元画像の大きさは2516✖️1887です。iPhone14Proは2556✖️1179ピクセル解像度。

用意した画像は横長で、そのままでは縦長のiPhoneの画面には収まりません。

.resizable()|自動的にサイズ調整する

resizableを日本語に訳すと「サイズ変更可能」という意味です。
下記の画面調整などのモディファイアを適用したい場合には、このresizableモディファイアを適用することが必須です。

モディファイアなし
モディファイアあり

.scaledToFill()|画像のアスペクト比(縦横比)を調整

縦横比を保ったまま短い辺を基準に画像を画面いっぱいに表示します。
モディファイアをしなかった場合は、画像全体を画面に表示させようとして、長い辺(横)に思いっきり収縮がかかっています。

モディファイアを適用すると、元画像の縦横比を動かさず左右を無視して(一部を切り取った感じ)表示しています。

モディファイアなし
モディファイアあり

.scaledTiFit()|全体表示を優先したアスペクト比の維持

画面全体を表示するようにアスペクト比を維持しながら拡大縮小する。
この場合、上下左右に空白ができる可能性があることから、〜Fitより上記の〜Fillの方が使い勝手が良いかもしれません。

scaledTofit()モディファイア
scaledToFill()モディファイア

.ignoresSafeArea()|セーフエリア外にも表示

ignoreは、日本語訳で「無視する」という意味。
iPhoneの中心表示部のSafe Areaを無視して、その上下にも表示を広げます。ということです。

左画面が「Safe Area」だけで表示している場合です。

モディファイアなし
モディファイアあり

まとめ

モディファイアには、scaledToFill()とscaledToFit()のように、紛らわしいものも結構あります。

コード写経するような段階(ど初心者)では軽く触るだけで良いかもしれませんが、慣れてきたら、この辺の違いもしっかりと理解したほうが後々、応用力のあるプログラマーになれるかもしれませんね。

コメント

タイトルとURLをコピーしました