How to blend views together
Updated for Xcode 15
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 Still waiting on your CI build? Speed it up ~3x with Blaze - change one line, pay less, keep your existing GitHub workflows. First 25 HWS readers to use code HACKING at checkout get 50% off the first year. Try it now for free!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
- How to combine text views together
- How to group views together
- How to group views together with ControlGroup
- Composing views to create a list row
- How to use @EnvironmentObject to share data between views
