Design a Nice Horizontal Sliding Presentation for iOS Using Swift 5 | by Margels | Jul, 2022

Design Dribbble-like UIs for your iOS App — Part 1

Thank you Maria Lupan for the nice photograph in the background!

Hello there! It’s me again, with yet another tutorial for your iOS Apps. Hope you haven’t grown tired of them yet, because today I came up with a nice solution to a very common “problem” for any website, software or app: the boring, terrifying, often underestimated… instructions.

I don’t know about you, but I just have a natural aversion towards any how-to booklet and I find myself trying to avoid reading them at all costs, for no apparent reason. I do regret it later, but I still can’t help it.

It’s a good thing apps are usually intuitive enough not to need them, right? Yet sometimes, a little presentation before your user starts interacting with your app is just necessary. So what can you do to make this part a little bit more… entertaining?

I took inspiration from Anitaa Murthy’s amazing tutorial and made my own version of a sliding presentation with a moving image in the background. Read on to find out how to implement this in your app, too!

In this part of the tutorial, we will prepare our view controller using the storyboard. You can make your own code or download the following material to follow along mine:

Ready, set… go!

Step 1: pick your colors and background image

I usually start by picking my colors in the assets. For this app, I will pick a mustard shade of yellow that goes well with my background image and a dark pine shade of green for my accessories (the labels and the final button).

As for the background image, I according drew this image using Procreate on my iPad Pro, but you can use any picture you like and set your colours.

Once this first step is done, we can start working on our storyboard.

Use your new colors for the background and the tint color of your view controller. Consider doing the same for your launch screen, too, if this is going to be your initial view controller.

Now, on the most important part: the scroll view!

Step 2: set up your UIScrollView in the storyboard

Open the objects library, drag a UIScrollView in your view controller and drag its edges to cover the entire safe area of ​​your view controller.

Now that we have our scroll view, we will need to set its constraints. Connect the UIScrollView to your view controller class by control-dragging the object to your class, and name it. I will use presentationScrollView as its name.

Once you’ve done that, add the function setUpScrollView() inside your view controller class and define your scroll view’s constraints so that they align with those of the view’s safe area, like so:

// set the scroll view's constraints
func setUpScrollView() {
// align the scroll view to the safe area
let sv = presentationScrollView
sv?.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
sv?.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true
sv?.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0).isActive = true
sv?.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0).isActive = true

Now call this function from your view controller’s viewDidLoad() and add the following lines to define the content size and the behavior of your scroll view:

// scroll view settings
presentationScrollView.contentSize = CGSize(width: presentationScrollView.contentSize.width, height: 0)
presentationScrollView.automaticallyAdjustsScrollIndicatorInsets = false
presentationScrollView.alwaysBounceVertical = false
presentationScrollView.alwaysBounceHorizontal = true
presentationScrollView.isDirectionalLockEnabled = true

Done! Your scroll view is now good to go. Your view controller should now look like this:

Now, let’s add the rest of the objects to our view.

Step 3: the background, the page control and the button

There’s quite a few things to add to our view, still. One thing you will need to make sure of, is that each object is outside the scroll view, either in the foreground (UIPageControl and UIButton) or background )UIImageView), but not inside.

Let’s start with our UIPageControl:

As you can see, I paid particular attention to drag it outside the scroll view, more specifically, on the top of it, so it would appear on the foreground.

I will set its constraints so that the page control sticks to the bottom of the view and is horizontally centered:

Additionally, you can set the leading and trailing constraints on greater than or equal relation to keep the view centerd, as shown in the image below:

Connect it to your view controller’s class like you did before, and name it presentationPageControl.

As you can see by the gif above, the final slide comes with a button. To set it up, you will need to first add a UIButton to your view controller:

Its height and width should be set to 40, while its trailing and bottom constraint to the safe area should be set to 30.

Almost there! The button now looks pretty plain, but we obviously want it to look nice and fit with our app’s design.

Use the following settings to make it look exactly like the one in this tutorial:

Control-drag the button to your view controller’s class to connect it, just like you did with the page control and the scroll view, and name it continueButton.

Add the following lines of code to make the button rounded and to keep it invisible until later:

// set up button to be rounded & to show only on last slide
continueButton.layer.cornerRadius = continueButton.frame.height / 2
continueButton.isUserInteractionEnabled = false
continueButton.alpha = 0

Sweet! Now all that’s left to add is our background image view.

Drag a UIImageView inside your view controller. This time, as you can see, the object will be beneath everything else in the view:

Place the object between the safe area and the scroll view to make sure it will be placed beneath every other object inside the view.

Perfect! Now, we will not set any constraints using the storyboard; We will need the image to move when the user scrolls, therefore, the image’s position should be set programmatically.

I will use the following lines of code inside viewDidLoad() to define the initial position of the image. I will:
– set the image view’s height to be slightly bigger than the view’s frame, to make sure it covers the entire screen,
– set my image’s width by calculating it using its aspect ratio (the width of my image is approximately 1.4 times its own height)
– set the image to be slightly transparent.

// background image settings
let viewHeight = view.frame.size.height
let imageWidth = viewHeight * 1.4
let padding: CGFloat = 10
backgroundImageView.alpha = 0.5
backgroundImageView.frame = CGRect(x: 0,
y: -padding,
width: imageWidth,
height: viewHeight+padding*2)

For now, I will drag its edges to fill the entire screen and have its left and right edge go over the frame of the view, just to have a general idea of ​​what it should look like when the code compiles.

I will also connect it to the view controller class and name it backgroundImageView.

Last but not least, assign the background image from the assets to the image view and set its content mode to scale to fill.

Looking nice already!

Your view controller should now look similar to this:

Wow, that’s a lot of code already. Good job to you for keeping up!

The most boring part is now done, and my laptop seriously needs a break from all these images, gifs and videos… so, for the sake of the sake of my beloved device, I will divide this tutorial into two parts. But it won’t be long before I post the second part, don’t worry! Stay tuned with my content to be instantly updated when part 2 comes out, and let me know your feedback so far in the comments below!

Leave a Comment