【SwiftUI】画像の表示とサイズ指定やトリミング

アプリで画像表示は必須ですよね！

今回はそんな画像の表示の表示方法を紹介します。

画像のサイズの指定方法やトリミングの方法を紹介しますのでぜひ覚えてアプリ制作に活かしてください！

アプリに画像を追加して表示する
画像の全体を表示するサイズ指定
画像を数値でサイズ指定
.aspectRatio(contentMode: 〇〇)の.fitと.fillの違い
画像をトリミング
まとめ
SwiftUI勉強中の方へ

アプリに画像を追加して表示する

まずはアプリに画像を追加します。

「Assets」を開き、追加したい画像をドラッグ&ドロップで追加します。

赤枠に画像の名前を入力します。

Image(”画像の名前”)で画像を表示していきます。

struct ContentView: View {
    var body: some View {
        Image("hamburger")
    }
}

一応画像が表示されました？笑

これではなんの画像かわからないので次はサイズを指定していきます！

画像の全体を表示するサイズ指定

先ほどの画像の全体を表示できるようにサイズを変更していきます。

struct ContentView: View {
    var body: some View {
        Image("hamburger")
            .resizable()
    }
}

.resizable()を追加することで画像全体を表示することができました。

しかし、これでは縦横比が崩れて縦長に伸びてしまっています。

次は縦横比を保ちながら画像の全体を表示します。

struct ContentView: View {
    var body: some View {
        Image("hamburger")
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

.aspectRatio(contentMode: .fit)で画像の縦横比を保ち全体を表示する

.aspectRatio(contentMode: .fit)を使用することで縦横比を保ち全体を表示することができました！

画像を数値でサイズ指定

.frame(width: 数値)を使用して画像のサイズを指定します。

struct ContentView: View {
    var body: some View {
        Image("hamburger")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 250)
    }
}

.frame(width: 250)を使用して横幅を250に指定しました。

.aspectRatio(contentMode: .fit)があるので縦の長さは元の縦横比によって自動で伸縮します。

.aspectRatio(contentMode: 〇〇)の.fitと.fillの違い

.fitは領域に収まるように、.fillは領域を満たすように画像を伸縮します。

struct ContentView: View {
    var body: some View {
        Image("hamburger")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 300, height: 200)
    }
}

struct ContentView: View {
    var body: some View {
        Image("hamburger")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 300, height: 200)
    }
}

画像をトリミング

先程のブロックで紹介したように.fillは領域を画像で満たすように伸縮します。

.clipped()を使用することで領域からはみ出た部分を切り取るようにトリミングすることができます。

struct ContentView: View {
    var body: some View {
        Image("hamburger")
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: 300, height: 300)
            .clipped()
    }
}