How to mask one view with another
Updated for Xcode 14.2
SwiftUI gives us the mask() modifier for masking one with another, which means you can mask an image using text or an image using an image, or more.
For example, this creates a 300x300 image of stripes, then masks it using the text “SWIFT!” so that the letters act as a cut out for the image:
Image("laser-show")
.resizable()
.frame(width: 300, height: 300)
.mask(
Text("SWIFT!")
.font(.system(size: 72))
)
Download this as an Xcode project
The mask() modifier is different from clipShape(), because it also applies any transparency from the masking view – you get to have holes in your underlying view based on the transparency of your mask. On the other hand, clipShape() only adjusts the outside shape of the view you apply it to.
SAVE 50% To celebrate WWDC23, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
Similar solutions…
- How to synchronize animations from one view to another with matchedGeometryEffect()
- How to force one gesture to recognize before another using highPriorityGesture()
- How to recommend another app using appStoreOverlay()
- How to force views to one side inside a stack using Spacer
- How to embed a view in a navigation view
