SwiftUI provides us with quite a few &quot;off the shelf&quot; layout methods to help build UI for our app. We have HStack, VStack, ZStack, GridView and more. In this articl we will look at ZStack. ZStack is a view that comes with SwiftUI that overlays it subviews. Essentially allowing you to stack a view on top of one another.

## Simple ZStack Implementation

Let’s start of simple by adding two views on top of each other using ZStack.

&#96;&#96;&#96;javascript
struct ContentView: View {
    var body: some View {
        ZStack {
          &#x2F;&#x2F;#1
            Rectangle()
                .foregroundColor(.blue)
                .frame(width: 200, height: 200, alignment: .center)
                .cornerRadius(20)
          &#x2F;&#x2F;#2
            Rectangle()
                .foregroundColor(.white)
                .opacity(0.4)
                .frame(width: 150, height: 150, alignment: .center)
                .cornerRadius(200)
        }
    }      
}
&#96;&#96;&#96;

&#x5C;
 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;zstackpic1.png?alt=media&amp;token=508ac99c-8993-4c1b-9c66-961344fa9d1d)

&#x5C;
Rectangle #1 will be the bottom-most rectangle while the rectangle #2 will be top most. As you keep adding views, the last view will be top most in the view hierarchy.

We can also change view&#x27;s alignment, by passing in the alignment argument in the ZStack. The following alignment options are available:
&#96;.leading&#96;, &#96;.trailing&#96;, &#96;.center&#96;, &#96;bottom&#96;, &#96;top&#96;, &#96;topLeading&#96;, &#96;topTrailing&#96;, &#96;bottomLeading&#96; and &#96;bottomTrailing&#96;

&#x5C;
&#96;&#96;&#96;javascript
ZStack(alignment: .leading) {
  &#x2F;&#x2F;1
    Rectangle()
        .foregroundColor(.blue)
        .frame(width: 200, height: 200, alignment: .center)
        .cornerRadius(20)
  &#x2F;&#x2F;2
    Rectangle()
        .foregroundColor(.white)
        .opacity(0.4)
        .frame(width: 150, height: 150, alignment: .center)
        .cornerRadius(200)
}
&#96;&#96;&#96;

&#x5C;
The above code will align all the items on the leading edge of the bottom most view.

## Advance Layout with Animation using ZStack:

Lets create something more interesting using ZStacks. This is what we will create:

 ![](https:&#x2F;&#x2F;firebasestorage.googleapis.com&#x2F;v0&#x2F;b&#x2F;dopebase-9b89b.appspot.com&#x2F;o&#x2F;zstackgif.gif?alt=media&amp;token=90117da2-2b49-4c2d-b7eb-73db8749e0e0)

&#x5C;
&#x5C;
We will animate this as well using simple offset values. So, first start of by adding a ZStack to the content view and also creating an array of colors.

Add the following lines top the top of the ContentView.

&#96;&#96;&#96;javascript
var data : [Color] = [.blue, .green, .yellow, .purple, .red]
@State var offsetval = 0
&#96;&#96;&#96;

&#x5C;
Next, inside the ZStack, we will add a ForEach loop, that will iterate over the &#96;data.count&#96;. Please note here that we are not iterating over the colors, but instead the index value of each item in the array.

&#96;&#96;&#96;javascript
ZStack {
    ForEach(0..&lt;data.count) { i in
        Rectangle()
            .foregroundColor(data[i])
            .frame(width: 200, height: 200, alignment: .center)
            .cornerRadius(20)
            .offset(x: CGFloat(i * offsetval), y: CGFloat(i * offsetval))
    }
}
.onAppear {
    withAnimation(.easeOut(duration: 2)) {
        offsetval = 10
    }
}
&#96;&#96;&#96;

&#x5C;
Inside, the ForEach loop, we are creating a rectangle, giving it the &#96;i&#96;th color from the array. We are also giving the rectangle a frame of width of &#96;200px&#96; and height of &#96;200px&#96;. We will also add a &#96;cornerRadius&#96; of 20. The last thing I will add here is an &#96;offset&#96; modifier. This modifier allows you to just move the view in x or y axis. This is one of the most used view modifiers for animations.

So, we will offset each view depending on its position in the stack. We do this by using the index value &#96;i&#96;. We will multiply the &#96;I&#96; value with the &#96;offsetval&#96; property we set earlier. Initially this will be &#96;0&#96;. Now, lets add the &#96;.onAppear&#96; modifier and inside it we will change the &#96;offsetval&#96; value to 10. We will wrap this around a &#96;withAnimation&#96; block and set the duration to 2 seconds.

&#x5C;
The result is shown in the above gif.

&#x5C;
So as we can see ZStack is an extremely powerful layout tool available in SwiftUI. The above animation can be used in the Splash screen, and if you want to learn more about how to implement splash screen in SwiftUI, check out this [article](https:&#x2F;&#x2F;devbrite.io&#x2F;how-to-make-splash-screen-for-swiftui-app).

&#x5C;
The full code to this project is available on GitHub.

How to Stack and Layer Views With ZStack in SwiftUI

About

Legal

Products

Resources

Category: