ui sheet presentation controller custom detent

Using a UISheetPresentationController in SwiftUI

This article explores how you can create a layered and customized sheet experience in SwiftUI.

Giovanni Monaco

During WWDC 2021 Apple has announced a new way to create a layered and customized sheet experience in UIKit. This is possible using a new UIPresentationController subclass called UISheetPresentationController .

If you want to know more about it check out the following session from WWDC 2021 which talks about how we can build a non-modal experience in our app to allow interaction with content both in a sheet and behind the sheet at the same time.

UIKit now supports medium/large detents, which allows you to create a vertically resizable sheet that only covers half the screen. This is why it is often referred to as half-modal or full-modal. if you want to know more about detens have a look at Apple’s documentation.

SwiftUI currently provides only one way to achieve a modal experience. sheet(isPresented:onDismiss:content:) is a view modifier that presents a sheet with a large detent only when a given condition is true. What we would like instead is to use the UIKit exclusive medium detent in our SwiftUI apps.

Bringing the medium detent to SwiftUI

Fortunately, the UIKit/SwiftUI integration can be easily achieved. SwiftUI can be integrated into a UIKit app using UIContainerView and UIHostingController , while UIKit can be integrated into a SwiftUI app using UIViewRepresentable .

Check out our tutorials Using a SwiftUI View in a UIKit App and Using a SwiftUI View in a UIKit App as an individual component if you want to dig deeper.

Using all of this, we have created a view modifier that allows the use of sheets with detents, so you can use the new UIKit feature focusing on using only SwiftUI in your apps.

Thanks to our code snippets you can get something like the animated image below in a few minutes. To get access to this new half-modal experience you can just copy and paste the code snippets below and use your brand new modifier sheetWithDetents(isPresented:detents:onDismiss:content:)

Let's explore together the 3 code snippets we have created to make your life as a frontend developer easier.

1. SheetPresentationForSwiftUI is a struct conforming to the UIViewRepresentable protocol. This is needed to create and manage the UIKit UISheetPresentationController in SwiftUI.

2. sheetWithDetentsViewModifier is a structure conforming to the ViewModifier protocol. This is needed to create our custom ViewModifier that emulates the structures o d already available view modifiers.

3. Finally, when working with custom modifiers, it’s usually a smart idea to create extensions of View that make them easier to use. In the code snippet below, we wrapped the sheetWithDetentsViewModifier modifier in a View extension.

Using the custom sheetWithDetents modifier

We can now use our custom sheetWithDetents(isPresented:detents:onDismiss:content:) modifier like this:

The detents property is an array of detents where the sheet may rest at. The array must have at least one element and detents must be specified in order from smallest to largest height.

In the animated image below we see what we've created, and the best part of all this is that the Xcode canvas continues to give us a preview of what we're programming in a true SwiftUI style as if there were no reference to UIKit.

Wrapping up

We explored how you can create a layered and customized sheet experience in SwiftUI, taking the best that UIKit has to offer. A few code snippets to unlock even more of SwiftUI's hidden potential.

Sign up for more like this.

Customizable sheets using UISheetPresentationController in SwiftUI

Customizable sheet presentations in SwiftUI. Using UISheetPresentationController under the hood.

• Uses the default sheet API under the hood, ensuring maximum compatibility & stability.
• Exposes the exact same API as the default SwiftUI sheet implementation.
• No hacks, follows the best practices for creating represetable views in SwiftUI.
• Configurable using view modifiers, can configure UISheetPresentationController from any child views in the presented sheet’s content view.
• Works with the interactiveDismissDisabled(_:Bool) modifier.
• Exposes all of the UISheetPresentationController configuration options.
• Track the currently selected detent using an Environment value.
• Well documented API , following a similar approach to the Developer Documentation.
• Small footprint, weighing only 34.6kB when installed via SwiftPM.

Table of Contents

Requirements, installation, documentation, known issues.

The codebase supports iOS and requires Xcode 12.0 or newer

Open your project. Navigate to File > Swift Packages > Add Package Dependency . Enter the url https://github.com/ericlewis/PageSheet and tap Next . Select the PageSheet target and press Add Package .

Swift Package Manager

Add the following line to the dependencies in your Package.swift file:

Next, add PageSheet as a dependency for your targets:

A completed example may look like this:

Example Project

If you are using Xcode 13.2.1 you can navigate to the Example folder and open the enclosed Swift App Playground to test various features (and see how they are implemented).

Presentation

PageSheet works similarly to a typical sheet view modifier.

PageSheet also supports presentation via conditional Identifiable objects.

Customization

PageSheet can also be customized using a collection of view modifiers applied to the sheet’s content.

Presentation Modifiers

These modifiers behave exactly the same way as the sheet presentation modifiers in swiftui., presents a configurable page sheet when a binding to a boolean value that you provide is true..

Use this method when you want to present a configurable sheet view to the user when a Boolean value you provide is true .

Parameters:

• isPresented : A binding to a Boolean value that determines whether to present the sheet that you create in the modifier’s content closure.
• onDismiss : The closure to execute when dismissing the sheet.
• content : A closure that returns the content of the sheet.

Presents a sheet using the given item as a data source for the sheet’s content.

Use this method when you need to present a customizable sheet view with content from a custom data source.

• item : A binding to an optional source of truth for the sheet. When item is non- nil , the system passes the item’s content to the modifier’s closure. You display this content in a sheet that you create that the system displays to the user. If item changes, the system dismisses the sheet and replaces it with a new one using the same process.
• content : A closure returning the content of the sheet.

Presentation Customization Modifiers

These modifiers only take effect when the modified view is inside of and visible within a presented pagesheet ., note: you can apply these modifiers to any view in the sheet’s view hierarchy., sets a boolean value that determines whether the presenting sheet shows a grabber at the top..

The default value is false , which means the sheet doesn’t show a grabber. A grabber is a visual affordance that indicates that a sheet is resizable. Showing a grabber may be useful when it isn’t apparent that a sheet can resize or when the sheet can’t dismiss interactively. Set this value to true for the system to draw a grabber in the standard system-defined location. The system automatically hides the grabber at appropriate times, like when the sheet is full screen in a compact-height size class or when another sheet presents on top of it.

• isVisible : Default value is false , set to true to display grabber.
• A view that wraps this view and sets the presenting sheet’s grabber visiblity.

Sets an array of heights where the presenting sheet can rest.

The default value is an array that contains the value large() . The array must contain at least one element. When you set this value, specify detents in order from smallest to largest height.

• detents : The default value is an array that contains the value large() .
• A view that wraps this view and sets the presenting sheet’s UISheetPresentationController/detents .

Sets the largest detent that doesn’t dim the view underneath the presenting sheet.

The default value is nil , which means the system adds a noninteractive dimming view underneath the sheet at all detents. Set this property to only add the dimming view at detents larger than the detent you specify. For example, set this property to medium to add the dimming view at the large detent. Without a dimming view, the undimmed area around the sheet responds to user interaction, allowing for a nonmodal experience. You can use this behavior for sheets with interactive content underneath them.

• id : An optional PageSheet.Detent.Identifier value, the default is nil .
• A view that wraps this view and sets the presenting sheet’s largest undimmed Detent identifier.

Sets the identifier of the most recently selected detent on the presenting sheet.

This property represents the most recent detent that the user selects or that you set programmatically. The default value is nil , which means the sheet displays at the smallest detent you specify in detents .

• A view that wraps this view and sets the presenting sheet’s selected Detent identifier.

Sets a Boolean value that determines whether the presenting sheet attaches to the bottom edge of the screen in a compact-height size class.

The default value is false , which means the sheet defaults to a full screen appearance at compact height. Set this value to true to use an alternate appearance in a compact-height size class, causing the sheet to only attach to the screen on its bottom edge.

• preference : Default value is false .
• A view that wraps this view and sets the presenting sheet’s prefersEdgeAttachedInCompactHeight property.

Sets a Boolean value that determines whether the presenting sheet’s width matches its view’s preferred content size.

The default value is false , which means the sheet’s width equals the width of its container’s safe area. Set this value to true to use your view controller’s preferredContentSize to determine the width of the sheet instead. This property doesn’t have an effect when the sheet is in a compact-width and regular-height size class, or when prefersEdgeAttachedInCompactHeight is false .

Sets a Boolean value that determines whether scrolling expands the presenting sheet to a larger detent.

The default value is true , which means if the sheet can expand to a larger detent than selectedDetentIdentifier , scrolling up in the sheet increases its detent instead of scrolling the sheet’s content. After the sheet reaches its largest detent, scrolling begins. Set this value to false if you want to avoid letting a scroll gesture expand the sheet. For example, you can set this value on a nonmodal sheet to avoid obscuring the content underneath the sheet.

