User Interface
iOS Secrets: See Behind Your Views
How to easily create holes in your views to see elements behind them
This week I’d like to explore a UI-related topic. When implementing an app, there is often the need to create an onboarding experience, a tutorial, or some other feature for which we want to obscure part of the interface to make the relevant parts pop out and grab the user's attention.
Although this may look like a simple task, there isn’t any straightforward way to achieve this. So, today I want to share a way to do it. With this method, you could not only implement tutorials and onboarding, but you can literally create holes in your views to see behind them!
Masking
The tool we are going to use is a property every UIView has that is call mask. I leave the documentation in this link as a reference.
But how does mask works? Let’s see it in action and then let’s analyze what’s happening. To use it, we need to:
- Create a view that we want to use as a background (a blue view for this example).
- Create the view in the foreground that we want to carve a hole in it, by applying the mask (a red view for this example).
- The mask that we want to apply (a circle, to start with).
The code should look something like this:
