Skip to content

Instantly share code, notes, and snippets.

@SarahAlsharif
Last active February 1, 2022 13:37
Show Gist options
  • Select an option

  • Save SarahAlsharif/edf8de3dc27edef31c706a89222ee83d to your computer and use it in GitHub Desktop.

Select an option

Save SarahAlsharif/edf8de3dc27edef31c706a89222ee83d to your computer and use it in GitHub Desktop.
struct CustomToggle : View {
let width : CGFloat
let height : CGFloat
let toggleWidthOffset : CGFloat
let cornerRadius : CGFloat
let padding : CGFloat
@State var isToggled = false
@State var switchWidth : CGFloat = 0.0
var body: some View {
ZStack {
DeepConcaveView(cornerRadius: cornerRadius)
.frame(width: width, height: height)
HStack {
Text("ON")
.bold()
.foregroundColor(.green)
Spacer()
Text("OFF")
.bold()
.foregroundColor(.red)
}
.padding()
.frame(width: width, height: height)
HStack {
if isToggled {
Spacer()
}
RoundedRectangle(cornerRadius: cornerRadius)
.padding(padding)
.frame(width: switchWidth + toggleWidthOffset, height: height)
.animation(.spring(response: 0.5), value: isToggled)
.foregroundColor(Color(Colors.mainColor))
.shadow(color: Color(Colors.lightShadow), radius: 2, x: -3, y: -3)
.shadow(color: Color(Colors.darkShadow), radius: 3, x: 3, y: 3)
if !isToggled {
Spacer()
}
}
}
.frame(width: width, height: height)
.onTapGesture {
isToggled = !isToggled
withAnimation(.easeInOut(duration: 0.2)) {
switchWidth = width
}
withAnimation(.easeInOut(duration: 0.4)) {
switchWidth = height
}
}
.onAppear {
switchWidth = height
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment