Mimicking A Bootstrap Modal in iOS - Digital Leaves
2539
page-template-default,page,page-id-2539,qode-social-login-1.0,qode-restaurant-1.0,ajax_fade,page_not_loaded,,select-theme-ver-4.1,wpb-js-composer js-comp-ver-5.2,vc_responsive

Segues and Navigation in Swift. Push, Modals and Exit Segues. Digital Leaves. Define Segues Programmatically, pass data to destination view controllers. The Unwind Segue. Bootstrap Modal.Welcome back to the “Segues and Navigation in iOS” tutorial series. In the previous episodes, we learned to define segues programmatically. In this episode, we will learn how to mimic a bootstrap modal in iOS.

Even though it might not seem very native-looking, this style for presenting modal view controllers is very popular in iOS, and many well-known apps use it coherently for their user experience.

Mimicking a Bootstrap Modal in iOS

As you might know, bootstrap modal dialogs appear on top of the current view being shown, with an overlay. In order to clone that behavior in iOS, we don’t even need to create the segue via the Interface Builder. In fact, all we need to do is instantiate the destination view controller and trigger the segue programmatically. Let’s have a look at how to do that programmatically.

Designing our destination view controller

First, let’s create the modal view controller that will be displayed. Add a new view controller, and change the background of its main view to black with an opacity (alpha) of 75%. Setting this semi-transparent background is important to allow the previous view controller to be visible below our modal.

Next, add a button and pin it to all edges, removing its title. The result should be an invisible button covering the whole view.

Then, add a white view, centered, and set its size so that it looks nice to you. Mine is 250 x 220. We will call this view “container view”, as it contains the equivalent of the modal body in a bootstrap modal.

Finally, add a label and a button to this view. You should end up with a configuration similar to the one depicted in the figure below:

Digital Leaves. Define Segues Programmatically. Segue and View Controllers Life Cycle.

Add an outlet for the label called “messageLabel”, and a String variable called message, initialized with the text shown in the image.

For a better appearance, we can create an outlet for the view containing the label and the button, and round its corners.

Then, add an IBAction for both the full screen invisible button and the button below the label. We will use that action to close (dismiss) the modal and get back to the presenting view controller.

Dismissing The Modal View Controller

So, how do we close the view controller and go back to the previous one? In a view controller that’s been presented modally, we use the method dismiss(animated:completion:).

The first parameter indicates that you want to dismiss the view controller with a nice animation. This is usually a good idea.

The second is a block that will be called when the view controller has been dismissed. Use this block to do stuff that needs to be done when you are absolutely sure that the view controller has been dismissed.

Thus, we can define our closeThisViewController as follows:

Setting An Identifier To Our Destination View Controller

As we did in the previous episode, we need to set a storyboard identifier for our view controller. This identifier will allow us to instantiate the view controller in code later.

Finally, let’s show the modal view controller with a bootstrap modal appearance.

Showing The Modal View Controller

In order to show the view controller, we will add a button in our origin view controller that triggers the process programmatically. Add a button to the initial view controller, set a proper title, and add an IBAction for it called “showBootstrapStyleModal”.

Once the action is ready, the steps for showing the view controller on top of our current one in a bootstrap modal style are the following:

  1. First, we instantiate our modal view controller. In order to do that, we will use UIStoryboard’s method instantiateViewControler(withIdentifier:), using the identifier we did set earlier.
  2. Then, if we were able to instantiate it, we set some properties that will give us that bootstrap modal appearance.
  3. Finally, we call present(viewController:animated:completion:) to actually segue to the modal view controller. Both animated and completion have the same meaning that in the “dismiss” function.

Notice how we are also passing a parameter to the destination view controller: the message to show.

Let’s analyze the options we define for our destination view controller in order to show it like a bootstrap model.

Presentation And Transition Parameters For A Bootstrap Modal Appearance

In order to get our desired bootstrap modal appearance, we have to set these parameters:

modalPresentationStyle

This parameter defines how a modally presented view controller is displayed onscreen. “Over Current Context” means that the views from our previous view controller will not be removed from the hierarchy when we present our modal view controller.

modalTransitionStyle

This property specifies the animation (transition) from the origin to the destination view controller. “Cross Dissolve” creates a fade-in effect quite similar to the presentation of a bootstrap modal.

providesPresentationContextTransitionStyle

When set to true, this property indicates that we want to define the way in which the presentation of the new view controller will take place.

definesPresentationContext

Setting this property to true will indicate that we want to present our new view controller covering the previous one, defining the presentation context.

Even though you don’t really need to learn the meaning of all these parameters, it’s always nice to know their meaning. We can get some interesting results by just altering these parameters and experimenting with different presentations and transitions.

Our Bootstrap Modal View Controller In Action

Digital Leaves. Define Segues Programmatically. Segue and View Controllers Life Cycle. Bootstrap Modal in iOS.Time to run the code and perform the segue. The result is a beautifully presented modal with a nice overlay, like the one shown in the figure.

Notice how the small details here really matter.

First, the background of the presented view controller, acting as an overlay. You can test different values and play with opacity and color.

Second, adding the corner for the borders really help. In my tests, values between 4.0 and 8.0 offer the best results.

Next, the size of the container view. I did set some fixed values here, but sometimes it’s useful to set a proportional width. Probably around 2/3 of the main view. Then, set a nice aspect ratio for the view to always display similarly, no matter the device.

Where To Go From Here

In this episode of “Segues and Navigation in iOS”, we learned to mimic the appearance of a bootstrap modal in iOS. As a result, the segue to the destination view controller will show it on top of our current view controller with a nice overlay. We also added some buttons and appearance tweaks to make it look and behave like a bootstrap modal.

I really hope you find it useful and include it in your applications. Next, we will be talking about the unwind segues, and how to get back to a distant view controller in one step.

As always, you can download the code from my Github repository.

Before you continue...

Hi there! I created the Digital Tips List, the newsletter for Swift and iOS developers, to share my knowledge with you.


It features exclusive weekly tutorials on Swift and iOS development, Swift code snippets and the Digital Tip of the week.


Besides, If you join the list you'll receive the eBook: "Your First iOS App", that will teach you how to build your first iOS App in less than an hour with no prior Swift or iOS knowledge.

I hate spam, and I promise I'll keep your email address safe.