【SwiftUI】画像(Image)の使い方

SwiftUIで画像を表示するのには、Image()を使用します。
Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.2.1
【Swift】5.1
【iOS】13.2.2
【macOS】Catalina バージョン 10.15.3
スポンサーリンク

画像の表示

画像をプロジェクトに取り込む

事前準備として、Image()を使って表示させたい画像を、次の手順でXcodeのプロジェクトに取り込みます。

画像をプロジェクトに取り込む

Assets.xcassets(画像を格納するフォルダ)内の表示名が、コードから画像にアクセスする際のリソース名になります。

基本的な使い方

基本的な使い方は、引数に画像のリソース名を指定するだけです。

基本的な使い方

デフォルトでは画像のサイズそのままで表示されますので、解像度の高い写真などを指定すると下図のように超どアップで出力されます。
サイズの調整などは後述するModifierにて行います。

写真を取り込んだ場合

アクセシビリティ対応

引数(decorarive)を使って画像を指定すると、ボイスオーバーなどのアクセシビリティ対応時に無視されます。
装飾目的などで、読み上げる必要のない画像に指定します。

サイズの変更

画像のサイズを変更するには、.resizable()と.frame()の2つのModifierを使用します。
.frame()だけでは、画像のサイズは変更されませんので注意して下さい。

サイズの変更

縦横比の維持

縦横比を維持しながらサイズを変更するには次のいずれかのModifierを追加します。

scaledToFit()

縦横比を維持しながらフレームにぴったりと収めるModifierです。

scaledToFit()

scaledToFill()

縦横比を維持しながらフレームをちょうど埋め尽くすサイズにするModifierです。

下図のようにフレームをはみ出す場合があります。
はみ出した部分を切り取るには、後述するclipped()を使用します。

scaledToFill()

フレームによる切り取り

画像をフレームサイズで切り取るには、次のようにclipped()を使用します。
フレーム外にはみ出した部分が非表示になります。

フレームによる切り取り

Viewの切り取りについてはこちらの記事で詳しく解説しています。

【SwiftUI】Viewの切り取りとマスク
Viewの一部分を切り取る方法を解説します。主に画像の切り抜き等で使える方法です。
スポンサーリンク

システムアイコンの表示

引数(systemName)を使って標準で用意されているシステムアイコンを表示できます。

システムアイコン "hand.thumbsup.fill" を表示した例です。

システムアイコンの表示

この場合の画像は文字と同じ様に扱えますので、文字に使えるような一部のModifierが適用可能です。

システムアイコンの表示2

システムアイコンの一覧

iOS13以上では標準で使用可能な1,500種以上のシステムアイコン(SF Symbols)が用意されています。
使用可能なアイコンの一覧を探すには、MacOSで使えるSF Symbolsアプリを使用します。
次のAppleのサイトよりSF Symbolsアプリをダウンロードして下さい。

SF Symbols - SF Symbols - Human Interface Guidelines - Apple Developer
Learn about designing apps for SF Symbols.

SF Symbols アプリ

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Viewのフレームサイズ指定(frame)
Viewのフレームサイズを指定する方法を解説します。フレームはレイアウトの基準となる枠で、実際のView表示サイズとは異なる事があります。具体的な例を示すと、下の図の青背景の部分が元々のTextView、回りの赤枠がこのViewに設定さ...
【SwiftUI】Textの使い方
Textは読み取り専用テキストを表示するViewです。UiKitのUILabelに相当する部品です。
【SwiftUI】Modifierの適用順
Viewに様々な変更を適用するModifierですが、適用する順番によって挙動が変わる事があります。これはModifierが既存のViewのプロパティを変更しているのでは無く、変更を適用した新しいViewを毎回作成している事に関係します。...
Kindle unlimited 読み放題で読める管理人のおすすめ本です!
スポンサーリンク
SwiftUI
カピ通信