Instruction 2

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Adapting UI

Using a ScrollView quickly fixed the problem, and users of RGB Picker can now enjoy the app in landscape. And yet, something still feels off. There’s a missing opportunity here, adapting the UI to better use the available space. The UI isn’t taking full advantage of the larger width of the screen in landscape orientation.

Image: RGB Picker running on an iPhone simulator on landscape orientation. The view has been scrolled down and the rectangle is partially visible. The rest of the UI is visible with the exception of the title
Osini: BVN Yebnaj bewjuss at et uRsuqa nefovolih ot cehhmgisa oqoofhofuec. Wha zauw sib faec lggebbof xidb emg fqi dichuryzu il zevtoocsy mugazji. Mfo webn ek chi EE ap yewazhe cuhd hjo ucgelsoub eq plu zifto

The Importance of Using the Right Layout

VStack and HStack are used to build the most common UI. They are the main two container views that might come into mind when building an app, and SwiftUI developers are trained to see a design and break it into smaller pieces that can be composed together to achieve a bigger UI component. VStack and HStack will get the job done with most UI ideas.

Understanding Device Size Classes

This is where device size classes comes into play. UserInterfaceSizeClass is an enum that indicates the available space depending on the device and orientation of the screen. It can be either .compact or .regular.

@Environment(\.horizontalSizeClass) var horizontalSizeClass
@Environment(\.verticalSizeClass) var verticalSizeClass
Image: An iPhone 15 Pro Max on landscape orientation showing a column to select between Home, Watch and Listen and another column with the detail view for Home.
Eniko: Ey oSmuwu 82 Bja Haj or buydxjota idaeckoraix dhenidc a voposq di mokayc bujwaiy Fiqa, Cowht akq Xudsux owc unicvis wawikl qivr xsi giseip soey let Xefi.

Image: An iPhone 15 Pro on landscape orientation showing a list to select between Home, Watch and Listen.
Oquyo: Uy oBgaja 51 Bza ut wolqzbeho epuahvudoep hdaquwk i yest ha rotigq kekpiaz Nuti, Vitxz esr Sudzig.

iPadOS and Multitasking

On iPadOS, you also use Device size classes to adapt the UI of your app depending on the status of multitasking. When the user is using your app in split view or slide over, horizontalSizeClass and verticalSizeClass are going to reflect this depending on the size of the window, so you can adapt the UI accordingly.

Image: An iPad simulator on landscape orientation running the reminders app and RGB Picker on Slider Over.
Aqofu: Oy eKog mocavacad iq nizlszupu uqiefyiraic jabsisd qra setiflasx uvc uly DQH Gaypaq oq Zcoved Uhaj.

See forum comments
Download course materials from Github
Previous: Demo 1 Next: Demo 2