【SwiftUI】Imageで画像を表示する方法を解説

Imageで画像を表示する

名前を指定して画像を表示する

まずは、画像名を指定して画像を表示する方法について解説致します。

画像の表示は、Image(_ name: String, bundle: Bundle? = nil)というように実装します。
※なお、Assetsにsoccer.jpgという画像が保存されいることを前提としております。

UIImageを指定して画像を表示する

続いて、UIImageを指定して画像を表示する方法です。

UIImageを指定してする場合は、uiImage: というラベルが必要になります。

Imageのカスタマイズ

画像のサイズを変更する

続いて、画像のサイズを変更する方法についてです。
Viewのサイズは、
frame(width: CGFloat? = nil, height: CGFloat? = nil, alignment: Alignment = .center)
で変更することができます。

以下は、3つの同じ画像に対し、frame()でサイズを変更を行ったサンプルです。

画像のサイズが変更されませんでした。実は、frame()を指定しただけでは、画像のサイズを変更することはできないのです。

画像のサイズを正しく変更するには、frame()と共に、resizable()を実装する必要があります。

画像のサイズが、frame()で指定したサイズに変更されました。
しかし、frame()で指定したサイズに合わせるように、画像が拡大縮小しているため、画像の比率が崩れてしまいました。

画像の比率を維持するには、scaledToFit()、scaledToFill()を実装します。

※ 画像に表示されている四角は、Viewのエリアを示しております。

scaledToFit()を実装すると、frameで指定したサイズ内に収まるように、比率を維持した状態で、画像サイズが変更されます。

scaledToFill()を実装すると、frameで指定したサイズを満たすように、比率を維持した状態で、画像サイズが変更されます。

画像を敷き詰めて表示する

続いて、指定したframe()のサイズを満たすように、画像を敷き詰めて表示する方法を紹介致します。

画像を敷き詰めて表示するには、
resizable(capInsets: EdgeInsets = EdgeInsets(), resizingMode: Image.ResizingMode = .stretch)
を実装します。

第２引数のResizingModeに、.tileを指定することで、画像が敷き詰められるように表示されます。.stretchを指定した場合は、１枚の画像が拡大縮小して表示されます。

画像の色を変更する

最後に、画像の色を変更する方法についてです。

画像の色を変更するには、renderingMode(.template)を実装し、さらに、foregroundColor()で変更する色を指定します。

以上、Imageで画像を表示する方法についてでした。