• preference : Default value is true .
• A view that wraps this view and sets the presenting sheet’s prefersScrollingExpandsWhenScrolledToEdge property.

func preferredSheetCornerRadius(CGFloat?) -> some View

Sets the preferred corner radius on the presenting sheet..

The default value is nil . This property only has an effect when the presenting sheet is at the front of its sheet stack.

• preference : Default value is nil .
• A view that wraps this view and sets the presenting sheet’s cornerRadius .
• Largest undimmed detent seems to affect the dimming of accent color elements in parent views.
• The selectedDetentIdentifier value in Environment may not update if the selected Detent identifier is changed programmatically.

PageSheet is released under the MIT license. See LICENSE for details.

View Github

Property wrappers for using the Proximity Sensor from the SwiftUI app

A customizable drag slider swiftui view, you might also like..., fitted sheets for swiftui, native partial customizable swiftui sheets from ios 15.0, resizable swiftui sheets, subscribe to ios example.

Get the latest posts delivered right to your inbox

A weekly blog about Swift, iOS and Xcode Tips and Tricks

Every Tuesday, curated Swift content from the community for free.

RocketSim: An Essential Developer Tool as recommended by Apple

SwiftLee > Swift > Presenting sheets with UIKit using a UISheetPresentationController

In this article

Presenting sheets with UIKit using a UISheetPresentationController

Presenting a sheet in uikit.

Defining detents to allow different sheet sizes

Adding a visible grabber for improved user experience.

Adjusting the height of a sheet programmatically

Featured swiftlee jobs.

• Lead Software Engineer @ M7 Health • $105K - $185K
• Senior Android Engineer @ Speechify
• Test Automation Lead, Engineering Productivity @ Ordergroove • $140K - $170K

How to Have an "Automatic Height" Custom Detent for UISheetPresentationController

Abstract: Learn how to implement an automatic height custom detent for UISheetPresentationController in your iOS app using Swift programming language. This tutorial will guide you through the steps to achieve a dynamic and responsive UI for your app's sheet presentation.

When using the UISheetPresentationController in your iOS app, you may want to have a custom height for the sheet when it is presented. However, you may also want the sheet to automatically adjust its height based on its content. This is where an "automatic height" custom detent comes in handy.

Here's how you can implement this feature in your app:

Step 1: Create a Custom Detent

The first step is to create a custom detent that will allow the sheet to automatically adjust its height based on its content. To do this, you'll need to subclass UISheetPresentationController and override the detents property.

In this example, we've created three detents: largest, medium, and smallest. The largest detent has an absolute height of 600 points, while the medium and smallest detents have estimated heights of 500 and 200 points, respectively.

Step 2: Set the Presentation Controller to Use the Custom Detent

Next, you'll need to set the presentation controller to use the custom detent you just created. To do this, you'll need to create an instance of your custom presentation controller and set it as the presentationController property of the view controller you want to present.

In this example, we're presenting a view controller using our custom presentation controller. We've set the modalPresentationStyle to .custom and then set the presentationController property of the view controller to our custom presentation controller.

Step 3: Implement Content Size Changes

Finally, you'll need to implement changes to the content size of the presented view controller to trigger the automatic height adjustment of the sheet. To do this, you'll need to override the preferredContentSize property of the presented view controller.

In this example, we've overridden the preferredContentSize property of the presented view controller to return a height of 500 points. When the content size changes, we call view.layoutIfNeeded() to trigger the automatic height adjustment of the sheet.

With these three steps, you can now have an "automatic height" custom detent for your UISheetPresentationController.

Tags: :  iOS Swift UISheetPresentationController Custom Detent

Latest news

