SwiftUIのImageを使う
2021年03月09日
![](/images/category//swiftui.png)
画像を設定する
SF Symbolsを使う
systemName:
の後に表示したいアイコン名を文字列で指定
Image(systemName: "calendar.badge.plus")
![Imageを使って画像を表示する](/article-images/swiftui-image/01.png)
SF Symbolsの画像は色を変更する事も可能
Image(systemName: "calendar.badge.plus")
.foregroundColor(.blue)
![Imageで色を変える](/article-images/swiftui-image/02.png)
SF Symbolsのアイコンを調べるにはMac用のSF Symbolsアプリを利用すると便利
![MacのSF Symbolsのアプリのアイコン](/article-images/swiftui-image/03.png)
![SF Symbolsアプリ](/article-images/swiftui-image/04.png)
SF SymbolsのMac用アプリはこちらのサイトのリンクからDL可能
![SF SymbolsのDLサイト](/article-images/swiftui-image/05.png)
Assetsを使う
Assets.xcassetsで「New Image Set」を作成
![New Image Setから新しいAssetsを作る](/article-images/swiftui-image/06.png)
Image Setに名前と画像を設定
ここでは「sample」という名前を指定していますが、好きな名前を付けて問題ありません
![Image Setに名前を付ける](/article-images/swiftui-image/07.png)
必要に応じて 2x・3x の画像も設定します
Image()
に「Image Set」で付けた名前を文字列として渡します
Image("sample")
後述する resizable()
等の設定を行っていないため画面からはみ出していますが、表示自体は問題なく出来ます
![Image Setとして追加した画像をImageで表示する](/article-images/swiftui-image/08.png)
UIImageを使う
今までUIKitを使っていたプロジェクトやUIImageを使うようなライブラリを使っていた場合、UIImageを使いたい場面があります。
使い方は簡単で uiImage:
の後に UIImage
を渡してあげれば表示されます
Image(uiImage: UIImage(named: "sample") ?? UIImage())
表示サイズ
表示サイズを変更する場合、必ず resizable()
を指定する必要があります
Image("sample")
.resizable()
.frame(width: 250, height: 250)
![resizableを使う事で画像のサイズを指定して表示する事が出来る](/article-images/swiftui-image/09.png)
画像の比率を保って表示する
scaledToFit()
を使用
後に指定している frame()
の width
や height
に応じ比率を保ったまま表示されます
//使っている画像の比率が1:1のため、width:250, height:250 と同じ結果に
Image("sample")
.resizable()
.scaledToFit()
.frame(width: 250)
![scaledToFitを使う事で画像の比率を保ったまま表示する](/article-images/swiftui-image/09.png)
アスペクト比を指定する
aspectRatio()
を使用
aspectRatio()
の第一引数が 幅:高さ
の比率を表しています。
以下の指定の場合 幅:高さ
の比率が 0.5:1
の比率になります。
そのため width:height = 250:500
というサイズ指定になります。
Image("sample")
.resizable()
.frame(width: 250)
.aspectRatio(0.5, contentMode: .fit) //w:h = 250:500
![aspectRatioを使って画像をアスペクト比で表示する](/article-images/swiftui-image/10.png)
逆に以下のようにすると幅:高さ
の比率が 2:1
の比率になり、
width:height = 300:150
というサイズ指定になります。
Image("sample")
.resizable()
.frame(width: 300)
.aspectRatio(2, contentMode: .fit) //w:h = 300:150
![aspectRatioに設定する値を1以上にする事で幅の方を広くする事が出来る](/article-images/swiftui-image/11.png)
様々な表示方法
表示の加工を分かりやすくするため以下の画像を使用します
Image("cat")
.resizable()
.scaledToFit()
.frame(width: 300)
![Imageを使って画像を加工する前の表示](/article-images/swiftui-image/12.png)
角丸
Image("cat")
.resizable()
.scaledToFit()
.frame(width: 300)
.cornerRadius(30)
![cornerRadiusを使って画像を角丸で表示する](/article-images/swiftui-image/13.png)
丸く切り抜く
Image("cat")
.resizable()
.scaledToFit()
.frame(width: 300)
.clipShape(Circle())
![clipShape(Circle())で丸く切り抜く](/article-images/swiftui-image/14.png)
枠と影
Image("cat")
.resizable()
.scaledToFit()
.frame(width: 300)
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
![overlayとshadowを使って角丸の枠と影を付ける](/article-images/swiftui-image/15.png)