In this short tutorial we will go over how to temporarily cover whole screen with custom UIView
. Broadly this has two main use cases:
- Dimming the background to surface pop-over content
- Obscuring content in the App Switcher to hide potentially sensitive info or just show user something fun
Both work the same way, but the code to show and hide those views is different.
Dimming the background
Let’s start with dimming the background. This is nothing else than creating UIView
with black background and alpha
of something like 0.6
.
First create the UIView
and use the screen as its size:
let view = UIView(frame: UIScreen.main.bounds)
view.backgroundColor = .black
view.alpha = 0.6
Then we will add it as subview to the main window like this:
UIApplication.shared.keyWindow?.addSubview(view)
Or you can use the UIApplication.shared.windows
array and for example use the first one.
Hiding the cover view
To hide the cover view, I usually create variable to temporarily hold the cover view like so:
var coverView: UIView?
Right after creating the view, we would assign it to this variable to have access to it.
let view = UIView(frame: UIScreen.main.bounds)
coverView = view
The “dismissing” the cover view is matter of calling removeFromSuperView
:
coverView?.removeFromSuperview()
coverView = nil
Animations for better user experience
For better user experience, consider animating the alpha when showing cover view:
let view = UIView(frame: UIScreen.main.bounds)
view.backgroundColor = .black
view.alpha = 0
UIView.animate(withDuration: 0.2) {
view.alpha = 0.6
}
And removing like so:
UIView.animate(withDuration: 0.2, animations: {
self.coverView?.alpha = 0
}) { (_) in
self.coverView?.removeFromSuperview()
self.coverView = nil
}
Hiding app content in App Switcher
So far we used the cover view in app to dim the background. We can use similar approach to hide app contents for App Switcher. This is very popular in apps with very personal content, like banking apps, Safari Private mode and similar.
We use the same UIView
added to the window, but it is fully opaque and AppDelegate
methods handle when to add it and when to remove.
In this instance, it is best to create custom UIView
subclass and adding at least a logo so the user is not confused by black screen. You can of course create any layout you want here :-)
In the example below I am going to use CoverView
class that I created for one recent project. First declare optional variable in AppDelegate
:
var coverView: CoverView?
We will use the method applicationDidEnterBackground
which is automatically called whenever our app moves to background. This is perfect time to cover the screen with custom view.
func applicationDidEnterBackground(_ application: UIApplication) {
coverView = CoverView()
coverView!.frame = window!.frame
window?.addSubview(coverView!)
}
For brevity there are some force unwraps but in cases that are almost impossible to happen. I am expecting that the app will have a window and since we are creating the CoverView
ourselves, we can be sure it exists :-)
Now what remains to do is to remove the coverView
when user returns to the app using the method applicationDidBecomeActive
:
unc applicationDidBecomeActive(_ application: UIApplication) {
coverView?.removeFromSuperview()
coverView = nil
}
And that is it!
I have recently used CoverView
in Dashboardy app which allows users to view their business dashboards on the go and can possibly contain very confidential information.
This is the end result:
Thanks for reading!
Is anything not clear? Do you want more information? Ask in the comments and I will do my best to help you.
Top comments (0)