【SwiftUI】ビューコントローラー：Image

環境

Xcode：16.1
Swift：6
iOS：16

基本

概要

Imageとは
取り込んだ画像やシステムアイコンを表示するビュー

パラメータ

name：表示する画像の名前

// アセットから読み込み
Image("exampleImage")

// SF Symbolsから読み込み
Image(systemName: "heart.fill")

例（画像の表示）

デフォルトでは画像のサイズそのままで表示される

import SwiftUI

struct ContentView: View {
    var body: some View {
        // 画像の名前を指定
        Image("alpaca")
    }
}

#Preview {
    ContentView()
}

例（システムアイコンの表示）

import SwiftUI

struct ContentView: View {
    var body: some View {
        // システムアイコンの名前を指定
        Image(systemName: "star.fill") // 星のアイコン
    }
}

#Preview {
    ContentView()
}

画像の取り込み方法

Assets.xcassetsを開き、画像ファイルをドラッグして追加する
※拡張子が大文字の場合、取り込みエラーになる場合がある

サイズの変更（resizable）

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image("alpaca")
            .resizable()    // 画像のサイズをフレームに合わせる
            .frame(width:300, height:500)   // サイズを指定
            .border(Color.red, width:2) // フレームの枠線
    }
}

#Preview {
    ContentView()
}

縦横比の維持

フレームに収める（scaledToFit）

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image("alpaca")
            .resizable()
            .scaledToFit()  // 縦横比を維持しながらフレームに収める
            .frame(width:300, height:500)
            .border(Color.red, width:2)
    }
}

#Preview {
    ContentView()
}

フレームの最大に合わせる

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image("alpaca")
            .resizable()
            .scaledToFill()  // 縦横比を維持しながらフレームを埋める
            .frame(width:300, height:500)
            .border(Color.red, width:2)
    }
}

#Preview {
    ContentView()
}

フレームサイズで切り取る

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image("alpaca")
            .resizable()
            .scaledToFill()
            .frame(width:300, height:500)
            .border(Color.red, width:2)
            .clipped()      // 画像の切り取り
    }
}

#Preview {
    ContentView()
}

図形で切り取り

形状	組み込み部品
四角形	Rectangle
角丸四角形	RoundedRectangle
カプセル形	Capsule
円形	Circle
楕円形	Ellipse

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image("panda")
            .clipShape(.circle)
    }
}

#Preview {
    ContentView()
}

他のViewで切り取る（マスク）

システムアイコンで切り取り

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image("panda")
            .mask(
                Image(systemName: "star.fill")
                    .font(.system(size: 150))
            )
    }
}

#Preview {
    ContentView()
}

文字で切り取り

import SwiftUI

struct ContentView: View {
    var body: some View {

        Image("panda")
            .mask(
                Text("パンダ")
                    .font(.system(size: 90, weight: .black))
            )
    }
}

#Preview {
    ContentView()
}