How to blend views together
Updated for Xcode 13.0
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(Color.red)
.frame(width: 200, height: 200)
.offset(x: -50)
.blendMode(.screen)
Circle()
.fill(Color.blue)
.frame(width: 200, height: 200)
.offset(x: 50)
.blendMode(.screen)
}
.frame(width: 400)
Download this as an Xcode project
Click here to save 50% on all my books and bundles!
Similar solutions…
