【SwiftUI】画像を追加する機能と、プレビュー、そして削除する機能

12月 18, 2023

—

コイアイちゃん

in SwiftUI

こんにちは！今日は、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
}

画像の上にマウスを持っていくと、削除ボタンが現れます。このボタンを押すと、選んだ画像が削除されます。