-
-
Save mshafer/7e05d0a120810a9eb49d3589ce1f6f40 to your computer and use it in GitHub Desktop.
import SwiftUI | |
struct ContentView : View { | |
var body: some View { | |
ZStack(alignment: Alignment.top) { | |
MapView() | |
SlideOverCard { | |
VStack { | |
CoverImage(imageName: "maitlandbay") | |
Text("Maitland Bay") | |
.font(.headline) | |
Spacer() | |
} | |
} | |
} | |
.edgesIgnoringSafeArea(.vertical) | |
} | |
} |
import SwiftUI | |
struct Handle : View { | |
private let handleThickness = CGFloat(5.0) | |
var body: some View { | |
RoundedRectangle(cornerRadius: handleThickness / 2.0) | |
.frame(width: 40, height: handleThickness) | |
.foregroundColor(Color.secondary) | |
.padding(5) | |
} | |
} |
import SwiftUI | |
import MapKit | |
struct MapView : UIViewRepresentable { | |
func makeUIView(context: Context) -> MKMapView { | |
MKMapView(frame: .zero) | |
} | |
func updateUIView(_ view: MKMapView, context: Context) { | |
let coordinate = CLLocationCoordinate2D( | |
latitude: -33.523065, longitude: 151.394551) | |
let span = MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) | |
let region = MKCoordinateRegion(center: coordinate, span: span) | |
view.setRegion(region, animated: true) | |
} | |
} |
import SwiftUI | |
struct SlideOverCard<Content: View> : View { | |
@GestureState private var dragState = DragState.inactive | |
@State var position = CardPosition.top | |
var content: () -> Content | |
var body: some View { | |
let drag = DragGesture() | |
.updating($dragState) { drag, state, transaction in | |
state = .dragging(translation: drag.translation) | |
} | |
.onEnded(onDragEnded) | |
return Group { | |
Handle() | |
self.content() | |
} | |
.frame(height: UIScreen.main.bounds.height) | |
.background(Color.white) | |
.cornerRadius(10.0) | |
.shadow(color: Color(.sRGBLinear, white: 0, opacity: 0.13), radius: 10.0) | |
.offset(y: self.position.rawValue + self.dragState.translation.height) | |
.animation(self.dragState.isDragging ? nil : .interpolatingSpring(stiffness: 300.0, damping: 30.0, initialVelocity: 10.0)) | |
.gesture(drag) | |
} | |
private func onDragEnded(drag: DragGesture.Value) { | |
let verticalDirection = drag.predictedEndLocation.y - drag.location.y | |
let cardTopEdgeLocation = self.position.rawValue + drag.translation.height | |
let positionAbove: CardPosition | |
let positionBelow: CardPosition | |
let closestPosition: CardPosition | |
if cardTopEdgeLocation <= CardPosition.middle.rawValue { | |
positionAbove = .top | |
positionBelow = .middle | |
} else { | |
positionAbove = .middle | |
positionBelow = .bottom | |
} | |
if (cardTopEdgeLocation - positionAbove.rawValue) < (positionBelow.rawValue - cardTopEdgeLocation) { | |
closestPosition = positionAbove | |
} else { | |
closestPosition = positionBelow | |
} | |
if verticalDirection > 0 { | |
self.position = positionBelow | |
} else if verticalDirection < 0 { | |
self.position = positionAbove | |
} else { | |
self.position = closestPosition | |
} | |
} | |
} | |
enum CardPosition: CGFloat { | |
case top = 100 | |
case middle = 500 | |
case bottom = 850 | |
} | |
enum DragState { | |
case inactive | |
case dragging(translation: CGSize) | |
var translation: CGSize { | |
switch self { | |
case .inactive: | |
return .zero | |
case .dragging(let translation): | |
return translation | |
} | |
} | |
var isDragging: Bool { | |
switch self { | |
case .inactive: | |
return false | |
case .dragging: | |
return true | |
} | |
} | |
} |
Thank you for this sample. I am new to SwiftUI and trying your sample in Swift Playgrounds. I am getting an error that it cannot find 'CoverImage' in scope. Is 'CoverImage' an external library or part of SwiftUI that requires an import? Thanks,
Never mind, found your package and that works great! https://swiftpack.co/package/moifort/swiftUI-slide-over-card :)
@chakkaradeep yea CoverImage
was a custom component that just contained the image to display and handled the right aspect ratio / cropping. Glad that package is working for you, though will just clarify that it was contributed by someone else :)
Also, I haven't tested this yet but I'm pretty sure you can achieve this behaviour using the native sheet API these days. This example is still fun for a learning and customisation, though.
In the SlideOverCard struct I made sure position was a @State var
The view that I am going to embed in the SlideOverCard has a binding to the position variable (in this case my OptionsView)
I create my SlideOverCard with the embedded view passing in the position
Finally, in response to an action in my embedded view I change the value of the binding variable
Hope that helps!