[ad_1]
Ranging from iOS 16, SwiftUI supplies AnyLayout and the Structure protocol for builders to create personalized and sophisticated 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 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 mission utilizing the App template. Title the mission SwiftUIAnyLayout or no matter title you like. What we’re going to construct is an easy demo app that switches the UI format whenever 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 may 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, top: 120)                 .background(in: RoundedRectangle(cornerRadius: 5.0))                 .backgroundStyle(.inexperienced)                 .foregroundColor(.white)               Picture(systemName: “ferry”)                 .font(.system(measurement: 80))                 .body(width: 120, top: 120)                 .background(in: RoundedRectangle(cornerRadius: 5.0))                 .backgroundStyle(.yellow)                 .foregroundColor(.white)              Picture(systemName: “scooter”)                 .font(.system(measurement: 80))                 .body(width: 120, top: 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 Structure protocol so you should utilize it within the conditional layouts.
By attaching the animation to the format, the format change may be animated. Now whenever you faucet the stack view, it switches between vertical and horizontal layouts.
Switching Layouts based mostly on the system’s orientation
At present, the app lets customers change the format by tapping the stack view. In some functions, chances are you’ll wish to change the format based mostly on the system’s orientation and display measurement. On this case, you may seize the orientation change through the use of the .horizontalSizeClass variable:
|
@Atmosphere(.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 modifications 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 aren’t ok for arranging the kind of layouts you want? The Structure protocol launched in iOS 16 means that you can outline your personal customized format. All it’s essential do is outline a customized format container by creating a kind that conforms to the Structure protocol and implementing its required strategies:
sizeThatFits(proposal:subviews:cache:)– studies 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 strains of code. This undoubtedly helps us construct extra elegant and interesting UIs. Within the earlier demo, I confirmed you find out how to swap layouts based mostly on the display orientation. In truth, you may apply the identical method to different situations like the scale of the Dynamic Sort.
Notice: If you wish to dive deeper into SwiftUI and entry all of the supply code, you may take a look at our Mastering SwiftUI e book, 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+.
[ad_2]
