Custom ButtonStyle in SwiftUI
Updated:
Custom ButtonStyle in SwiftUI
Especially in more advanced production apps you actually want to customize
import SwiftUI
// MARK: - VIEW
struct ButtonStyleBootCamp: View {
// MARK: - PROPERTY
// MARK: - BODY
var body: some View {
Button {
} label: {
Text("Click me")
.font(.headline)
.foregroundColor(.white)
.frame(height: 55)
.frame(maxWidth: .infinity)
.background(Color.blue.cornerRadius(10))
.shadow(color: Color.blue.opacity(0.3), radius: 10, x: 0.0, y: 10.0)
}
// .buttonStyle(PlainButtonStyle())
// .buttonStyle(PressableStyle())
.withPressableStyle()
.padding(40)
}
}
// MARK: - VIEWMODIFIER
struct PressableStyle: ButtonStyle {
let scaledAmount: CGFloat
// set default scaleAmount
init(scaledAmount: CGFloat) {
self.scaledAmount = scaledAmount
}
func makeBody(configuration: Configuration) -> some View {
configuration.label
.scaleEffect(configuration.isPressed ? scaledAmount : 1.0)
.opacity(configuration.isPressed ? 0.9 : 1.0)
.brightness(configuration.isPressed ? 0.05 : 0)
}
}
// MARK: - EXTENSTION
extension View {
func withPressableStyle(scaledAmount: CGFloat = 0.9) -> some View {
self.buttonStyle(PressableStyle(scaledAmount: scaledAmount))
}
}
🗃 Reference
SwiftUI Thinking - https://www.youtube.com/watch?v=MQl4DlDf_5k&list=PLwvDm4Vfkdphc1LLLjCaEd87BEg07M97y&index=2
Leave a comment