ui sheet presentation controller

How to present a Bottom Sheet in iOS 15 with UISheetPresentationController

A bottom sheet usually refers to a UI anchored to the bottom of the screen with content that usually supplements the screen's primary UI region. As screen size keeps increasing year over year, this UI component becomes more popular. Even Apple uses this UI in their app, such as Map, Find My, and Photos, but they don't provide any public API for us and keep this to themself for years. In iOS 15, we finally have a public API to present a bottom sheet.

Basic Usage

Apple treats a bottom sheet as another size of sheet presentation . Since it is a sheet presentation, you need two things to enjoy this new bottom sheet presentation.

• Set modalPresentationStyle to sheet. We have two options, .formSheet and .pageSheet .
• Set the size of the sheet. .medium() is the size you want to present a bottom sheet style presentation.

You shouldn't need to do anything for step one since the default modal presentation style is .pageSheet . For step two, you can set it via the new property in a view controller, sheetPresentationController .

1 You don't need this line, since the default value of modalPresentationStyle is .pageSheet . I want to make it explicit in our first encounter with this new style. 2 You get sheetPresentationController instance from the view controller that you about to present. In this case, it is navigation controller, not the root view controller ( DetailViewController ). sheetPresentationController will be nil if the modalPresentationStyle is not .formSheet or .pageSheet . 3 Set the supported size of a sheet. .medium() is the size you want to present a bottom sheet style presentation. 4 Present it as usual.

With a few lines of code and you get a bottom sheet functionality.

As you can see, all we need is to set supported sizes to a presented view controller and present it as usual.

You can easily support sarunw.com by checking out this sponsor.

Tiny OCR: Extract text from image directly from your mac.

UISheetPresentationController

UISheetPresentationController exposes many properties that we can use to tweak behaviors and appearances of a bottom sheet. I will show you some of them.

We specified the size that we want our sheet to support in detents property.

For me, "detent" is a weird term to describe the size of a sheet, but after I know what it means, it kind of makes sense. "Detent" is a term used in the machinery world to describe a mechanism that temporarily keeps one part in a certain position and can be released by applying force to one of the parts.

The term aligns very well with the description of UISheetPresentationController.Detent . Apple describes it as an object that represents a height where a sheet naturally rests . You can change the resting position by applying force (drag gesture) .

Here is a youtube video of a ball detent pin. This should give you an idea, what detent is all about.

Enough for machinery. Let's get back to the iOS world. We have only two types of detent at the moment (Too bad).

• .medium() .

Default (Large)

The default value of the detents is .large() . It is the full height modal sheet that we always have.

By specifying a medium detent, the sheet shows up and rest at approximately half the screen's height.

Medium and Large

detents accepts an array of heights where a sheet can rest. If you specified both medium and large, you could drag the sheet to rest between these two positions.

The sheet shows up at the medium position, but you can change the starting position by setting selectedDetentIdentifier .

The following code will present sheet at large position.

For scrollable content, the default behavior is, scroll up will increases the detent instead of scrolling the sheet's content. So, you can't scroll your content in a medium height.

You can control this behavior with prefersScrollingExpandsWhenScrolledToEdge property, which is default to true .

To make the content scrollable in a medium detent, you have to set prefersScrollingExpandsWhenScrolledToEdge to false . But how can we change the detent height? To change the detent height in this setting, you have to drag on the navigation bar area.

Interact with content underneath

When you use a bottom sheet, you might expect users to interact with content underneath, but that isn't a default behavior. By default, the system adds a noninteractive dimming view which dismisses the sheet once users tap it.

You can change this behavior with largestUndimmedDetentIdentifier . You specified the largest detent that you doesn’t want to put a dimming view underneath to largestUndimmedDetentIdentifier . Anything larger than that will has a dimming view. So, in the current state where we only have two detents, .medium might be the only option you use.

This would make the dimming view go away for a medium detent, and you can interact with the view underneath.

Prevent dismissal

If you use a bottom sheet for a nonmodal experience (no dimming, medium detent), you might want to disable drag to dismiss to ensure the modal is always there at the bottom.

You simply set the isModalInPresentation flag to true on the presented view controller to prevent the drag gesture dismissal. In this case, a navigation controller.

Programmatically changing the size

You have two ways to control the sheet position.

Switch between available detents

