【SwiftUI】Imageオブジェクトの使い方

本記事では、SwiftUIで使用できるImageオブジェクトの使い方とモディファイアについて解説していきます。

1. 任意の画像を表示
2. システム標準の画像を使用
3. Imageオブジェクトのモディファイア
4. 最後に

任意の画像を表示

まずはImageオブジェクトを使用して、任意の画像を表示させる方法を解説していきます。

今回は景色の画像を表示させますが、そのためにはまず対象となる画像をXcodeにアップロードします。

画像をアップロードするにはまずプロジェクト画面の左側にある「Assets」を選択します。

その後、ローカルのmac上から使用したい画像をドラッグ&ドロップで画面中央の「No selection」と表示されている位置に配置します。以下のように画像が表示されていればアップロードが完了です。

表示されている画像の左側に画像の名前が表示されていることを確認してください。ここに表示されている名前をImageオブジェクトで表示する際に使用します。

ここからContentViewに戻り、先ほどアップロードした画像を表示するためにImageオブジェクトで指定していきます。画像を指定する際には、Image()の括弧内に画像の名前を入れます。

画像を指定する際には、必ずダブルクォーテーション(“”)で囲んで記述する必要がある点に注意してください。

var body: some View {
        VStack {
            Image("mountains")
        }
        .padding()
    }

実行結果

アップロードした画像を簡単にiphone上で表示することができました。

システム標準の画像を使用

SwiftUIでは標準でシンプルな画像素材がたくさん用意されています。ここからその画像を使用する方法について解説していきます。

システムで用意されている画像を使用する際には、Image(systemName: “”)を使用します。Imageと打てば候補で出てくるので選択してください。選択するとImage(systemName:String)と入力されますので、Stringの部分を””に変えてこの中に画像の名前を入れていきます。

システム標準の画像を選ぶ方法は、まず画面右上の+ボタンをクリックします。その後、出てきたモーダルの上部にある青い星マークを選択することで、画像一覧を表示することができます。

表示された一覧の画像名をダブルクリックやドラッグ&ドロップするなどして””内に入れることで画像を表示することができます。

今回は例としてアラームとゲームコントローラーを縦に並べてみます。

VStack {
            Image(systemName: "alarm")
            Image(systemName: "gamecontroller.fill")
        }

実行結果

無事表示されていることが確認できました。このようにImage()オブジェクトでは簡単に任意の画像、システム標準の画像を画面に表示させることができます。

すごく小さく表示されてしまっていますが、後の章でサイズを変更する方法についても触れていきます。

Imageオブジェクトのモディファイア

ここからは、Image()オブジェクトで表示した画像のサイズを変更したり、加工したりすることが可能なモディファイアを紹介していきます。

サイズを変更

Image()オブジェクトは画像のサイズを変更することができます。今回は画像の縦横比を変更せず、表示サイズのみを変更する方法について解説していきます。

実は上の章で取り扱った任意の画像は、画像サイズが大きく、画面からはみ出してしまって画像全体が表示できておりませんでした。この画像の全体が表示できるように修正していきます。

Image("mountains")
                .resizable()
                .scaledToFit()
                .frame(width: 300, height: 300)

実行結果

画像全体を画面上に表示することができました。各モディファイアの役割は以下のとおりです。

画像サイズの変更を可能にする(resizeble)
画像の縦横の比率を維持する(scaledToFit)
画像を表示する枠サイズの指定(frame)

上記3つのモディファイアにより、画像の形を維持しながら好きなサイズに変換することを実現することができます。

角を丸くする

画像は、形を変えたりトリミングして一部分だけ表示することも可能になっています。今回は角を丸くする方法を紹介します。方法は簡単で、cornerRadius()というモディファイアを使用します。

Image("mountains")
                .resizable()
                .scaledToFit()
                .cornerRadius(30)
                .frame(width: 300, height: 300)

実行結果

cornerRadius()の中に任意の値を指定することで、好きな角丸を実現することができます。

色を変更する

色を変更できるのは、任意の画像ではなくシステムに標準で用意されている画像についてのみとなりますが紹介いたします。画像のサイズ変更と組み合わせて実装します。

Image(systemName: "alarm")
                .resizable()
                .scaledToFit()
                .frame(width: 200, height: 200)
                .foregroundColor(.green)

実行結果