画像をプロジェクトへ取り込む方法と表示方法

SwiftUIでは、画像を表示するための便利なコンポーネントが提供されています。ここでは、画像を表示するための基本的な手法とそのカスタマイズ方法について解説します。

使用する画像のプロジェクトへの取り込み
画像の表示方法
1. シンプルな画像表示
画像の加工（スケーリング）
まとめ

使用する画像のプロジェクトへの取り込み

サイドメニューから「Assets」を選択します。

使用したい画像をAssetsにドラッグ＆ドロップで設定することで、プロジェクトに画像を取り込むことができます。

「samplePic」という名称で取り込みました。

画像の表示方法

次は取り込んだ画像を表示するための基本的な手法とそのカスタマイズ方法について解説します。

シンプルな画像表示

import SwiftUI

struct ImageSmpView: View {
    var body: some View {
        Image("samplePic")
    }
}

上記の例では、samplePicという名前の画像を表示しています。このように、.pngや.jpgなどの画像ファイルをプロジェクトに追加し、その名前を指定することで、簡単に画像を表示することができます。

画像の加工（スケーリング）

先の画像では画像サイズと画面のサイズが合っておらず、若干はみ出してしまっています。ちょうどよく表示されるように画像の加工について説明します。

以下の手順で画像を加工していきます。

画面サイズに合わせた画像のリサイズ
アスペクト比の維持
数値による画像サイズの変更

画面サイズに合わせた画像のリサイズ

画像に「.resizable」を適用します。
このモディファイアを適用することで、指定した画像が画面サイズに合わせてリサイズされます。

import SwiftUI

struct ImageSmpView: View {
    var body: some View {
        Image("samplePic")
            .resizable()
    }
}

アスペクト比の維持

次に「.aspectRatio」を適用します。
このモディファイアを適用することで、アスペクト比を維持したまま画像サイズを変更できます。

aspectRatioの引数を設定することで比率を変更したりもできます。

import SwiftUI

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

SwiftUIでの.aspectRatio()の使い方

.aspectRatio()は、SwiftUIで画像やビューのアスペクト比を設定するための便利なモディファイアです。このモディファイアを使用すると、ビューが異なるデバイスサイズや環境に合わせて正しい比率で表示されるように調整することができま...

数値による画像サイズの変更

さらに画像サイズを調整します。

.frame()は、SwiftUIのビューモディファイアの1つで、ビューのサイズやレイアウトを設定するために使用されます。主にwidthとheightの設定、ビューの配置、およびビューのサイズに関する調整を行います。

import SwiftUI

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