公開日:2020/08/18更新日:2020/09/03
【SwiftUI】Imageで画像を表示する方法を解説

- SwiftUIで画像を表示する方法が知りたい
- Imageをカスタマイズする方法が知りたい
SwiftUIでは、ImageというViewを使用することで、画像を表示することができます。
本記事では、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)
を実装します。
第2引数のResizingModeに、.tileを指定することで、画像が敷き詰められるように表示されます。.stretchを指定した場合は、1枚の画像が拡大縮小して表示されます。
画像の色を変更する
最後に、画像の色を変更する方法についてです。
画像の色を変更するには、renderingMode(.template)を実装し、さらに、foregroundColor()で変更する色を指定します。
以上、Imageで画像を表示する方法についてでした。
関連記事