Landscape

Landscape!

Check out the new .onLayoutForSizeClass modifier!

With .onLayoutForSizeClass you can update your state variables to layout your drawer for landscape.

Resting heights are now binding!

This means you can keep a state variable to contain your view heights. Instead of using the old .locked modifier, just change the resting heights parameter to a single height.

New Documentation Layout

The Readme is more concise, but it now contains links to other markdown files for Examples and Reference.

[Beta] Landscape

[Beta] Landscape

Introducing behaviors for landscape and split view orientations

New View Modifiers

Alignment

Defines the horizontal alignment for the drawer. The default is fullscreen.

public enum DrawerAlignment {
    case leading, center, trailing, fullscreen
}

Usage

Drawer(heights: [100, 340]) {
    Color.blue
}
.width(.constant(340))
.alignment($alignment)

Width

Defines a width for the drawer when not in fullscreen alignment.

Usage

Drawer(heights: [100, 340]) {
    Color.blue
}.width(.constant(340))

OnLayoutForSizeClass

A callback to receive updates when the drawer is laid out for a new size class.

This closure is executed every time the device layout changes (portrait, landscape, and split view).
Use this to modify your view when the drawer's layout changes.

Usage
Alter the resting heights and alignment when the screen layout changes.

Drawer(heights: [100, 340]) {
    Color.blue
}
.onLayoutForSizeClass { (sizeClass) in
    switch (sizeClass.horizontal, sizeClass.vertical) {
    case (.compact, .compact):
        // smaller iPhone landscape
        break
    case (.compact, .regular):
        // iPhone portrait
        // iPad portrait splitview
        // iPad landscape smaller splitview
        break
    case (.regular, .compact):
        // larger iPhone landscape
        break
    case (.regular, .regular):
        // iPad fullscreen
        // iPad landscape larger splitview
        break
    default:
        // Unknown layout
        break
    }
}

Declarative View Modifiers

🥳 New Declarative View Modifiers!

Thank you for all your support and feature requests!

New declarative view modifiers will help you customize the drawer experience. Shoutout to u/pupdogg007 for my favorite requested feature: locking the drawer.

I also spent a lot of time refining the fluidity of the drawer animations. In v0.0.2, I made the drags more responsive by toggling animation. In v0.03, after formulating a function on Desmos, I am introducing 'springiness' to the drawers when they are pulled beyond their boundaries. This animation feels more fluid by asymptotically reducing the influence of a drag.

🔒 Locked

Locks the drawer in a controlled position. When set to true, the drawer will animate into the locked height.

Lock into the current resting height

/*Drawer*/.locked($locked) { (currentPosition) in
    return currentPosition
}

🪀 Spring

Sets the springiness of the drawer when pulled past boundaries.

The user's drag displacement is transformed by a logistic curve for a natural hard-spring pull that reaches an asymptote.

/*Drawer*/.spring(20)

😴 OnRest

A callback to receive updates when the drawer reaches a new resting level. This closure is executed every time the drawer reaches a new resting hieght. Use this when you want to receive updates on the drawer's changes.

/*Drawer*/.onRest { (restingHeight) in
    print(restingHeight)
}

💥 Impact

Sets the haptic impact of the drawer when resting

/*Drawer*/.impact(.light)

Other Notes

Deprecated the init's impact parameter to prefer the declarative modifier.

Animation & Haptics

Edited Animation

The animation is now disabled when dragging for increased responsiveness, and the release animation is now a spring.

New Haptics

Haptic impact can be defined when the drawer reaches a resting height, using a UIImpactFeedbackGenerator.

Initial Release

v0.0.0

Update README.md