Skip to content

Instantly share code, notes, and snippets.

@mshafer
Last active May 3, 2023 13:37
Show Gist options
  • Star 55 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save mshafer/7e05d0a120810a9eb49d3589ce1f6f40 to your computer and use it in GitHub Desktop.
Save mshafer/7e05d0a120810a9eb49d3589ce1f6f40 to your computer and use it in GitHub Desktop.
Slide-over card (like in Maps or Stocks) using SwiftUI
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
}
}
}
@AnirupPat
Copy link

AnirupPat commented Jan 14, 2020

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

@mshafer
Copy link
Author

mshafer commented Jan 16, 2020

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

@roman-rr
Copy link

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

@RubeDEV
Copy link

RubeDEV commented Feb 12, 2020

@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())

@sureshjoshi
Copy link

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

@Keats0206
Copy link

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.

@mshafer
Copy link
Author

mshafer commented Apr 25, 2020

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

@haydgately
Copy link

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

@mshafer
Copy link
Author

mshafer commented May 9, 2020

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/

@RubeDEV
Copy link

RubeDEV commented May 11, 2020

Here is what I achieved, suggestions are welcomed.

@haydgately
Copy link

@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

@haydgately
Copy link

@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

@RubeDEV
Copy link

RubeDEV commented May 12, 2020

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

@RubeDEV
Copy link

RubeDEV commented May 13, 2020

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

@mstoten
Copy link

mstoten commented May 19, 2020

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?

@haydgately
Copy link

@mstoten does it work well with scrollviews?

@RubeDEV
Copy link

RubeDEV commented May 27, 2020

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

@mstoten
Copy link

mstoten commented May 27, 2020

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.

@SAPIENTechnologies
Copy link

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.

@mshafer
Copy link
Author

mshafer commented Jun 7, 2020

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

@mshafer
Copy link
Author

mshafer commented Jun 7, 2020

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

@YogendraPatel
Copy link

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?

@chris-spencer
Copy link

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.

@SAPIENTechnologies
Copy link

SAPIENTechnologies commented Oct 6, 2020

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!

@chakkaradeep
Copy link

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,

@chakkaradeep
Copy link

Never mind, found your package and that works great! https://swiftpack.co/package/moifort/swiftUI-slide-over-card :)

@mshafer
Copy link
Author

mshafer commented Mar 26, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment