Learn How to Use Sheet Presentation Controller for iOS 15

Table of Contents

1. Introduction
2. New Features of UI Kit
3. Showing Models with Sheet Presentation Controller
4. Creating a Button
5. Creating a Stack View
6. Adding Constraints to the Stack View
7. Setting Button Configuration
8. Adding a Label
9. Showing a Sheet on Button Click
10. Displaying a List of Items in a Table View Controller
11. Fixing Scroll Issue in Half Mode
12. Communicating Between View Controllers
13. Setting Up a Custom Protocol
14. Setting Up the Delegate
15. Updating the Label with Selected Item
16. Managing Different Detent Identifiers
17. Adding Animation to Detent Changes
18. Controlling Fade-in Behavior
19. Conclusion

Introduction

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.

New Features of UI Kit

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.

Showing Models with Sheet Presentation Controller

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.

Creating a Button

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.

Creating a 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.

Adding Constraints to the Stack View

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.

Setting Button Configuration

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.

Adding a Label

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.

Showing a Sheet on Button Click

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.

Displaying a List of Items in a Table View Controller

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.

Fixing Scroll Issue in Half Mode

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.

Communicating Between View Controllers

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.

Setting Up a Custom Protocol

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.

Setting Up the Delegate

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.

Updating the Label with Selected Item

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.

Managing Different Detent Identifiers

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.

Adding Animation to Detent Changes

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.

Controlling Fade-in Behavior

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.

Conclusion

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.