Member-only story
SwiftUI: How to create Slide over view?
How to use GestureState? xcode14 — iOS12
2 min readAug 13, 2020
Implementation Logic
- Build a Card over Zstack
- Add GestureState to drag Card up and down
- On Drag gesture end evaluate drag direction to minimise of maximise the view with animation
Add Card View:
Create a simple view with rounded corner and a tiny rect on top indicator.
struct CardView: ViewModifier {
func body(content: Content) -> some View {
ZStack(alignment: .top) {
ZStack(alignment: .top) {
RoundedRectangle(cornerRadius: 2.5)
.frame(width: 40, height: 5.0)
.foregroundColor(Color.secondary)
.padding(10)
}
.frame(minWidth: UIScreen.main.bounds.width)
.scaleEffect(x: 1, y: 1, anchor: .center)
.background(Color.white)
.cornerRadius(15)
}
}
}
Adding Gesture
Add DragGesture to the card view with dragTracker to move view with user drag
struct CardView: ViewModifier {
@State private var dragging = false
@GestureState private var dragTracker: CGSize = CGSize.zero
@State…