skip to Main Content
Overlay View In Ios Swift

Create your own custom overlay view in swift

There are lot of cases when you need an overlay view to display various feedback messages and errors. These overlays are displayed whenever you perform an action, for example: you add an item to the cart, or you save a product as a favorite. It is just a small feedback to your users that will show them that their action was performed successfully and now they can move on with their tasks.

What we are making?

Today I’m going to show you how to create a custom overlay view that will show a simple message and an icon whenever you save an object locally. I’m going to use our new iOS app template as a base project and show you how we used this overlay view to present a feedback to the users that the car they selected was actually saved locally.

What we need?

First of all we need a project obviously, than we need to add a custom view, that is going to be the overlay view, and some functions that will allow us to show and hide it with a nice animation.

Let’s code the overlay view

As I said, we would need to add a new UIView subclass to our project, let’s name it OverlayView. Add also a User interface file, and give it the same name.

overlay view adding new xib file

Now head over to the OverlayView.xib file and select the File’s Owner object and change the class’ name to OverlayView. This will link this .xib file to the proper class.

overlay view renaming custom class

Head back to the OverlayView.swift file and start coding.

We would need a method, that could load the view that is inside the .xib file, so we can actually work with it.

As you can see, it will load the nib file and get the first UIView out of it, and return it, so we can work with it later.

Let’s add an UIView variable to our class, this will be the view that holds everything that is loaded from the .xib file.

Let’s add another function, that will allow us to setup our view properly, name it setupView() and call it from the required init methods.

SetupView function will get the view from the xib file, assign it to our custom UIView variable and adds it as a subview to the class. Than add a shadow to our view.

You might notice that it also contains a titleLabel which is a UILabel and a visualEffectView which is a UIVisualEffectView. We need that view to have a blurry background for the overlay view.

Connecting the outlets and creating the view

Now that we have created our view, we need to customise it a bit by adding the outlets to the view. This time, we keep it simple, and this overlay view will only have 3 outlets. A label that displays the message, an UIImageView to display the icon (having it as an IBOutlet let’s us customise it later on, e.g.: display a different icon and message for different scenarios) and the UIVisualEffectView.

1. VisualEffectView
Open up the .xib file and drag an UIVisualEffectView onto the view, set its constraints to stick it to the top, bottom, left and right edges of the view.

overlay view swift adding UIVisualEffectView constraints

2. Label
Drag an UILabel to the view and set it in a place you desire. I placed it 45 points from the bottom, aligned it in the center and added leading and trailing constraints that are marked as Greater than or equal to 10 points, allowing it to expand its width.

overlay view swift addign label constraints

3. Icon
Drag an UIImageView onto the view and place it above the label we just added and set the constraints so that it is centered in the view, and placed 15 points above the label. Set also a width and height constraint.

overlay view swift adding icon constraints

Last but no least, don’t forget to connect your IBOutlets. 😉

Add some additional constraints to your overlay view

Let’s add some final constraints to the view, so that the view variable is perfectly aligned.

Displaying the view

Now that everything is setup right, we need to have a function to show and hide the view. Let’s create a function and call it displayView(). This function will have a parameter as well, call it onView: UIView which will be the UIView that we would want to display this overlay view on.

Once the function is called, it will do the following things:

1.
Sets the alpha value to 0, so it is not visible.

2.
Adds it as a subView to the onView UIView.

3.
Set some final constraints, now that it is a subview.

4.
Call the animation method

Then hide it.

This is a private method, as it gets called in the completionBlock of the displayView’s animation block.

The complete displayOnView function will look like this:

Connect it with a button action

Once our overlay view is ready, we need to display it somehow. Find a perfect spot for it and call the displayView function.

In this case, I created an IBAction called favoriteButtonPressed and called the function inside.

overlay view swift ios

Download the sample project below and use it in your next projects.

  • quinn

    I keep getting an (lldb) error

  • Edmund Siah

    i get the same error, any solution?

  • Edmund Siah

    manage to solve the error, you need to assign the custom class of Overlayview under files’s owner part according to above picture shown. Else you will have super.init error…

    • quinn

      How did you assign the custom class?

  • nickoff

    I have a problem setting the shadow on the view. As long as the shadow is not set the blur effect is working, but if I set the shadow on the view the blur effect is gone. Is it still working in swift 3 and XCode 8?

    • Coração Tricolor

      Only the image and the label appear on xCode 8.3.3 Why? And how do we fix this?

      • Updated the project to the latest version of Swift. You should also see the blurry background, but of course it shows up better when you have some content behind it.

        • Coração Tricolor

          ok sure.. but when I recompiled with iOS 10.3 it worked again. Thx