[ad_1]
With the discharge of SwiftUI, some individuals have requested if UIKit goes to be useless. It’s removed from useless. In iOS 15, Apple’s engineers continues to pour new options into UIKit. One of many highlights is UISheetPresentationController. This new class helps you to simply create a expandable backside sheet with just some traces of code.
If in case you have no concepts about what a backside sheet is, open the built-in Maps app to have a look. It shows a backside sheet for customers to carry out search and entry their saved places. The sheet is resizable. You possibly can drag the underside sheet to develop and collapse it. The truth is, this kind of UI sample might be present in some well-liked apps akin to Google Maps, Twitter, and Instagram.
On this tutorial, we’ll see methods to work with UISheetPresentationController and customise its properties. The demo app may be very easy with only one button. When the button is tapped, the app shows the net content material utilizing a backside sheet.
Utilizing UISheetPresentationController for Presenting a Backside Sheet
In iOS 15, UIViewController has a brand new property referred to as sheetPresentationController. For view controllers that inherit from UIViewController, you possibly can entry its sheetPresentationController property to retrieve the occasion of UISheetPresentationController for customizing its look.
You possibly can specify the scale of the sheet presentation controller by setting the detents property. Right here is an instance displaying you methods to set the scale of the underside sheet:
|
let webViewController = WebViewController()
if let sheet = webViewController.sheetPresentationController { sheet.detents = [ .medium(), .large() ] }
current(webViewController, animated: true) |
The WebViewController class is a subclass of UIViewController, so we are able to retrieve the occasion of UISheetPresentationController from the sheetPresentationController property.
The detents property specifies the array of heights the place a sheet can relaxation. You utilize .medium() to show a sheet that occupies half the peak of the display. To show a sheet at full peak, you utilize the .massive() detent.
The code pattern above specified to make use of .medium() and .massive() within the detents property. On this case, the sheet first takes up half of the display measurement. Once you drag up the net view controller, the sheet will absolutely develop.
Should you reverse the order of the values like this, the app will first show the sheet at full peak.
|
sheet.detents = [ .large(), .medium() ] |
Customizing the Sheet with Grabber
Aside from controlling the scale of the sheet, the UISheetPresentationController class gives numerous choices for additional customizations.
For instance, to point out a grabber on the high of the sheet, you possibly can set the prefersGrabberVisible property to true:
|
sheet.prefersGrabberVisible = true |
When the sheet is offered, the underlying view is dimmed routinely. If you wish to preserve it as it’s, set the worth of smallestUndimmedDetentIdentifier to .medium:
|
sheet.smallestUndimmedDetentIdentifier = .medium |
The system will not dim the underlying view when the sheet is displayed.
Customizing the Sheet for Scrolling View
Once you use a medium-sized sheet to show scrollable content material, you could expertise a minor situation. As you scroll up the content material, the sheet may also be expanded. This will not be one thing we would like. What we count on is that the scale of the sheet ought to preserve unchanged as we scroll by way of the content material.
UISheetPresentationController present a property named prefersScrollingExpandsWhenScrolledToEdge for resolving the difficulty. All it is advisable do is about the worth of the property to false:
|
sheet.prefersScrollingExpandsWhenScrolledToEdge = false |
When you made the change, you possibly can scroll by way of the content material correctly even when the sheet takes half of the display measurement. To develop the sheet, simpy drag up the grabber.
Customizing the Nook Radius
The preferredCornerRadius property permits you to change the nook radius of the sheet. The next worth offers you a extra rounded corners:
|
sheet.preferredCornerRadius = 30.0 |
Abstract
The addition of UISheetPresentationController is a welcome change for UIKit. We not have to develop our personal implementation for displaying backside sheet. It’s now really easy to use this well-liked cellular UI sample to our apps.
Founding father of AppCoda. Creator of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Observe me at Fb, Twitter and Google+.
[ad_2]
