こんにちは！今日は、SwiftUIで画像を選択する機能を作りました。下の画像のような感じです。
コードの名前はSelectImage.swiftです。
import SwiftUI
import UniformTypeIdentifiers
struct SelectImage: View {
@Binding var image: NSImage?
@State private var isHovering = false
var body: some View {
// ここに色々なコードが入ります
}
}
まず、import SwiftUIとimport UniformTypeIdentifiersで必要なライブラリをインポートします。次に、SelectImageという名前のViewを作ります。このViewには2つの変数があります。@Binding var image: NSImage?は選択した画像を保持し、@State private var isHovering = falseはマウスが画像の上にあるかどうかをチェックします。
Button("Select Image") {
let panel = NSOpenPanel()
panel.allowedContentTypes = [UTType.image]
panel.allowsMultipleSelection = false
if panel.runModal() == .OK {
let url = panel.url
self.image = NSImage(contentsOf: url!)
}
}
“Select Image”というボタンを作ります。このボタンをクリックすると、画像を選ぶダイアログが開きます。選んだ画像はNSImageとしてimage変数に保存されます。
if let img = image {
ZStack {
Rectangle()
.fill(Color.gray)
.frame(width: 44, height: 44)
.cornerRadius(4)
Image(nsImage: img)
.resizable()
.scaledToFit()
.frame(width: 40, height: 40)
}
}
選んだ画像は、四角形の枠内に表示されます。画像は自動的に枠に合わせてリサイズされます。
Button {
self.image = nil
} label: {
Image(systemName: "xmark.circle")
.foregroundColor(.white)
.font(.system(size: 16, weight: .bold))
}
.disabled(image == nil)
.padding(2)
.background(Color.black)
.clipShape(Circle())
.opacity(isHovering ? 0.9 : 0)
.onHover { hovering in
isHovering = hovering
}
画像の上にマウスを持っていくと、削除ボタンが現れます。このボタンを押すと、選んだ画像が削除されます。
以上が、私が作ったSelectImage.swiftの解説です。このコードを使えば、SwiftUIで簡単に画像選択機能を追加することができます。皆さんもぜひ試してみてください。それでは、また次回！
coiai
この記事もおすすめ
株式会社coiaiは、「想像できることを美しく実現」を掲げ、XR・Web・アプリ・システム開発およびDX支援を行う会社です。 創業2022年、東京都練馬区に本社を置き、要件のヒアリングからPoC（概念実証）、本番運用まで一貫して伴走します。 まずはお気軽にご相談ください。
主なご相談内容
詳しい会社情報は会社概要ページでご覧いただけます。
