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

I believe instead of having the top, middle and bottom as hard coded to fixed number, if we can make it dynamic based on the screen height will be helpful @mshafer

@AnirupPat yea since I made this gist I've done that in my own project using an enum like this:

enum CardPosition: Double {
    case top = 0.9
    case middle = 0.5
    case bottom = 0.1
    
    var offset: CGFloat {
        let screenHeight = UIScreen.main.bounds.height
        return screenHeight - (screenHeight * CGFloat(self.rawValue))
    }
    
    var coveringPortionOfScreen: Double {
        return self.rawValue
    }
}

This way the positions are declared as a fraction of the screen to cover, and the offset is computed based on the screen's height.

JavaScript implementation https://github.com/roman-rr/cupertino-pane

@AnirupPat yea since I made this gist I've done that in my own project using an enum like this:

enum CardPosition: Double {
    case top = 0.9
    case middle = 0.5
    case bottom = 0.1
    
    var offset: CGFloat {
        let screenHeight = UIScreen.main.bounds.height
        return screenHeight - (screenHeight * CGFloat(self.rawValue))
    }
    
    var coveringPortionOfScreen: Double {
        return self.rawValue
    }
}

This way the positions are declared as a fraction of the screen to cover, and the offset is computed based on the screen's height.

What about views which don’t fill the entire screen? E.g: Views inside a tabView or NavigationView.
I’m wondering how I can achieve a true adaptable CardView efficiently.
I’ve managed to implement CardView as a ViewModifier (similar to .sheet())

@mshafer Would you mind posting an updated Gist using this enum?

The existing SlideOverCard takes up two positions on my screen, or disappears entirely (can't bring it back). Also, it's only as wide as the handle by default - where I think in portrait, it should be full width (less sure what it should be in landscape - a popout or something?)

enum CardPosition: Double {
    case top = 0.9
    case middle = 0.5
    case bottom = 0.1
    
    var offset: CGFloat {
        let screenHeight = UIScreen.main.bounds.height
        return screenHeight - (screenHeight * CGFloat(self.rawValue))
    }
    
    var coveringPortionOfScreen: Double {
        return self.rawValue
    }
}

How can I get the content on the popover card to stay in a fixed position, and then also be dynamic as the card is opened...If you look at the new VoiceMemo's app, they use a very similar card.

In the bottom state you only see a record button. In the middle state, there is an audio visualizer, timer and some text entry. And then with the full card opened you now see a full player and audio editor. The tricky thing is the record button stays at the bottom of the card as these views unfold.

Anyone have ideas?

PS: This is killer stuff, I've been trying to track down something like this for a while now - thanks for the work.

@Keats0206 I think there'd be two things required to get that sort of behaviour:

1. You'd need to change the height of the card to be dynamic. Currently it's just a fixed height card that slides up and down, extending below the visible screen. To change this, where it's currently .frame(height: UIScreen.main.bounds.height) you could instead pass in a calculated value (effectively UIScreen.main.bounds.height minus the card's top offset).
2. Now you have card that grows and shrinks as you change positions, you'll want your embedded content view to change accordingly. Right now the card's top/middle/bottom position is a @State variable internal to the SlideOverCard, but you could lift this up to the ContentView, and then pass it into both the SlideOverCard and your embedded content views by using @Binding. Your embedded content view could then do things like "if position is bottom display record button, else if middle display X, else display Y". You could probably add some SwiftUI animations to replicate the way it fluidly changes the UI as you transition between positions.

Let us know how you get on!

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

Hey @haydgately, the unfortunate short answer is I have not figured out how to get this playing nicely with a scroll view. See my response on reddit here for more details: https://www.reddit.com/r/swift/comments/c3ow76/how_to_create_a_slideover_card_using_swiftui_like/eucfb7p/

Here is what I achieved, suggestions are welcomed.

@mshafer thanks for your response. I see that from your reddit response that it's been a tricky one for all. Are you looking into it still or is it a dead end do you think so far? Thanks

@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.