SwiftUI AnyLayout - smooth transitions between layout types

In iOS 16, SwiftUI got a new tool, AnyLayout, that makes it possible to transition between layouts (Layout) while maintaining the identity of the views.

Here is an example of a transition between HStack and VStack with the help of AnyLayout.

Switch between layouts before iOS 16

First, let's see the behavior before we get AnyLayout.

Prior to iOS 16, when we want to switch between different layouts, we have to depend on the if statement.

Here is an example where we toggle between HStack and VStack.

// 1
@State var isHorizontal = false

var body: some View {
    VStack {
        if isHorizontal {
            HStack {
                Text("One")
                Text("Two")
                Text("Three")
            }
        } else {
            VStack {
                Text("One")
                Text("Two")
                Text("Three")
            }
        }
        Button("Toggle") {
            withAnimation {
		// 3
                isHorizontal.toggle()
            }
        }
    }
    .font(.largeTitle)
}

1 We declare @State variable, isHorizontal, to control the layout we want to use.
2 We use isHorizontal to choose the layout.
3 We add a button that toggle isHorizontal value.

SwiftUI sees switching layouts like this as a removing and adding a new layout.

You will see fading transition as a result.

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

What is AnyLayout

AnyLayout introduced for smoothening the transition between layouts.

It is a type-erased instance of the Layout protocol. Using an AnyLayout instance allows us to change layout types without destroying the state of the underlying subviews.

Because the identity of the view hierarchy always remains the same, SwiftUI sees this as a view that changes, not a new view like if-else.

Here is the same example in the previous section, but this time, we use AnyLayout.

@State var isHorizontal = false
    
var body: some View {
    // 1
    let layout = isHorizontal ? AnyLayout(HStackLayout()) 
                              : AnyLayout(VStackLayout())
    
    VStack {
        // 2
        layout {
            Text("One")
            Text("Two")
            Text("Three")
        }
        Button("Toggle") {
            withAnimation {
                isHorizontal.toggle()
            }
        }
    }
    .font(.largeTitle)
}

1 We create type-erased layout (AnyLayout) based on isHorizontal state variable.

2 We use layout in a place of HStack/VStack.

With this simple change, SwiftUI can create a smooth transition between different layout types.

AnyLayout with a custom Layout

AnyLayout works with any layout conforming to the Layout protocol. This includes a custom layout that you created.

Here is an example of using AnyLayout with my custom layout created in the previous article, Custom Layout in SwiftUI.

@State var isHorizontal = false

var body: some View {
    let layout = isHorizontal ? AnyLayout(HStackLayout())
                              : AnyLayout(BackslashStack())
    
    VStack {
        layout {
            Text("One")
            Text("Two")
            Text("Three")
        }
        Button("Toggle") {
            withAnimation {
                isHorizontal.toggle()
            }
        }
    }
    .font(.largeTitle)
}

Here we switch between HStackLayout and BackslashStack.