Ranging from iOS 16, SwiftUI gives AnyLayout and the Structure protocol for builders to create custom-made and complicated layouts. AnyLayout is a type-erased occasion of the format protocol. You should utilize AnyLayout to create a dynamic format that responds to customers’ interactions or surroundings adjustments.
On this tutorial, you’ll discover ways to use AnyLayout to change between vertical and horizontal format.
Utilizing AnyLayout
Let’s first create a brand new Xcode challenge utilizing the App template. Identify the challenge SwiftUIAnyLayout or no matter identify you like. What we’re going to construct is a straightforward demo app that switches the UI format if you faucet the stack view. The determine under reveals the UI format for various orientations.
The app initially arranges three pictures vertically utilizing VStack. When a person faucets the stack view, it adjustments to a horizontal stack. With AnyLayout, you possibly can implement the format like this:
|
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 non-public var changeLayout = false
var physique: some View { let format = changeLayout ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())
format { Picture(systemName: “bus”) .font(.system(measurement: 80)) .body(width: 120, peak: 120) .background(in: RoundedRectangle(cornerRadius: 5.0)) .backgroundStyle(.inexperienced) .foregroundColor(.white)
Picture(systemName: “ferry”) .font(.system(measurement: 80)) .body(width: 120, peak: 120) .background(in: RoundedRectangle(cornerRadius: 5.0)) .backgroundStyle(.yellow) .foregroundColor(.white)
Picture(systemName: “scooter”) .font(.system(measurement: 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 adjustments between horizontal and vertical layouts. The HStackLayout (or VStackLayout) behaves like a HStack (or VStack) however conforms to the Structure protocol so you should utilize it within the conditional layouts.
By attaching the animation to the format, the format change could be animated. Now if you faucet the stack view, it switches between vertical and horizontal layouts.
Switching Layouts primarily based on the gadget’s orientation
At the moment, the app lets customers change the format by tapping the stack view. In some purposes, chances are you’ll need to change the format primarily based on the gadget’s orientation and display screen measurement. On this case, you possibly can seize the orientation change by utilizing the .horizontalSizeClass variable:
|
@Surroundings(.horizontalSizeClass) var horizontalSizeClass |
And you then 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 adjustments to horizontally stack view.
Generally, we use SwiftUI’s built-in format containers like HStackLayout and VStackLayout to compose layouts. What if these format containers are usually not ok for arranging the kind of layouts you want? The Structure protocol launched in iOS 16 lets you outline your personal customized format. All you’ll want to do is outline a customized format container by creating a sort that conforms to the Structure protocol and implementing its required strategies:
sizeThatFits(proposal:subviews:cache:)– reviews the scale 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 traces of code. This undoubtedly helps us construct extra elegant and interesting UIs. Within the earlier demo, I confirmed you the way to change layouts primarily based on the display screen orientation. In truth, you possibly can apply the identical approach to different situations like the scale of the Dynamic Sort.
Be aware: If you wish to dive deeper into SwiftUI and entry all of the supply code, you possibly can take a look at our Mastering SwiftUI ebook, which has been totally up to date for iOS 16 and Xcode 14.
Founding father of AppCoda. Creator of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.