If you support multiple detents, you can programmatically switch between them by setting selectedDetentIdentifier .

1 We support two detents in this case. 3 Set selectedDetentIdentifier to detent you want to change to. 2 You need to wrap it in animateChanges to make the change animated.

Change available detent

If you want to support only one detent at a time and conditionally change that, you can do it by setting new detents .

1 We set isModalInPresentation = true to prevent dismissal. I set this to true for demonstration purpose. 2 We start by support only medium detent. 3 Then, we programmatically change detents by setting a new one.

Unlike the previous method , change detents this way would prevent users from manually drag to adjust the size.

Appearance customization

Corner radius.

You can control a corner radius of a sheet with preferredCornerRadius .

You can choose to show a grabber at the top of the sheet. A grabber is a visual clue that a sheet is resizable. By setting prefersGrabberVisible to true , the grabber will show at the top of the sheet. The default value is false .

As you can see, we can modify detent behavior in many ways. It can be draggable/dismissable/static, so Apple is not opinionated about this and leaves the decision to us.

This is a welcome change for UIKit. We finally have a built-in way to display a bottom sheet style presentation in just a few lines of code. The size is still limited, and I hope we have more options to customize the detent height in the future.

You may also like

• How to create custom operators and do operators overloading in Swift 20 Jan 2021
• Bottom Sheet in SwiftUI on iOS 16 with presentationDetents modifier 18 Jul 2022
• Modality changes in iOS13 01 Sep 2019
• A new way to style UIButton with UIButton.Configuration in iOS 15 17 Jun 2021
• Dynamic button configuration in iOS 15 21 Jul 2021
• How to make a custom button style with UIButton.Configuration in iOS 15 13 Sep 2021

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter. Every Friday , you'll get a quick recap of all articles and tips posted on this site . No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

There are many ways we can satisfy a closure argument. Some of them do not even look like closure. Let's learn all of them in this article.

?? is an operator that has one specific use case. Let's find out what it is.

• Sponsorship
• Become a patron
• Buy me a coffee
• Privacy Policy

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.

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

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

The Latest AIs, every day

AIs with the most favorites on Toolify

AIs with the highest website traffic (monthly visits)

AI Tools by browser extensions

AI Tools by Apps

Discover the Discord of AI

Top AI lists by month and monthly visits.

Top AI lists by category and monthly visits.

Top AI lists by region and monthly visits.

Top AI lists by source and monthly visits.

Top AI lists by revenue and real traffic.

Learn How to Use Sheet Presentation Controller for iOS 15

Updated on Dec 10,2023

Table of Contents

Introduction, new features of ui kit, showing models with sheet presentation controller, creating a button, creating a stack view, adding constraints to the stack view, setting button configuration, adding a label, showing a sheet on button click, displaying a list of items in a table view controller, fixing scroll issue in half mode, communicating between view controllers, setting up a custom protocol, setting up the delegate, updating the label with selected item, managing different detent identifiers, adding animation to detent changes, controlling fade-in behavior.

In this article, we will explore the new features of UI Kit and focus on the Sheet Presentation Controller. We will learn how to Show models using this controller and Create a button to trigger the display of a sheet. Additionally, we will cover topics such as creating a stack view, adding constraints, configuring the button, and displaying a list of items in a table view controller. We will also address common issues like scrolling in half mode and communication between view controllers. By the end of this article, You will have a thorough understanding of these concepts and be able to implement them in your own projects.

UI Kit comes with various new features that enhance the development experience. These features include improved configuration options, primary action handling, and the ability to customize the appearance of UI elements. With the introduction of iOS 15, developers have access to a wide range of tools and functionalities that allow for more flexibility and creativity in UI design.

The Sheet Presentation Controller is a powerful tool that allows you to present views as models in your app. It provides a seamless and interactive way to display additional content or actions without interrupting the user's workflow. By using the Sheet Presentation Controller, you can easily show a sheet with a few lines of code, giving your app a more dynamic and engaging user interface.

To show a sheet, we need to create a button that triggers the presentation. In this example, we will use a UIButton with a filled background color and a title of "Show a Sheet". By configuring the button and adding it to a stack view, we can ensure proper alignment and layout on the screen. Additionally, we will set up constraints to adjust the size and position of the button within the stack view.

To add more elements to the screen, such as a label, we will use a stack view. The stack view allows us to stack multiple views vertically or horizontally, maintaining their alignment and spacing. By setting the stack view's axis to vertical and its alignment to center, we ensure that the button and label will be displayed in a column-wise fashion and centered on the screen.

To control the position and appearance of the stack view, we need to add constraints to it. By setting the stack view's translation autoresizing mask to false and adding constraints for center X, center Y, width, and Height , we can precisely position and size the stack view on the screen. These constraints ensure proper layout and responsiveness across different screen sizes and orientations.

With the introduction of iOS 15, the UIButton class comes with new configuration options. We can utilize these options to create buttons with custom styles, such as a filled background color and tint color. By configuring the button's appearance and assigning a target action for the click event, we can control how the button looks and behaves when interacted with.

In addition to the button, we can also add a label to the stack view. The label will display the text "Hello World" and can be customized further Based on your requirements. By adding the label before the button in the stack view, we ensure that it appears above the button on the screen.

To show a sheet when the button is clicked, we need to implement the button's target action and use the Sheet Presentation Controller. By creating an instance of the view controller that we want to show in the sheet and configuring the desired detent identifier (e.g., medium or large), we can control how the sheet is displayed. Finally, we can present the view controller using the present(_:animated:completion:) method.

To display a list of items in a table view controller, we need to configure the table view and populate it with data. By implementing the necessary data source and delegate methods, we can customize the appearance and behavior of the table view. In this example, we will create a simple list of 20 items and showcase how to select and display the selected item.

When displaying a sheet in half mode, there is a default behavior that prevents scrolling within the sheet's content. This can be a usability issue, especially when dealing with longer lists or large content. To overcome this limitation, we can set the preferred scrolling edge for the sheet to false, allowing scrolling even when the sheet is in half mode.

In scenarios where we need to communicate between view controllers, we can utilize a custom protocol and delegation pattern. By defining a protocol and implementing it in the presenting view controller, we can pass data and trigger actions from the presented view controller. In this example, we will implement a custom protocol to pass the selected item from the items table view controller to the presenting view controller.

To enable communication between the items table view controller and the presenting view controller, we need to define a custom protocol. The protocol will include a method that notifies the delegate when an item is selected. By conforming to this protocol, the presenting view controller can act as the delegate and receive the selected item for further processing or display.

To establish the delegate relationship between the items table view controller and the presenting view controller, we need to set the delegate property. This can be done when configuring the view controllers or before presenting the sheet. By setting self as the delegate, we ensure that the presenting view controller can receive the selected item through the delegate method.

Once the presenting view controller receives the selected item, it can update the label to display the selected item's information. By setting the label's text property to the selected item, we provide visual feedback to the user and indicate which item has been selected. This enhances the user experience and provides Context for their actions.

The Sheet Presentation Controller allows us to define different detent identifiers for the sheet. This means that we can control how the sheet is displayed and snapped to specific positions on the screen. In this example, we explore changing the detent identifier when selecting an item from the list, allowing the sheet to automatically adjust its position.

To enhance the user experience and provide a smooth transition when changing detent identifiers, we can add animation to the sheet. By calling sheet.animateChanges and setting the desired detent identifier inside the closure, we can animate the sheet's transition between different detent positions. This creates a visually appealing effect and improves the overall user interface.

By default, when the sheet is displayed in the expanded mode, the content underneath is faded to indicate that it is not interactable. However, in certain cases, such as when displaying media or interactive elements, we may want to remove this fade-in effect. By setting the largest undimmed detent identifier to the desired value, we can control the fade-in behavior and ensure the content remains visible and accessible.

In this article, we explored the new features of UI Kit, specifically focusing on the Sheet Presentation Controller. We learned how to show models using this controller, create a button to trigger the display of a sheet, and configure the appearance and behavior of UI elements. We also covered topics like scrolling in half mode, communication between view controllers, and animation of detent changes. By implementing these techniques, you can create more interactive and engaging user interfaces in your iOS applications.

The above is a brief introduction to Learn How to Use Sheet Presentation Controller for iOS 15

Let's move on to the first section of Learn How to Use Sheet Presentation Controller for iOS 15

Most people like

Find AI tools in Toolify

Join TOOLIFY to find the ai tools

Get started

• Discover Leanbe: Boost Your Customer Engagement and Product Development
• Unlock Your Productivity Potential with LeanBe
• Unleash Your Naval Power! Best Naval Civs in Civilization 5 - Part 7
• Master Algebra: Essential Guide for March SAT Math
• Let God Lead and Watch Your Life Transform | Inspirational Video
• Magewell XI204XE SD/HD Video Capture Card Review
• Discover Nepal's Ultimate Hiking Adventure
• Master the Art of Debugging with Our Step-by-Step Guide
• Maximize Customer Satisfaction with Leanbe's Feedback Tool
• Unleashing the Power of AI: A Closer Look
• Transform Your Images with Microsoft's BING and DALL-E 3
• Create Stunning Images with AI for Free!
• Unleash Your Creativity with Microsoft Bing AI Image Creator
• Create Unlimited AI Images for Free!
• Discover the Amazing Microsoft Bing Image Creator
• Create Stunning Images with Microsoft Image Creator
• AI Showdown: Stable Diffusion vs Dall E vs Bing Image Creator
• Create Stunning Images with Free Ai Text to Image Tool
• Unleashing Generative AI: Exploring Opportunities in QE&T
• Create a YouTube Channel with AI: ChatGPT, Bing Image Maker, Canva
• Google's AI Demo Scandal Sparks Stock Plunge
• Unveiling the Yoga Master: the Life of Tirumalai Krishnamacharya
• Hilarious Encounter: Jimmy's Unforgettable Moment with Robert Irwin
• Google's Incredible Gemini Demo: Unveiling the Future
• Say Goodbye to Under Eye Dark Circles - Simple Makeup Tips
• Discover Your Magical Soul Mate in ASMR Cosplay Role Play
• Boost Kidney Health with these Top Foods
• OpenAI's GEMINI 1.0 Under Scrutiny
• Unveiling the Mind-Blowing Gemini Ultra!
• Shocking AI News: Google's Deception Exposed!
• Unraveling Analog Devices Interview Puzzle
• Top 3 AMD Motherboards for RTX 4060
• Intel: The Trusted Foundation of the Cloud
• Unveiling Intel's Open Source Legacy
• Unlocking AI: Insights from Intel's AI Everywhere Head
• Unlocking Tech Insights: Edge Computing & Analytics Evolution
• Unlocking Intel's AI Strategy
• Intel Arc Desktop Lineup Leak: Big Xe vs. Big Ampere
• Unveiling Quantum Computing: A Journey into the Future
• Unveiling 12th Gen: Overclocking Intel's Powerhouse

Unlocking the Power of Intelligent Automation with chatGPTTable of Contents Introduction What is Ax

Transform Your Face Image into an AI-generated VideoTable of Contents Introduction Step 1: Selectin

End of Love: Breaking Up with My Girlfriend...Table of Contents Introduction The Goal of the Game S

The Best AI Websites & AI Tools Directory

• Most Saved AIs
• Most Used AIs
• AI Browser Extensions
• Discord of AI
• Top AI By Monthly
• Top AI By Categories
• Top AI By Regions
• Top AI By Source
• Top AI by Revenue
• More Business
• Stable Video Diffusion
• Top AI Tools
• How to boost your SQL Coding Efficiency in a Multi-Database Environment
• Unleash Your Potential: Why ITIL Certification is the Smartest Investment for Your Future
• Navigating the Web Unseen: How Dolphin Anty Shields Your Digital Identity
• Human Writing vs. AI Writing: What to Choose for College Education Needs
• Elevate Your Profits By Leveraging Coinrule's AI Trading Advantage
• A Red Carpet-Worthy Arrival At Dubai’s Most Exclusive Hotels And Resorts With Rented Lamborghini
• Design services from WhitePage: a creative approach to solving your problems
• Effortless Editing: Object Removal from Photo Techniques
• Tiktok ads spy tool Review
• Monitoring Machine Learning Models with GPU-Enhanced Cloud Services
• Privacy Policy
• [email protected]
• ai watermark remove
• ai voice noise removal
• ai voice background remover
• ai vocal remove
• ai video text remover
• ai video remove watermark
• ai content remover
• ai object removal
• ai text remover
• ai voice remover

Copyright ©2024 toolify

Follow me on social media

Using uisheetpresentationcontroller in swiftui 3.

This post applies to the version of SwiftUI that shipped with iOS 15, also known as Swift 3. To learn how you can present a bottom sheet on iOS 16 and newer, take a look at this post .

With iOS 15, Apple introduced the ability to easily implement a bottom sheet with UISheetPresentationController in UIKit . Unfortunately, Apple didn't extend this functionality to SwiftUI just yet (I'm hoping one of the iOS 15 betas adds this...) but luckily we can make use of UIHostingController and UIViewRepresentable to work around this limitation and use a bottom sheet on SwiftUI.

In this post, I will show you a very simple implementation that might not have everything you need. After I tweeted about this hacky little workaround, someone suggested this very nice GitHub repository from Adam Foot that works roughly the same but with a much nicer interface. This post's goal is not to show you the best possible implementation of this idea, the repository I linked does a good job of that. Instead, I'd like to explain the underlying ideas and principles that make this work.

The underlying idea

When I realized it wasn't possible to present a bottom sheet in SwiftUI with the new UISheetPresentationController I started wondering if there was some way around this. I know that there are some issues with presenting a CloudKit sharing controller from SwiftUI as well, and a popular workaround is to have a UIButton in your view that presents the sharing controller.

While not strictly needed to make the bottom sheet work (as shown by the repository linked in the intro), I figured I would follow a similar pattern. That way I would be able to create a UIViewController and present it on top of the view that the button is presented in. The nice thing about that over how Adam Foot implemented his bottom sheet is that we can use the button's window to present the popover. Doing this will ensure that our view is always presented in the correct window if your app supports multiple windows. The cost is that, unfortunately, our API will not feel very at home in SwiftUI.

I figured that's ok for this writeup. If you want to see an implementation with a nicer API, look at what Adam Foot did in his implementation. The purpose of this post is mostly to explain how and why this works rather than providing you with the absolute best drop-in version of a bottom sheet for SwiftUI.

Implementing the BottomSheetPresenter

As I mentioned, a useful method to present a UICloudSharingController in SwiftUI is to present a UIButton that will in turn present the sharing controller. The reason this is needed is because, for some reason, presenting the sharing controller directly does not work. I don't fully understand why, but that's way beyond the scope of this post (and maybe a good topic for another post once I figure it out).

We'll follow this pattern for the proof of concept we're building in this post because it'll allow me to present the bottom sheet on the current window rather than any window. The components involved will be a BottomSheetPresenter which is a UIViewRepresentable that shows my button, and a BottomSheetWrapperController that puts a SwiftUI view in a view controller that I'll present.

Let's implement the presenter first. I'll use the following skeleton:

The bottom sheet presenter initializer takes three arguments, a label for the button, the detents (steps) that we want to use in our UISheetPresentationController , and the content that should be shown in the presented view controller.

Note that I had to make my BottomSheetPresenter generic over Content so it can take a @ViewBuilder that generates a View for the presented view controller. We can't use View as the return type for the @ViewBuilder because View has a Self requirement which means it can only be used as a generic constraint.

Tip: To learn more about generics, associated types, and generic constraints take a look at this post . For an introduction to generics you might want to read this post first.

The BottomSheetPresenter is a UIViewRepresentable struct which means that it can be used to present a UIKit view in a SwiftUI context.

The makeUIView method is used to create and configure our UIButton . We don't need any extra information so the makeCoordinator method returns Void , and the updateUIView method can remain empty because we're not going to update our view (we don't need to).

Let's fill in the makeUIView method:

The implementation for makeUIView is pretty straightforward. We assign the button 's title and add an action for touch up inside.

When the user taps this button, we create an instance of UIHostingController to present a SwiftUI view in a UIKit context, and we pass it the content that was created by the initializer's @ViewBuilder closure. After that, we create an instance of BottomSheetWrapperController . This view controller will receive the UIHostingController as its child view controller, and it's the view controller we'll present. We need this extra view controller so we can override its viewDidLoad and configure the detents for its presentationController (remember how we presented a bottom sheet in UIKit ?).

The following lines of code add the hosting controller as a child of the wrapper controller, and I set up the constraints using a convenient method that I added as an extension to UIView . The pinToEdgesOf(_:) function I added in my UIView extension configures my view for autolayout and it pins all edges to the view that's passed as the argument.

Once all setup is done, I present my wrapper controller on the button's window. This will make sure that this implementation works well in applications that support multiple windows.

Lastly, I return the button so that it can be presented in my SwiftUI view.

Before we look at the SwiftUI view, let's look at the implementation for BottomSheetWrapperController .

Implementing the BottomSheetWrapperController

The implementation for the BottomSheetWrapperController class is pretty straightforward. It has a custom initializer so we can accept the array of detents from the BottomSheetPresenter , and in viewDidLoad we check if we're being presented by a UISheetPresentationController . If we are, we assign the detents and set the grabber to be visible.

Note that you might want to make the grabber's visibility configurable by making it an argument for the initializer and storing the preference as a property on the wrapper.

I'm not going to go into the details of how this view controller works in this post. Please refer to the UIKit version of this post if you want to know more (it's very short).

Using the BottomSheetPresenter in SwiftUI

Now that we have everything set up, let's take a look at how the BottomSheetPresenter can be used in a SwiftUI view:

That doesn't look bad at all, right? We create an instance of BottomSheetPresenter , we assign it a label, pass the detents we want to use and we use regular SwiftUI syntax to build the contents of our bottom sheet.

I agree, it doesn't feel very at home and it would be nicer to configure the bottom sheet with a view modifier. This is exactly what Adam Foot implemented in his version of BottomSheet . The only downside to that version is that it grabs the first window it can find to present the sheet. This means that it wouldn't work well in an application with multiple windows. Other than that, I really like his custom SwiftUI modifier, and I would recommend you take a look at the implementation if you're curious.

You'll find that it's very similar to what you learned in this post, except it has a bunch more configuration that I didn't include during my exploration to see if I could get this bottom sheet to work.

Keep in mind, this post isn't intended to show you the ultimate way of achieving this. My goal is to help you see how I got to my version of using UISheetPresentationController in SwiftUI through experimentation, and applying what I know from presenting a UICloudSharingController in SwiftUI.

Subscribe to my newsletter

Learn everything you need to know about Core Data and how you can use it in your projects with Practical Core Data. It contains:

• Twelve chapters worth of content.
• Sample projects for both SwiftUI and UIKit.
• Free updates for future iOS versions.

The book is available as a digital download for just $34.99!

• Telegram Channel for iOS Developers
• Telegram Chat for iOS Developers

UISheetPresentationController as in the Maps application

In iOS 15, there are sheet-controllers. These are modal controllers that use a gesture to change height. You've seen these controllers in the «Maps» and «Stocks» apps.

Help in chat on Telegram for iOS developers

Quick Start

Switching between detents by code, lock dismiss, content scrolling, album orientation, dimmed background, corner radius.

When I was young, I made package with similar behavior on snapshots. In iOS 13 Apple introduced updated modal controllers, and with iOS 15 you can control their height:

To show the default sheet-controller, use the code:

This is a regular modal controller that has been added complex behavior. You can wrap the sheet-controller into a navigation controller, add a header and bar buttons. If the project supports previous versions of iOS, wrap the code with sheetController in if #available(iOS 15.0, *) {} .

Detent - the height to which the controller aspires. Similar to situations with scroll paging or when the electron is not at its energy level.

There are two detents available:

• .medium() half the size of the screen
• .large() repeats the large modal controller.

If you leave only .medium() , the controller will open at half of the screen and will not rise higher. You can't set your own height in pixels, you choose only from the available detents. By default, the controller is shown with the .large() detent.

The available detents are indicated as follows:

If you specify only one detent, you cannot switch between them with a gesture.

To go from one detent to another, use the code:

It is possible to call without animation block. It is also possible to switch the detent without being able to change it, to do this, change the available detents:

The controller will switch to .large() -detent and will no longer allow the gesture to switch to .medium() .

If you want to lock a controller in one detent without being able to close it, set isModalInPresentation to true for the parent. In the example, the parent is the navigation controller:

If .medium() -detent is active and the controller content is scrolling, the modal controller will go to .large() -detent when scrolling up and the content will stay in place.

To scroll content without changing the detent, specify these parameters:

Scrolling up will now work for content scrolling.

By default, the sheet-controller in landscape orientation looks like a normal controller. The point is that .medium() -detent is not available, and .large() is the default mode of the modal controller. But you can add edge indentation.

This is what it looks like:

To make the controller take the prefered size, set widthFollowsPreferredContentSizeWhenEdgeAttached to true .

If the background is dimmed, the buttons behind the modal controller will not be clickable. To allow interaction with the background, you must remove the dimming. Specify the largest detent that doesn't need to be dimmed. Here's the code:

It is specified that the .medium will not dim, but anything larger will. It is possible to remove the dimming for the largest detent as well.

To add an indicator on top of the controller, set .prefersGrabberVisible to true . By default, the indicator is hidden. The indicator has no effect on safe area and layout margins.

You can control the edge rounding of the controller. Set a value for .preferredCornerRadius . The rounding changes not only for the presented controller, but also for the parent.

In the screenshot I set the corner radius to 22 . The radius remains the same for the .medium detent.

How to clear UserDefaults and Realm for Mac Catalyst

How to clear data for Catalyst application including AppGroup, Realm and UserDefaults

Alternative icons for Product Page Optimization tests

How to add alternative icons for A/B tests on the app page in the App Store

WWDC 2021 iOS 15- Funny Tricks on UISheetPresentationController

New presentation controller with two detents.

Myrick Chow

A pple releases a lot of new updates to iOS and Swift programming language in the WWDC 2021. One of the eye-catching UI enhancements is the UISheetPresentationController . It provides a brand new way for presenting an UIViewController . It can be displayed in either half-screen or full-screen mode. You can also customise the corner radius, grabber visibility and UI shown in compact mode, etc.

During testing with the new UISheetPresentationController , I encountered two interesting tricky parts about the lifecycle and background of the presented UIViewController and will share them with you in this blog post. Let’s get started.

Simple Setup

The simplest setup for a UISheetPresentationController is just configuring its detents property to support the medium one. See line 7.

By default, UISheetPresentationController is only configured with one detent — large one. That means the presented UIViewController will be presented just like the one presented in iOS 14 or before. It occupies almost all of the screen height.

In order to show the presented UIViewController in half-screen mode, we have to add another detent — medium to the detents parameter of the UISheetPresentationController . The first element in detents is the default detent of the UISheetPresentationController .

Tricky Part 1) Weird UIViewController lifecycle

As highlighted in the above gif animation, the viewWillDisappear callback is triggered once the user drags the grabber downwards when the presented UIViewController is in the medium detent level. However, viewDidAppear callback is triggered when the user releases his/her finger, and the presented UIViewController returns back to its medium detent.

In other words, you have to bear in mind if you have any logic included at the viewDidAppear callback since it can be triggered multiple times in a single presentation.

According to the Apple Official Documentation : viewWillDisappear is called in response to a view being removed from a view hierarchy. This method is called before the view is actually removed and before any animations are configured. viewDidAppear notifies the view controller that its view was added to a view hierarchy.

Add a Grabber

A grabber is a small grey rounded UIView located at the top of the presented UIViewController (highlighted at the above screenshot) to tell the user it is a draggable sheet. In my opinion, it is a nice widget when both medium and large detents are set, which means there are halfly expanded and fully expanded states.

However, Apple does not allow developers to customise the colour and dimension of the grabber. It must be in grey colour.

Enable scrolling in the embedded UIScrollView

When you add a vertical UIScrollView in the presented UIViewController , you will find that the scrolling action at the UIScrollView will be intercepted by the UISheetPresentationController when it is in medium detent. In other words, the UIScrollView is only scrollable when the UISheetPresentationController is in its large detent.

Therefore, we have to set the prefersScrollingExpandsWhenScrolledToEdge to true in order to enable the user to use the UIScrollView at medium detent.

User Interaction with the Presented UIViewController

By default, the presenting UIViewController will be wrapped by a UIDimmingView when presented UISheetPresentationController is in its middle detent. When the user clicks on the UIDimmingView , the presented UIViewController will be dismissed at the same time.

However, when you want to remove this UIDimmingView and allow the user to interact with the widgets at the presenting UIViewController , you can set the largestUndimmedDetentIdentifier to medium .

Corner Radius

Corner radius setting refers to the top left and top right corners of the presented UIViewController . The default value is 10.0 point. Setting this property is self-explanatory, but the underlying UI change can cause a tricky issue on the presented UIViewController when the background colour contains transparency. See below.

Tricky Part 2) Weird Shadow in an UIDropView?

There is a UIDropView placed under the presented UIViewController and it is in grey colour by default. If you customise the corner radius, it also changes the corner radius of the UIDropView and thus causes an abnormal bright bottom-left and bottom-right corners highlighted by green arrows in the above screenshot. Since the UIDropView is private in the iOS SDK, there is no public API for configuring it. I Hope Apple will fix this issue or disclose a new API for setting it in the coming future 😉 !

Change Selected Detent with Pretty Animation

By default, all changes of the UISheetPresentationController configurations do not cause any animation. For example, changing the selectedDetentIdentifier will only cause the presented UIViewController to change its size instantly. See the left part of the gif.

To provide a better user experience, we should wrap the codes for changing configurations in the animateChanges callback. iOS will handle the animation for us.

Handling at iPhone Compact (Horizontal) mod

What will happen in iPhone compat mode? There will be no middle detent and the presented UIViewController will be presented in full-screen mode instead. See the image shown above. Even the user scrolls down within the UIViewController area, it will not be dragged or dismissed. It is recommeded to add a dismiss button to the presented UIViewController instead.

So, what if we want to provide a drag-to-dismiss feature for users to provide a better user experience? We can simply enable the prefersEdgeAttachedInCompactHeight property and the presented UIViewController will be placed within the safe area instead. See the above screenshot.

UISheetPresentationControllerDelegate

How do we manage the current detent selected by the user? Would you like to show different widgets in different detent modes? Apple provides the UISheetPresentationControllerDelegate for the app to get notified.

According to Apple Official Documentation : The system calls this method after a sheet’s selectedDetentIdentifier changes in response to user interaction. The system doesn't call this after you change selectedDetentIdentifier programmatically.

❗️Be aware to handle the case when the selected detent is changed by the app instead of the user!

UISheetPresentationController is a new type of UIPresentationController for presenting a UIViewController in sheet form. Here are the properties:

• Two supported detents — medium and large
• Grabber visibility
• Enable/Disable scrollable UIScrollView in medium detent
• User interaction with presenting UIViewController in medium detent
• Corner radius
• Animation during changing the configurations of UISheetPresentationController
• UI in compact mode

There are two found tricky parts in using UISheetPresentationController :

• viewDidAppear callback can be called multiple times in a single presentation
• A UIDropView is placed under the presented UIViewController . When the corner radius is customised, the corner of UIDropView causes an abnormal shadow shown at the background of the presented UIViewController .

Customize and resize sheets in UIKit - WWDC21 - Videos - Apple Developer

Discover how you can create a layered and customized sheet experience in uikit. we'll explore how you can build a….

developer.apple.com

UISheetPresentationController — Apple Developer Documentation

Written by Myrick Chow

Mobile Lead @REAL Messenger Inc. https://real.co Focus on Android & iOS Native programming.

More from Myrick Chow and ITNEXT

QA Testing — What is DEV, SIT, UAT & PROD?

How to ensure your software is in a good quality what kind of process do you need to test your codes click to see more.

Alexis Ducastel

Benchmark results of Kubernetes network plugins (CNI) over 40Gbit/s network [2024]

This article is a new run of my previous benchmark (2020, 2019 and 2018), now running kubernetes 1.26 and ubuntu 22.04 with cni version….

Héla Ben Khalfallah

Frontend Development Beyond React: Svelte (1/3)

Delving into svelte, solid, and qwik.

Swift iOS BackgroundTasks framework — Background App Refresh in 4 Steps

Ios 13 introduced a brand new framework — backgroundtasks for handling the background task when app is sent to background. let’s see more~, recommended from medium.

Ruslan Alikhamov

The Qonto Way

How one line of code led to +50% faster Swift compilation for tens of thousands of teams

Can one line of code change the ios development industry.

Ameer Omidvar

Apple’s all new design language

My name is ameer, currently the designer of sigma. i’ve been in love with design since i was a kid. it was just my thing. to make things….

Apple's Vision Pro

Tech & Tools

Icon Design

Productivity

How to setup Launch Screen on SwiftUI iOS 16 for iOS Developer

This section use english for share..

Kamal Bhardwaj

iOS 17: Unveiling SwiftUI ScrollView Modifiers

Introducing the exciting updates in swiftui for wwdc23: elevating the development and user experience.

Stackademic

Use UIPageControl and UIScrollView programmatically in Swift

Mahyar McDonald

Why Ollie is moving away from SwiftUI to UIKit

A few months ago, we made the decision to move away from swiftui & swift concurrency for our application and to move the core of our app….

Text to speech