Masks and Overlays in SwiftUI

Quick tips for non-designers to make your iOS app beautiful

Artur R
4 min readJan 28, 2020

I finally had some spare time to get my hands dirty with SwiftUI — it was a pleasant few hours! I started a new project — a macOS application which soon I might open-source. But for now, I’ve prepared a piece on masks and overlays.

Overlay

What does it do? It layers a secondary view in front of the view. Sounds just like the well-known ZStack but in fact, it’s a bit different. So, let’s dive into the details.

This function takes an overlay view, which is just another object that conforms to the View protocol, as well as an alignment that defaults to center. Since in SwiftUI pretty much every user interface element is a View, we can use this on just about anything we want.

What’s the advantage of using it over ZStack? When you apply overlay to a view, the parent view continues to provide the layout characteristics for its child view. That means our overlay view won’t change a frame parent view in any way. Thanks to that we can…

--

--