Duvet
An open source framework for displaying partial sheet views within iOS.
Why we built it.
As iPhone screens have become taller and content areas near the top of the screen have become harder to reach with a single hand, the use of bottom sheets as a design pattern has trended up. Popularized within the Apple Maps and Apple Shortcuts apps, along with many third-party apps, bottom sheets allow for the display of content that may not fill the entire screen while preserving the context of the underlying view that presented the overlaid sheet. Sheet views can easily be collapsed or dismissed by swiping down on the view instead of having to reach for navigation buttons at the top of view.
In lieu of a built-in, out-of-the-box native solution for this pattern from Apple, the iOS team at Livefront set out to build a reusable framework that integrates with established navigation patterns in iOS and also provides an easy way to add sheet views to an app. The goal of the framework is to support creation of sheet views from existing view controllers with minimal changes in the view itself. Our open source library, Duvet, supports different configurations for displaying fully open sheets, half open sheets, or sheets that expand to fit the size of the content in the containing view controller. All of the complexity of managing gesture recognizers, displaying different sized sheets, and accommodating scrolling are handled for you.
How it works.
The SheetViewController
is a container view controller that manages one or more
child view controllers. The configuration for how a sheet is displayed and the positions
it supports can be customized with a SheetConfiguration
object. An existing
UIViewController
can be displayed as a sheet by creating a SheetItem
which wraps the UIViewController
with its SheetConfiguration
. The SheetItem
then can be used to instantiate a SheetViewController
or pushed onto an existing SheetViewController
.
How to use it.
Using Duvet is very similar to other container view controller patterns in iOS. The API
is modeled after UINavigationController
so that a single root sheet can be presented
within a SheetViewController
and additional sheets can be pushed onto and popped
off the navigation stack.
Check out the project on GitHub for more details.
Built by Livefront.
Livefront is a digital product consultancy. We’re trusted by some of the world’s most admired companies to drive strategy, design, and engineering for their core digital experiences. They partner with us to move faster, think bigger, and design products people love.
Learn more