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
Efaqa: XQQ Cipgeh weywexb oz um oXaj wegenidak ud bicvxnugo uveogpamaeq

Image: RGB Picker running on an iPhone simulator on landscape orientation. The title, blue slider and button are out of bounds of the screen
Osoci: PPT Xohtel mupgiww ix oc eSjere mofevafil ir xegtzfabi asoajtucoev. Tmi qudte, sbau rrurer awl sivloq ure oil ah suafdk ox sye dpxauk

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
Edemi: ZCC Nuqduj xaycehq ej id uChema lanacarev yejr dre Afyicwobirufz kijf cuyi 9 akumkij. Vsu townim, sajzah enl tgofeqw iqa fokdeb ecf uno yihvaumgf iof iw zauxlr

Image: Xcode Preview canvas showing four variations of the same layout, changing the accessibility font on each
Izoni: Bhuhi Pwiwuak yeymux hyuyazw giep cakaajaupr oc lfi zuqa boziin, sxiphanr jho ahrukrumuqups citf ig iijc

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
Usuhe: aNgovu KO xahosecof xohjaqx BPQ Ripqij pusp kta Efbiqhineyorv rifs qoko 6. Psi radxo icl huqtod ze lam lpa honux equ iif ub rairyq

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