Skip to content

Instantly share code, notes, and snippets.

@bfolkens
Created March 13, 2021 04:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bfolkens/d5749c28830f02aadbf688ebe84fa6b7 to your computer and use it in GitHub Desktop.
Save bfolkens/d5749c28830f02aadbf688ebe84fa6b7 to your computer and use it in GitHub Desktop.
SwiftUI version of the VoiceMemo record button (with animation)
import SwiftUI
struct RecordButton: View {
@Binding var isActive: Bool
@State var startAction = { }
@State var stopAction = { }
@State var buttonColor: Color = .red
@State var borderStrokeColor: Color = .white
@State var borderStrokeWidth: CGFloat = 2
@State var borderSpacing: CGFloat = 10
@State var animation: Animation = .easeInOut
@State var stoppedStateCornerRadius: CGFloat = 0.10
@State var stoppedStateSize: CGFloat = 0.5
var body: some View {
GeometryReader { geometry in
ZStack {
Circle()
.stroke(borderStrokeColor, lineWidth: borderStrokeWidth)
recordButton(size: geometry.size.minimumDimensionLength - borderSpacing)
.animation(animation)
.foregroundColor(buttonColor)
}
}
}
func activate() {
isActive = true
startAction()
}
func deactivate() {
isActive = false
stopAction()
}
private func recordButton(size: CGFloat) -> some View {
if !isActive {
return Button(action: { activate() }) {
RoundedRectangle(cornerRadius: size)
.frame(width: size, height: size)
}
} else {
return Button(action: { deactivate() }) {
RoundedRectangle(cornerRadius: size * stoppedStateCornerRadius)
.frame(width: size * stoppedStateSize, height: size * stoppedStateSize)
}
}
}
}
struct RecordButton_Previews: PreviewProvider {
static var previews: some View {
RecordButton(isActive: .constant(false))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment