Present Custom Bottom Sheet in iOS 15: UISheetPresentationController

In this article we will discuss and learn iOS 15’s UISheetPresentationController which is used to display bottom sheet. The article also contains a sample link to project’s source code with all possible combinations and properties that can be applied to UISheetPresentationController.

Adding Sheet Detents

By defining the detents property, you can define the sheet presentation controller’s size. Here is an illustration demonstrating how to modify the size of the bottom sheet:

if let sheet = viewController.sheetPresentationController {
    sheet.detents = [ .medium(), .large() ]
}

The array of heights that a sheet can rest at are specified by the detents attribute. To display a sheet that is half the height of the screen, use the .medium() function. Use the .large() detent to display a sheet at its full height.

In this instance, the sheet first occupies the bottom half of the screen and then sheet will fully extend after you drag the view controller.

We can also write custom detent as below and apply the same:

let smallId = UISheetPresentationController.Detent.Identifier("small")
  let smallDetent = UISheetPresentationController.Detent.custom(identifier: smallId) { context in
  return 120
}

sheet.detents = [ smallDetent, .medium() ]

Show the Sheet Grabber or Handle

The UISheetPresentationController class offers a number of options for additional customisations in addition to regulating the sheet’s size.

For example, to show a grabber at the top of the sheet, you can set the prefersGrabberVisible property to true:

sheet.prefersGrabberVisible = true

Adding Corner Radius

You can also modify the corner radius of the sheet by using the preferredCornerRadius attribute. A larger value offers you corners with greater rounding:

sheet.preferredCornerRadius = 32

Resources

The sample project is available on GitHub. I hope you’ve found this tutorial useful, thanks for reading!