Swift・SwiftUI

【SwiftUI】「いいね」ボタンを作ってみる

「チェックボックス」 ・「お気に入り」に続いて、「いいね」ボタンも作ったので、紹介します。

基本的な構成はお気に入りボタンと大きく変わりませんが、「いいね」数も表示できるようにしています。

【SwiftUI】「いいね」ボタンを作ってみる

LikeButton

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

struct LikeButton: View {
    
    @Binding var isLike: Bool
    @Binding var numberOfLikes: Int
    private var onTapped: (() -> Void)?
    
    init(isLike: Binding<Bool>, numberOfLikes: Binding<Int>, onTapped: (() -> Void)? = nil) {
        self._isLike = isLike
        self._numberOfLikes = numberOfLikes
        self.onTapped = onTapped
    }
    
    var body: some View {
        HStack {
            configureLikeImage()
            Text("\(numberOfLikes)")
        }
    }
    
    private func configureLikeImage() -> AnyView {
        var imageName = "icon_like_off"
        if self._isLike.wrappedValue {
            imageName = "icon_like_on"
        }
        return AnyView(
            Image(imageName)
                .resizable()
                .frame(width: 20, height: 20)
                .onTapGesture {
                    self._isLike.wrappedValue.toggle()
                    if self._isLike.wrappedValue {
                        self._numberOfLikes.wrappedValue += 1
                    } else {
                        self._numberOfLikes.wrappedValue -= 1
                    }
                    self.onTapped?()
                }
        )
    }
}

引数は３つです。

isLike: Binding<Bool> には LikeButton が保持する Bool 値とバインディングさせる @State（または @Publish）の Bool 変数を渡します。

numberOfLikes: Binding<Int> には LikeButton が保持するいいね数とバインディングさせる @State（または @Publish）の Int 変数を渡します。

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

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

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

使用例

struct ContentView: View {
    
    @State private var isLike = false
    @State private var numberOfLikes = 10
    
    var body: some View {
        VStack {
            Spacer()
            LikeButton(isLike: $isLike, numberOfLikes: $numberOfLikes, onTapped: {
                self.doSomething()
            })
            Spacer()
        }
    }
    
    private func doSomething() {}
}

以上、「いいね」ボタンのサンプルを紹介しました。

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

【関連記事】

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