SwiftUIで画像を扱いたい時は、Image を用います。前回のTextオブジェクトに並べて画像を表示してみます。

  • 前回のコードに続けて書く
  • 画像を表示する Image オブジェクト. 指定した画像を表示する
    • “CC0_01” を指定する (詳細は後述)
  • まずは画像の大きさがそのまま表示される。サイズ調整のため以下を追加する
    • .resizable() : 大きさの変更を認める
    • .scaledToFit() : 領域の大きさにフィットするサイズに自動調整する

Imageオブジェクトは画像データをそのまま表示しようとしますが、.resizable()をつけることで表示サイズの変更ができるようになります。その上で.scaledToFit()を追加すると画面に収まるように大きさを変えてくれます。

コード

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text( "あいうえお" )
            .font( .title )
            
            Image( "CC0_01" )
            .resizable()
            .scaledToFit()
        }
    }
}

結果

swiftui_1_3_2_1.png

アセットについて

サンプルコードにはあらかじめCC0_01という名前の画像が含まれています。 そのため、CC0_01と書けば画像が表示されます。 このようにApp内で利用する外部のファイルを アセット と呼びます。

アセットはAssets.xcassetsの中に含まれています。 もし新たな外部ファイルを利用したい場合、この中に登録していきます。

swiftui_1_3_2_2.png