How to temporarily cover whole screen of your application
Tags: ios, swift
Published: 2020-02-20 14:11:55

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:

```swift
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:

```swift
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:

```swift
var coverView: UIView?
```

Right after creating the view, we would assign it to this variable to have access to it.

```swift
let view = UIView(frame: UIScreen.main.bounds)
coverView = view
```

The “dismissing” the cover view is matter of calling `removeFromSuperView`:

```swift
coverView?.removeFromSuperview()
coverView = nil
```

### Animations for better user experience

For better user experience, consider animating the alpha when showing cover view:

```swift
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:

```swift
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`:

```swift
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.

```swift
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`:

```swift
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:

![Dashboardy in App Switcher](https://dev-to-uploads.s3.amazonaws.com/i/2bjayo1jw320rtzfourl.gif)

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._