Sunday, November 27, 2022
HomeiOS DevelopmentAltering Format with HStack and VStack

Altering Format with HStack and VStack

Ranging from iOS 16, SwiftUI supplies AnyLayout and the Format 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 setting modifications.

On this tutorial, you’ll discover ways 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. Title the undertaking SwiftUIAnyLayout or no matter identify you like. What we’re going to construct is a straightforward demo app that switches the UI format while you faucet the stack view. The determine beneath exhibits the UI format for various orientations.

SwiftUI AnyLayout - Switch between HStack and VStack

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 possibly can implement the format like this:

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 need to use it within the conditional layouts.

By attaching the animation to the format, the format change might be animated. Now while you faucet the stack view, it switches between vertical and horizontal layouts.

Switching Layouts primarily based on the gadget’s orientation

Presently, the app lets customers change the format by tapping the stack view. In some purposes, you might 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 through the use of the .horizontalSizeClass variable:

And you then replace the format variable like this:

Say, for instance, you rotate an iPhone 14 Professional Max to panorama, the format modifications to horizontally stack view.

swiftui anylayout demo

Generally, we use SwiftUI’s built-in format containers like HStackLayout and VStackLayout to compose layouts. What if these format containers usually are not ok for arranging the kind of layouts you want? The Format protocol launched in iOS 16 lets you outline your personal customized format. All it’s worthwhile to do is outline a customized format container by creating a sort that conforms to the Format 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.


The introduction of AnyLayout permits us to customise and alter the UI format with a pair traces of code. This positively helps us construct extra elegant and fascinating UIs. Within the earlier demo, I confirmed you change layouts primarily based on the display screen orientation. In reality, you possibly can apply the identical method to different situations like the scale of the Dynamic Sort.

Word: If you wish to dive deeper into SwiftUI and entry all of the supply code, you possibly can try our Mastering SwiftUI e-book, which has been absolutely 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. Comply with me at Fb, Twitter and Google+.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments