[ad_1]
Ranging from iOS 16, SwiftUI gives AnyLayout
and the Format
protocol for builders to create personalized and sophisticated layouts. AnyLayout
is a type-erased occasion of the format protocol. You need to use AnyLayout
to create a dynamic format that responds to customers’ interactions or setting modifications.
On this tutorial, you’ll learn to use AnyLayout
to modify between vertical and horizontal format.
Utilizing AnyLayout
Let’s first create a brand new Xcode undertaking utilizing the App template. Identify the undertaking SwiftUIAnyLayout
or no matter identify you favor. What we’re going to construct is an easy demo app that switches the UI format if you faucet the stack view. The determine beneath reveals the UI format for various orientations.

The app initially arranges three photos vertically utilizing VStack
. When a consumer faucets the stack view, it modifications to a horizontal stack. With AnyLayout
, you’ll be able to implement the format like this:
var physique: some View {
let format = changeLayout ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())
format {
Picture(systemName: “bus”)
.font(.system(dimension: 80))
.body(width: 120, peak: 120)
.background(in: RoundedRectangle(cornerRadius: 5.0))
.backgroundStyle(.inexperienced)
.foregroundColor(.white)
Picture(systemName: “ferry”)
.font(.system(dimension: 80))
.body(width: 120, peak: 120)
.background(in: RoundedRectangle(cornerRadius: 5.0))
.backgroundStyle(.yellow)
.foregroundColor(.white)
Picture(systemName: “scooter”)
.font(.system(dimension: 80))
.body(width: 120, peak: 120)
.background(in: RoundedRectangle(cornerRadius: 5.0))
.backgroundStyle(.indigo)
.foregroundColor(.white)
}
.animation(.default, worth: changeLayout)
.onTapGesture {
changeLayout.toggle()
}
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
struct ContentView: View {     @State personal var changeLayout = false      var physique: some View {         let format = changeLayout ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())          format {             Picture(systemName: “bus”)                 .font(.system(dimension: 80))                 .body(width: 120, peak: 120)                 .background(in: RoundedRectangle(cornerRadius: 5.0))                 .backgroundStyle(.inexperienced)                 .foregroundColor(.white)               Picture(systemName: “ferry”)                 .font(.system(dimension: 80))                 .body(width: 120, peak: 120)                 .background(in: RoundedRectangle(cornerRadius: 5.0))                 .backgroundStyle(.yellow)                 .foregroundColor(.white)              Picture(systemName: “scooter”)                 .font(.system(dimension: 80))                 .body(width: 120, peak: 120)                 .background(in: RoundedRectangle(cornerRadius: 5.0))                 .backgroundStyle(.indigo)                 .foregroundColor(.white)          }         .animation(.default, worth: changeLayout)         .onTapGesture {             changeLayout.toggle()         }     } } |
We outline a format variable to carry an occasion of AnyLayout
. Relying on the worth of changeLayout
, this format modifications between horizontal and vertical layouts. The HStackLayout
(or VStackLayout
) behaves like a HStack
(or VStack
) however conforms to the Format
protocol so you should utilize it within the conditional layouts.
By attaching the animation to the format, the format change will be animated. Now if you faucet the stack view, it switches between vertical and horizontal layouts.
Switching Layouts based mostly on the gadget’s orientation
At present, the app lets customers change the format by tapping the stack view. In some functions, you might need to change the format based mostly on the gadget’s orientation and display dimension. On this case, you’ll be able to seize the orientation change through the use of the .horizontalSizeClass
variable:
@Setting(.horizontalSizeClass) var horizontalSizeClass |
And then you definately replace the format
variable like this:
let format = horizontalSizeClass == .common ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout()) |
Say, for instance, you rotate an iPhone 14 Professional Max to panorama, the format modifications to horizontally stack view.

Typically, we use SwiftUI’s built-in format containers like HStackLayout
and VStackLayout
to compose layouts. What if these format containers should not ok for arranging the kind of layouts you want? The Format protocol launched in iOS 16 lets you outline your individual customized format. All you must do is outline a customized format container by creating a kind that conforms to the Format
protocol and implementing its required strategies:
sizeThatFits(proposal:subviews:cache:)
– stories the dimensions of the composite format view.placeSubviews(in:proposal:subviews:cache:)
– assigns positions to the container’s subviews.
Abstract
The introduction of AnyLayout
permits us to customise and alter the UI format with a pair strains of code. This positively helps us construct extra elegant and interesting UIs. Within the earlier demo, I confirmed you change layouts based mostly on the display orientation. Actually, you’ll be able to apply the identical approach to different eventualities like the dimensions of the Dynamic Sort.
Observe: If you wish to dive deeper into SwiftUI and entry all of the supply code, you’ll be able to take a look at our Mastering SwiftUI e-book, which has been absolutely up to date for iOS 16 and Xcode 14.
[ad_2]