ZStacks and Overlays: Building Beautiful Layered UI in SwiftUI

​Welcome to Week 7 of the SwiftUI Blog Series! So far, we’ve explored Stacks, Frames, and Grids, learning how to structure layouts efficiently. This week, we’re focusing on ZStacks and Overlays, two powerful tools that let you layer views on top of each other to create visually stunning UI elements.

By the end of this post, you’ll know how to:

• Use ZStack to layer multiple views dynamically.
• Apply overlays and backgrounds for stylish effects.
• Create complex UI components like badges, watermarks, and image overlays.

​Let’s dive in! 🚀

What is ZStack?

A ZStack arranges views on top of each other along the Z-axis (depth). Unlike HStack (horizontal) and VStack (vertical), a ZStack stacks views in layers.

Basic ZStack Example

How It Works:

• The Color.blue view fills the entire frame.
• The Text view is automatically centered on top.
• The .cornerRadius(15) adds rounded corners for a sleek look.

​Positioning Views Inside ZStack

​By default, views in a ZStack are centered. But you can manually position them using .offset() or .alignment.

Key Adjustments:

• .alignment: .bottomTrailing moves content to the bottom-right.
• .padding() ensures spacing from the edges.

​Perfect for:

• Floating buttons.
• Notifications or badges.
• Custom tooltips or hints.

​Overlays: Adding Layers to Views

​The .overlay() modifier places a new view on top of another view without using a ZStack.

How It Works:

• .overlay(Text(…), alignment: .topTrailing) places the text on top of the image.
• The .background(Color.black) ensures readability.

​Perfect for:

• Badges on profile images.
• Watermarks over content.
• Status indicators on UI elements.

​Backgrounds vs. Overlays

While overlay adds layers on top, the .background() modifier places content behind a view.

​Let’s build a Profile Card with an image, name, and a verification badge.

Features of This UI Component:​​

• A RoundedRectangle as the card background.
• A profile image with a verification badge overlay.
• Shadows and padding for a clean, polished look.

​Building a Watermark Effect with Overlays

​Want to add a watermark to an image? ZStack and .overlay() make it easy!

Practical Uses:

• Adding copyrights to images.
• Branding elements in UI designs.
• Timestamp overlays in a media app.

Key Takeaways

• ZStack layers views on top of each other.
• .overlay() adds layers above a view, while .background() places elements behind it.
• Use .alignment or .offset() for precise positioning.
• Great for: Badges, profile cards, watermarks, and custom UI components.

By mastering ZStack and overlays, you can unlock creative UI designs with depth and layering!

What’s Next?​

​Next week, we’ll explore Responsive Design in SwiftUI: Adapting to All Screen Sizes, where we’ll discuss how to build layouts that look great on iPhones, iPads, and Macs!