How to Create an Interactive Bottom Sheet in Swift 5

Using containers and child view controllers

Photo by Amirmahdi Kazemnejad on Unsplash

In this article, we will learn how to create a reusable UI element — a bottom sheet.

At the end of the tutorial, you will have a finished component you can easily copy and paste into your app and use to suit your needs.

This is what we are going to build:

In short, this is what you will master after completing this tutorial:

• Container and child view controllers — get one step closer to following a scalable MVC architecture approach
• UIPanGestureRecognizer — use a handy gesture and leverage its velocity and translation properties
• Constraint animation — move any UI element smoothly

You will find the full source code of the project at the end of the article.

Let’s Start

First, we need to create a generic BottomSheetContainerViewController that will contain a content view controller and a bottom sheet view controller as children:

As we can see, both Content and BottomSheet types have to be UIViewControllers, which means we will be able to specify any custom UIViewController either as Content or BottomSheet. You will see this later when we start using the BottomSheetContainerViewController in an example.

Now that we have Content and BottomSheet view controllers as children, let’s add some required properties. In this step, we will create two:

• A BottomSheetConfiguration struct that will signify the total height and the initial offset of the bottom sheet
• A BottomSheetState enum, which manages the state of the bottom sheet. It has the .initial and .full cases: