Swift・SwiftUI

【SwiftUI】お気に入りボタンを作ってみる

SNS系アプリでよく見かける、お気に入り登録でタップするよくあるハートマークのボタン。

今回は、これを SwiftUI で作ってみます。

※基本的なところは以前投稿した「CheckBoxボタンを作ってみる」とほとんど同じです。

【SwiftUI】お気に入りボタンを作ってみる

FavoriteButton

※ボタンの画像を任意でご用意ください。

struct FavoriteButton: View {
    
    @Binding var isFavorite: Bool
    private var onTapped: (() -> Void)?
    
    init(isFavorite: Binding<Bool>, onTapped: (() -> Void)? = nil) {
        self._isFavorite = isFavorite
        self.onTapped = onTapped
    }
    
    var body: some View {
        configureFavoriteImage()
    }
    
    private func configureFavoriteImage() -> AnyView {
        var imageName = "icon_favorite_inactive"
        if self.$isFavorite.wrappedValue {
            imageName = "icon_favorite_active"
        }
        return AnyView(
            Image(imageName)
                .resizable()
                .frame(width: 24, height: 24)
                .onTapGesture {
                    self.$isFavorite.wrappedValue.toggle()
                    self.onTapped?()
                }
        )
    }
}

引数は２つです。

isFavorite: Binding<Bool> FavoriteButton が保持する Bool 値とバインディングさせる @State（または @Publish）の Bool 変数を受け取ります。

onTapped: @escaping () -> Void タップ時に行いたい処理のクロージャを受け取ります。

Image の .onTapGesture で isFavorite を切り替えています。また、登録したクロージャも実行されます。

画像は、isFavorite によって、アクティブ時の画像と非アクティブ時の画像が切り替わります。

使用例

struct ContentView: View {
    
    @State private var isFavorite = false
    
    var body: some View {
        VStack {
            Spacer()
            FavoriteButton(isFavorite: $isFavorite, onTapped: {
                doSomething()
            })
            if isFavorite {
                Text("お気に入り登録済")
            } else {
                Text("お気に入り未登録")
            }
            Spacer()
        }
    }

    private func doSomething() {}
}

以上、お気に入りボタンのサンプルを紹介しました。

以下の関連記事も是非ご参考下さい。

【関連記事】

【SwiftUI】CheckBoxボタンを作ってみる
【SwiftUI】画像ボタンの作り方