【SwiftUI】Twitterの投稿ボタンを再現する

はじめに

Twitterの右下にある投稿ボタンを作ってみます。
押すと色は変化せず、大きさが変化するようなボタンのスタイルです。

サンプルアプリ

実装

struct TwitterPostButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundStyle(.white)
            .frame(width: 60, height: 60)
            .background(.blue, in: Circle())
            .scaleEffect(configuration.isPressed ? 0.9 : 1.0)
            .animation(.spring(), value: configuration.isPressed)
            .shadow(radius: 3)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomTrailing)
            .padding(15)
    }
}

extension ButtonStyle where Self == TwitterPostButtonStyle {
    static var twitterPostButton: TwitterPostButtonStyle {
        .init()
    }
}

使い方

import SwiftUI

struct ContentView: View {
    var body: some View {
        Button {
            // タップアクション
        } label: {
            Image(systemName: "plus")
                .resizable()
                .frame(width: 18, height: 18)
        }
        .buttonStyle(.twitterPostButton)
    }
}

おわり

今回は長押しは再現しませんでした。
いい方法が思い浮かばなかったので長押しは機能に追加しませんでした。
長押しのアニメーションもかっこいいのでいつか再現したいです