How to blend views together
Updated for Xcode 14.2
When placing one view over another, you can control the way they overlap by using the blendMode() modifier. This contains a variety of ways you can mix colors together, such as using their difference or using a color burn – these will be familiar if you’ve used Core Graphics or something like Photoshop before.
To demonstrate this we could create a ZStack with two overlapping circles inside, where the second has a .multiply blend mode so that it darkens the colors behind it:
ZStack {
Circle()
.fill(.red)
.frame(width: 200, height: 200)
.offset(x: -50)
.blendMode(.screen)
Circle()
.fill(.blue)
.frame(width: 200, height: 200)
.offset(x: 50)
.blendMode(.screen)
}
.frame(width: 400)
Download this as an Xcode project
SPONSORED From March 20th to 26th, you can join a FREE crash course for mid/senior iOS devs who want to achieve an expert level of technical and practical skills – it’s the fast track to being a complete senior developer!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
