Ranging from iOS 16, SwiftUI gives AnyLayout and the Format protocol for builders to create custom-made and sophisticated layouts. AnyLayout is a type-erased occasion of the structure protocol. You should utilize AnyLayout to create a dynamic structure that responds to customers’ interactions or surroundings adjustments.
On this tutorial, you’ll learn to use AnyLayout to modify between vertical and horizontal structure.
Utilizing AnyLayout
Let’s first create a brand new Xcode mission utilizing the App template. Identify the mission SwiftUIAnyLayout or no matter title you like. What we’re going to construct is an easy demo app that switches the UI structure if you faucet the stack view. The determine under reveals the UI structure for various orientations.
The app initially arranges three photos vertically utilizing VStack. When a person faucets the stack view, it adjustments to a horizontal stack. With AnyLayout, you may implement the structure 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 personal var changeLayout = false      var physique: some View {         let structure = changeLayout ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())          structure {             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 structure variable to carry an occasion of AnyLayout. Relying on the worth of changeLayout, this structure adjustments between horizontal and vertical layouts. The HStackLayout (or VStackLayout) behaves like a HStack (or VStack) however conforms to the Format protocol so you need to use it within the conditional layouts.
By attaching the animation to the structure, the structure change will be animated. Now if you faucet the stack view, it switches between vertical and horizontal layouts.
Switching Layouts primarily based on the machine’s orientation
At the moment, the app lets customers change the structure by tapping the stack view. In some purposes, it’s possible you’ll need to change the structure primarily based on the machine’s orientation and display screen measurement. On this case, you may seize the orientation change by utilizing the .horizontalSizeClass variable:
|
@Setting(.horizontalSizeClass) var horizontalSizeClass |
And you then replace the structure variable like this:
|
let structure = horizontalSizeClass == .common ? AnyLayout(HStackLayout()) : AnyLayout(VStackLayout()) |
Say, for instance, you rotate an iPhone 14 Professional Max to panorama, the structure adjustments to horizontally stack view.
Generally, we use SwiftUI’s built-in structure containers like HStackLayout and VStackLayout to compose layouts. What if these structure containers usually are not adequate for arranging the kind of layouts you want? The Format protocol launched in iOS 16 permits you to outline your personal customized structure. All you must do is outline a customized structure container by creating a kind that conforms to the Format protocol and implementing its required strategies:
sizeThatFits(proposal:subviews:cache:)– reviews the dimensions of the composite structure 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 structure 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 swap layouts primarily based on the display screen orientation. In truth, you may apply the identical method 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 may take a look at our Mastering SwiftUI guide, which has been totally up to date for iOS 16 and Xcode 14.
Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Observe me at Fb, Twitter and Google+.
