Slide-over card (like in Maps or Stocks) using SwiftUI

ContentView.swift

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)
    }
}

Handle.swift

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)
    }
}

MapView.swift

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)
    }
}

SlideOverCard.swift

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
        }
    }
}

@RubeDEV thanks for replying also! My Spanish isn't great, would you be able to upload a sample project with it running or how it is called in contentview as I cannot figure out how to try to test your code! Thanks in advance

Ok, I’ll give that gist an example. Let me know if you have any trouble or improvement requests.

@mshafer, Would you let me know your opinion about my code?

Looks really good, I'm struggling to get annotation data to display on the card from points on the map though. Anyone had luck with this or can point me in the right direction?

@mstoten does it work well with scrollviews?

@mstoten, could you be more specific on your issue?

I have a map with points and annotations pulled from GEOJSON file. When you select the point on the map I want it to show on the card and when you select another point the information on that card changes to the new point.

Hello and thank you for this code. It has been very useful in my project.

There are two issues I would like to explore.

1. Accounting for a TabBar on the bottom. I would like the SlideOver to drop down to the top edge of the TabBar. Currently I have it hard coded but that will only work with the model of phone I am testing on. I have not been able to find a way to get the TabBar height in SwiftUI if anyone has a fix for that.

2)I would like to be able to programmatically dismiss the SlideOver to it bottom position. Any suggestions on how I might be able to accomplish that?

Thank you.

@mstoten you can render any content inside the SlideOverCard, so if you had a custom Swift view that accepted GEOJSON information as a property, you could do:

SlideOverCard {
    MyCustomView(geojson: selectedAnnotation.geojson)
}

Then you just need to handle changing the selectedAnnotation state variable in your top-level view, and the rendered content in the SlideOverView should change automatically.

@SAPIENTechnologies I'm not too sure about your first question sorry, but for your second question on controlling the position of the SlideOverCard externally/programmatically: currently the position variable is an internal @State variable within SlideOverCard itself, so to allow external users of the view to control it you'd need to switch it to a @Binding variable. This would allow parent views to pass in a binding to another state variable, e.g. SlideOverCard(position: $cardPosition) { ... }. That way SlideOverCard can still set the property and respond whenever it changes, but the actual source of that variable would be somewhere else.

Anyone had any joy with scrolling a list in the card? The drag for the card keeps firing and can't drag up and down a scrollview/list without the card moving too? Thanks

Have you find any solution for scrollview or list?

I'm pretty new to swiftui, but can someone help give me an idea on how I can have a button that closes (resets the Card state to the bottom)

The button is on the slide over card if that makes a difference. I wasn't sure why i couldn't just use

SlideOverCard(CardPosition.bottom, backgroundStyle: BackgroundStyle.blur)

again inside the card Button(action: { section..

Any help or pointers welcomed, thank you.

In the SlideOverCard struct I made sure position was a @State var

@State var position : CGFloat = bottom 

The view that I am going to embed in the SlideOverCard has a binding to the position variable (in this case my OptionsView)

@Binding var position: CGFloat

I create my SlideOverCard with the embedded view passing in the position

 SlideOverCard (position: bottom) { position in
                    OptionsView(position: position)
  }

Finally, in response to an action in my embedded view I change the value of the binding variable

func pickerChanged() {
            self.position = bottom
   }

Hope that helps!

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.