I have always been fond of delicate and elegant Apple interactions. One of my favourite interactions is when user force touched (3d touch) an iOS app to see the pop-and-peek modal. This interaction not only delights users but also helps them focus on the content inside the modal. The very first time when I tried to bring this interaction into my Swift iOS app, I had struggled to find good tutorial about it on the web. Therefore here I am, I’m going to show you two ways to produce this elegant blurred background. The first way is code-based, which is going to help us understand deeper how Apple makes the blurred background like the image below, as well as knowing a bit more about protocol and delegation. And the second way, much faster and simpler, is configuring Main.storyboard.
- So I created a Xcode project with a Single View App, named Translucence. As preference, I always edit the folder sidebar a bit before start coding. Then for demonstration purpose, I only add one image view as the background (let’s call it BackgroundVC) which we are going to BLUR it beautifully as Apple does. YaY~~
2. Next, we are going to create the Blur View. Let’s make a BlurVC with XIB file marked. And when the XIB files created, let put the BlurVC.xib inside XIB folder, and the BlurVC.swift inside Controller folder. Organization is the key!
3. We now move on to add a button “Blur” on our BackgroundVC Scene inside Main.storyboard. Make it beautiful in your own style and some constraints of course ~.~ When we tap on this button “Blur”, the BlurVC scene will pop up and blur all the thing under it, which is the BackgroundVC Scene.
4. My preference is always add corner radius to the button to make it less sharp. We all prefer rounded things, right? So, I add my own custom RoundedButton.swift to my newly created folder “View”. (Now we officially have the V and C in MVC. Wow!)
5. Now jumping into BlurVC.xib, we will add 2 things :
- (1) the “tapView” which when user tap on it, the blur scene will dismiss and present the background scene. And let clear the colour out of that “tapView” as well as the main view of the xib (marked blue in the left side image) so that when the blur scene displays on top of the background scene, we can still see the background scene.
- (2) an image just to showcase the blur effect.
5. Now let write some code, wohooo! The first thing we need to write inside BackgroundVC.swift is an IBAction that link the “Blur Me” Button with the BlurVC. And also tell Swift that we are going to present the BlurVC with our own custom modal presentation style. Otherwise, Swift will just display an ugly black background between our Background Scene and Blur Scene. Here’s come the code:
If you done right, here gonna be the outcome:
And here is what’s happen if we don’t tell Swift to custom modal presentation style ~ Oooops Black is coming:
6. Now we are going to write a code that add a blur view on top of the Background scene whenever the Blur scene is called to display by tapping “Blur Me” button.
7. Remember to call the setBlurView inside the blurBtnPressed. If you done right, the result is going to be like this, beautiful isn’t it?
8. However, we haven’t set up how to dismiss the Blur scene to present the Background scene yet. We can do it by add a tap gesture recognizer to the “tapView” which is hidden on top of the blurView. So when user tap anywhere on the screen, the Blur scene will disappear.
However when you tap to dismiss the BlurVC, unfortunately the blurView is still there… like this:
9. So now, here comes the tricky part. We need to find a way to tell BackgroundVC that “Yo, I call off the BlurVC, you should call off your blurView now, mate!”. Actually I have tried several ways to perform this “conversation” between the two VCs, like making a variable “modalDismiss” in BackgroundVC, and set it to be true when user tap to dismiss the BlurVC, so that the BackgroundVC knows and calls off its blurView. But it didn’t work like that. Instead, we should perform protocol and delegation. We now will write some code to “transform” our BlurVC to be a cool protocol and delegation (like UITableViewDelegate). The BlurVCDelegate will do one job which is call the function removeBlurView whenever user tap the “tapView” to dismiss the Blur Scene. Although, we don’t even have the code for removeBlurView function yet, just bear with me for now 😎
Here is the code:
10. Now jumping to BackgroundVC, let assign it to BlurVCDelegate, and then Xcode is going to prompt us an error because we haven’t conform to BlurVCDelegate yet!
If we click fix, Xcode will do part of the job for us, so cooool!
Now it’s time to write a code to call off the blurView:
11. Now if we just run our simulator, nothing changes… because we haven’t add self to be delegate of the BlurVC! And we can delegate BlurVC to BackgroundVC right in the IBAction of pressing the BlurMe button:
Finally, we done! Let check our result, cool doesn’t it? 😍
Okay, so now as we understand the first hard way of making blur background, let’s move on to the second very quick way.
- Let’s first create a second backgroundVC, named : Background2VC, and prepare the storyboard for it, and remember move the “RootView” arrow to Background2VC Scene:
2. Now as we again create a Blur2VC with Xib file. Jump on to the Blur2VC.xib, search for UIVisualEffectView, and drag it to the scene. The UIVisualEffectView also contains a subView. We don’t need to clear color for both of them but we need to clear color out of the main view of the xib. Also remember to make constraint on the UIVisualEffectView, and then choose dark on the attribute panel to see the effect 😎
3. Also add the image of Swift logo to see more clearly the difference of the blur effect with the background underneath.
4. Now we write the same code for the Blur2VC, the only different is the tapView is now of type UIVisualEffectView
5. And in the Background2VC, the code is also much simpler than the first way:
Now the result 🎉 🎉 🎉
Congratulations and thank you for read through my tutorial!
Happy coding and designing ❤️