• Placing a Transparent Rectangle above a Progress Bar in Tkinter
• Troubleshooting 404 Errors in a React Application with react-router-dom
• Solving Problem with Passing Props in React-Router-Dom
• Background Photos Look Fine on Browser but Wrong on Smartphones: A Solution
• Iterating Object Key-Value Pairs in Array: A Comprehensive Guide
• Error Compiling Android AOSP: No Config File Found
• Inserting an Image Rectangle with Tkinter: A Step-by-Step Guide
• AWS Management Console vs AWS Portal: A Comparison for Effective Resource Management
• Understanding Keras Model Optimization and Transfer Learning with Quantization-Aware Training
• Update UI: Composable ViewModels and Mutable State Variables
• Implementing Scroll Trigger Effect in Next.js using GSAP
• Connecting HTML Form to Google Sheets: Validation and Database Access
• Solving IAmProblem: Writing National Language Problem Functionality in PHP
• Resolving Simple Errors in AjaxAutocomplete jQuery Deployment
• Compiling a Minimal C Program with GCC to Reach a Size of 15KB
• Automating Click Links with Selenium and Cucumber: Unclicked Links and New Pages
• Oracle Cloud: Lost Connection to Reset Phone Authenticator
• Resolving Issue with Accessing Raw Request Body in Stripe Webhook using Nest.js
• Understanding ModelContainer and Sendable Model Context in Modern Concurrency Swift
• Resolving 'src.empty() function cv::cvtColor' Error in OpenCV
• Resolving Log Terminal Issues when Transferring a Project from Windows to Mac in PyCharm
• Mathematical Approach to Accelerometer Auto-Calibration
• Rendering ANTD Form with DatePicker: A Simple Guide
• Custom Widget: ChoiceField in Django
• Downgrading @angular/google-maps version for Angular 14.2.6 project
• Extending PKCanvasView: Directional Content Resizing (Infinite Canvas)
• Visual Studio: Custom Cursor File and Image Tools Disabled
• Array Formula Disappears in Sorted Google Sheets: A Common Issue for Backend Developers
• Issue with Depicter sections not displaying properly in WordPress
• Google Paused Ads: Bad Links Detected on userstatics.com
• Reverting Versioned Deletions in S3 Bucket: Keeping Deleted Files
• Resolving 'SDL2.framework damaged not opened' error in CLion on macOS
• Azure DevOps Webhook Not Triggered: Work Item Removal
• Developing an API Gateway Microservice in Java: Managing Users, Industries, and Permissions
• Next.js 13: Images Not Displaying in Certain Components with Middleware

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

Custom detents in UISheetPresentationController

iMinichrispy/UISheetPresentationControllerCustomDetent

Folders and files, repository files navigation, uisheetpresentationcontrollercustomdetent.

Adds support for specifying custom detents in UISheetPresentationController . Note: This solution relies on a private API, which may break in future iOS releases.

UISheetPresentationControllerCustomDetent is licensed under the MIT License. See the LICENSE file for more info.

• Objective-C 66.8%
• Swift 33.2%

• Patio Furniture
• Outdoor Dining Furniture
• Outdoor Lounge Furniture
• Outdoor Chairs
• Adirondack Chairs
• Outdoor Bar Furniture
• Outdoor Benches
• Wall Lights & Sconces
• Outdoor Flush-Mounts
• Landscape Lighting
• Outdoor Flood & Spot Lights
• Outdoor Decor
• Outdoor Rugs
• Outdoor Cushions & Pillows
• Patio Umbrellas
• Lawn & Garden
• Garden Statues & Yard Art
• Planters & Pots
• Outdoor Sale
• Trending in Outdoor
• View All Outdoor
• 8 x 10 Rugs
• 9 x 12 Rugs
• Hall & Stair Runners
• Home Decor & Accents
• Pillows & Throws
• Decorative Storage
• Faux Florals
• Wall Panels
• Window Treatments
• Curtain Rods
• Blackout Curtains
• Blinds & Shades
• Rugs & Decor Sale
• Trending in Rugs & Decor
• View All Rugs & Decor
• Pendant Lights
• Flush-Mounts
• Ceiling Fans
• Track Lighting
• Wall Lighting
• Swing Arm Wall Lights
• Display Lighting
• Table Lamps
• Floor Lamps
• Lamp Shades
• Lighting Sale
• Trending in Lighting
• View All Lighting
• Bathroom Remodel
• Kitchen Remodel
• Kitchen Faucets
• Kitchen Sinks
• Major Kitchen Appliances
• Cabinet Hardware
• Backsplash Tile
• Mosaic Tile
• Wall & Floor Tile
• Accent, Trim & Border Tile
• Whole House Remodel
• Heating & Cooling
• Building Materials
• Front Doors
• Interior Doors
• Home Improvement Sale
• Trending in Home Improvement
• View All Home Improvement
• Cups & Glassware
• Kitchen & Table Linens
• Kitchen Storage and Org
• Kitchen Islands & Carts
• Food Containers & Canisters
• Pantry & Cabinet Organizers
• Kitchen Appliances
• Gas & Electric Ranges
• Range Hoods & Vents
• Beer & Wine Refrigerators
• Small Kitchen Appliances
• Cookware & Bakeware
• Tools & Gadgets
• Kitchen & Tabletop Sale
• Trending in Kitchen & Tabletop
• View All Kitchen & Tabletop
• Storage & Organization
• Baby & Kids

• View all photos
• Dining Room
• Breakfast Nook
• Family Room
• Bed & Bath
• Powder Room
• Storage & Closet
• Outdoor Kitchen
• Bar & Wine
• Wine Cellar
• Home Office
• Popular Design Ideas
• Kitchen Backsplash
• Deck Railing
• Privacy Fence
• Small Closet
• Stories and Guides
• Popular Stories
• Renovation Cost Guides
• Fence Installation Cost Guide
• Window Installation Cost Guide
• Discussions
• Design Dilemmas
• Before & After
• Houzz Research
• View all pros
• View all services
• View all products
• View all sales
• Living Room Chairs
• Dining Room Furniture
• Coffee Tables
• Home Office Furniture
• Join as a Pro
• Interior Design Software
• Project Management
• Custom Website
• Lead Generation
• Invoicing & Billing
• Landscape Contractor Software
• General Contractor Software
• Remodeler Software
• Builder Software
• Roofer Software
• Architect Software
• Takeoff Software
• Lumber & Framing Takeoffs
• Steel Takeoffs
• Concrete Takeoffs
• Drywall Takeoffs
• Insulation Takeoffs
• Stories & Guides
• LATEST FROM HOUZZ
• HOUZZ DISCUSSIONS
• SHOP KITCHEN & DINING
• Kitchen & Dining Furniture
• Sinks & Faucets
• Kitchen Cabinets & Storage
• Knobs & Pulls
• Kitchen Knives
• KITCHEN PHOTOS
• FIND KITCHEN PROS
• Bath Accessories
• Bath Linens
• BATH PHOTOS
• FIND BATH PROS
• SHOP BEDROOM
• Beds & Headboards
• Bedroom Decor
• Closet Storage
• Bedroom Vanities
• BEDROOM PHOTOS
• Kids' Room
• FIND DESIGN PROS
• SHOP LIVING
• Fireplaces & Accessories
• LIVING PHOTOS
• SHOP OUTDOOR
• Pool & Spa
• Backyard Play
• OUTDOOR PHOTOS
• FIND LANDSCAPING PROS
• SHOP LIGHTING
• Bathroom & Vanity
• Flush Mounts
• Kitchen & Cabinet
• Outdoor Wall Lights
• Outdoor Hanging Lights
• Kids' Lighting
• Decorative Accents
• Artificial Flowers & Plants
• Decorative Objects
• Screens & Room Dividers
• Wall Shelves
• About Houzz
• Houzz Credit Cards
• Privacy & Notice
• Cookie Policy
• Your Privacy Choices
• Mobile Apps
• Copyright & Trademark
• For Professionals
• Houzz vs. Houzz Pro
• Houzz Pro vs. Ivy
• Houzz Pro Advertising Reviews
• Houzz Pro 3D Floor Planner Reviews
• Trade Program
• Buttons & Badges
• Your Orders
• Shipping & Delivery
• Return Policy
• Houzz Canada
• Review Professionals
• Suggested Professionals
• Accessibility
• Houzz Support
• COUNTRY COUNTRY

Custom Ironworkers in Elektrostal'

Location (1).

• Use My Current Location

Popular Locations

• Albuquerque
• Cedar Rapids
• Grand Rapids
• Indianapolis
• Jacksonville
• Kansas City
• Little Rock
• Los Angeles
• Minneapolis
• New Orleans
• Oklahoma City
• Orange County
• Philadelphia
• Portland Maine
• Salt Lake City
• San Francisco
• San Luis Obispo
• Santa Barbara
• Washington D.C.
• Elektrostal', Moscow Oblast, Russia

Professional Category (1)

• Accessory Dwelling Units (ADU)

Featured Reviews for Custom Ironworkers in Elektrostal'

What does an ironworker do, questions to ask prospective ironwork companies:, business services, connect with us.