maustinstar/swiftui-drawer

A SwiftUI bottom-up controller, like in the Maps app. Drag to expand or minimize.

SwiftUI Drawer

A SwiftUI bottom-up controller, like in the Maps app. Drag to expand or minimize.

Contents

• Add the Package
• Basic Usage
• Examples
• Credits

Package

For Xcode Projects

File > Swift Packages > Add Package Dependency: https://github.com/maustinstar/swiftui-drawer

For Swift Packages

Add a dependency in your your Package.swift

.package(url: "https://github.com/maustinstar/swiftui-drawer.git", from: "0.1.0"),

Basic Usage

Embed your view content in a ZStack with the Drawer as the last element. The heights parameter defines a list of resting heights for the drawer.

ZStack {

    ScrollView {
        //...
    }
    
    Drawer(heights: [100, 340]) {
        Color.blue
    }.edgesIgnoringSafeArea(.vertical)
}

See the full Reference Guide.

Examples

A multi-height drawer with haptic impact.

Drawer {
    ZStack {
        
        RoundedRectangle(cornerRadius: 12)
            .foregroundColor(.white)
            .shadow(radius: 100)
        
        VStack(alignment: .center) {
            Spacer().frame(height: 4.0)
            RoundedRectangle(cornerRadius: 3.0)
                .foregroundColor(.gray)
                .frame(width: 30.0, height: 6.0)
            Spacer()
        }
    }
}.edgesIgnoringSafeArea(.vertical)
.rest(at: .constant([100, 340, UIScreen.main.bounds.height - 40]))
.impact(.light)

See more Examples

🚀 Looking for more fun SwiftUI Packages?

Take your SwiftUI apps to the next level with these Packages!

Credits

• Michael Verges - Initial work - [email protected]

swiftui-drawer's Issues

Working in xcode 13?

I am receiving the following error

Cannot convert value of type '[Int]' to expected argument type 'Binding<[CGFloat]>'

does not sync with scrollview

Scroll Gesture Distinction

Problem
When a ScrollView is embedded in the drawer, drags within the scroll view are used as scrolls and do not move the drawer. The current workaround is to have a larger "grabable" area at the top of the drawer.

Ideal Solution
When using the maps app, there is a velocity threshold. Drags below the threshold are interpreted as scrolls, while faster drags are used to move the drawer.

Suggested by u/ms4324

Cannot define dynamic height for my drawer

I want my drawer heights (resting points) to be, [100, vStackHeight], so instead of giving it a constant number, i want the second resting height to be the height of the VStack, but I couldn't achieve it even when wrapping the VStack with GeometryReader, since the GeometryReader takes the the size of its parent (the ZStack), any idea how to achieve this behaviour?

    @State var drawerHeights: [CGFloat] = [100, 200]

    var body: some View {
        Drawer(heights: $drawerHeights) {
            ZStack(alignment: .top) {
                RoundedRectangle(cornerRadius: 24)
                    .foregroundColor(.white100)
                    .shadow(radius: 10)
                
                VStack(spacing: 0) {
                    Spacer().frame(height: 40)
                        .background(Color.yellow)
                    Text("How it works")
                        .textStyle(.headlinePrimaryCenter)
                    Spacer().frame(height: 40)
                    Text("How it works")
                        .textStyle(.headlinePrimaryCenter)
                    Text("How it works")
                        .textStyle(.headlinePrimaryCenter)
                    Text("How it works")
                        .textStyle(.headlinePrimaryCenter)
                    Text("How it works")
                        .textStyle(.headlinePrimaryCenter)
                    Text("How it works3")
                        .textStyle(.headlinePrimaryCenter)
                    Text("How it works4")
                        .textStyle(.headlinePrimaryCenter)
                }
            }
        }
        .edgesIgnoringSafeArea(.vertical)
    }

Basically I want the drawer second height (rest) to be dynamic and computed based on its children's height.

Cannot import: "No such Module 'Drawer'"

I've added Drawer via SPM in Xcode 13 beta. I can't import the library:

From the syntax highlighting it seems that Xcode does import the library anyway, because it's fine with this:

Drawer(heights: [100, 340]) { ... }

I've already cleaned, quit Xcode, deleted derived data, etc.

Disable Gesture Dismissal

Use Case
Allows dismissal via a physical click of a cancel/save button

Code Implementation

Following SwiftUI declarative syntax, the method header (based on syntax of View.disabled):

public func locked(_ locked: Bool) -> Drawer<Content>

And the ideal use of the implementation could look like:

struct ContentView: View {
    
    @State var drawerLocked: Bool

    var body: some View {
        Drawer(heights: [100, 340]) {
            Color.blue
        }.locked(drawerLocked)
    }
}

UI Implementation
When locked, the view should not change its resting height when dragged.

The trivial solution is to disable the drag altogether. A more elegant design I propose is for the drawer to react as a stiff spring that only springs up and down a few pixels when attempted to drag. This already happens when you attempt to pull the drawer past the maximum height (see Drawer.springHeight).

Reasoning: Disabling the gesture altogether might seem unresponsive and could possibly frustrate a user. Using a hard-spring reaction will better convey interactivity that is purposely disabled.

Suggested by u/pupdogg007

Keyboard hides drawer

Hello,
is there a way to change the position of the drawer when the keyboard appears ?
I have a search bar on the drawer and when I click in it, the keyboard covers the drawer.

This is my Code:
I would like to use the ".onTapGesture" to bring the drawer to the top position...

This is how it looks now.

Sorry, I'm still a noob with Swift and I am just learning it now. 🤓

Drawer doesn't work in 0.1.0

Issue

The title might be a bit ambiguous, but using version 0.1.0 I just can not get the drawer to work or appear at all. Downgrading to 0.0.3 makes all my drawers work again. Not sure whether I missed something obvious, but this can be easily reproduced:

Steps to reproduce

1. Create new SwiftUI project
2. Add swiftui-drawer as package dependency
3. Add import Drawer to ContentView.swift
4. Add Drawer of choice to a ZStack in Body

issue with onDrag...

Hello,

I added the onDrag modifier to my drawer so that I could animate the image I have that is used to pull up and down the drawer, but it look like onAppear is not called.

What would be the best way to ue you package and animate the drawer image?

Give a property to set the most top view

How to make drawer can display on tabbar.
If use ZStack in tabbar. It seems to make tabbar's codes be heavy. And we have to use @environmentObject to handle the status(isPresent).
How about your idea?

Drawer offsets main view content

This is probably something I'm doing wrong rather than an issue but whatever height I set the drawer to, the content behind it is offset by that amount.
ZStack(alignment: .top){ SomeView() Drawer(heights: [100, 200]) { Color.blue } }.edgesIgnoringSafeArea(.vertical)

SomeView() will then be offset by 200

Programmatically set the current height & disable gestures

Feature Request

I'd like to be able to programmatically set the height of the drawer.
I'd also like to be able to set whether or not the drawer can be moved.. without disabling everything within the drawer.

Example use case:

A searchBar textField is tapped, then the drawer is set to the mid or high resting point (Animated).
The drawer is not able to be moved while the user is searching for something.

Potential Solution:

This can be done with a binding variable "currentHeight" or possibly a closure?
Maybe have a isDrawerMoveable variable? To disable gestures.