Instruction 1

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

Supporting Landscape Orientation

Most commonly, iPhone users keep their phones in portrait orientation. That’s how most apps work and how most of them were built to work. However, it’s not the only way to use an iPhone. Many apps also support landscape orientation. Some apps are even built only for landscape orientation, like games or video apps. So while RGB Picker works great in portrait orientation, it has a ways to go on landscape.

Image: RGB Picker running on an iPad simulator on landscape orientation
Isozu: YZQ Memquq wobcojx ic os oYok resutejud ut vitbqgege ofeabdociaz

Image: RGB Picker running on an iPhone simulator on landscape orientation. The title, blue slider and button are out of bounds of the screen
Atedo: DDL Siqwof jefxexq ay ib aCpofa cexonedih im beqkbxosa acioqtobiiw. Bxo duqmi, vwoi zjaqux ihq zolbaz eye uon if ziesxl us snu svyuef

Accessibility and Large Fonts

Building UI that adapts to different context isn’t just about allowing users to use your app on landscape orientation. It’s also about allowing users to use your app in any way they need to. SwiftUI was built with the tools to make accessible apps right out of the box. It supports all accessibility features like Voice Over, Dynamic Type and Voice Control to deliver high-quality apps to everyone.

Image: RGB Picker running on an iPhone simulator with the Accessibility font size 5 enabled. The titles, button and sliders are bigger and are partially out of bounds
Ejazu: CLL Keqquz kusbuzx id ep ePwisi regotagis hezr wke Icwibgoguzuhl yoph beza 6 efijvud. Zha kilmab, zoxsod ubs kxecemt iza tiqfep ulk oxi caylaoqzj out ax coikfc

Image: Xcode Preview canvas showing four variations of the same layout, changing the accessibility font on each
Eziku: Tguge Jzegief gilqep rbavuyr haap yoziuziofm ez yla lelo hemoiy, vtedvohw tso uspaxkonebasd xavn ud euzf

Using ScrollView to Solve This Problem

A quick and simple way to fix the issue of the layout being out of bounds is to allow users to scroll through the view, so they can see the rest of the content that’s out of bounds. By adding a ScrollView to the view hierarchy, users can scroll down and see the button at the bottom.

Image: iPhone SE simulator running RGB Picker with the Accessibility font size 4. The title and button to set the color are out of bounds
Ipumu: iNzawa KO doxeseleb kivpayh CQK Riztit yucb zyi Axjivtevacucq sevk xafo 8. Cpi yaqta ocb hidfiq ma fep hpe femes ide uob al zaubdg

Drawbacks of Using ScrollView

While you might feel that using a ScrollView on every view might be a good idea, there are a couple of problems with this solution.

ScrollView {
  VStack {
    Header()
    Spacer()
    Title()
  }
}
ScrollView {
  VStack(spacing: 32) {
    Header()
    Title()
  }
}
See forum comments
Download course materials from Github
Previous: Introduction Next: Demo 1