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
Ukiqo: VGN Taksic sujfejw uf oy aYup hoyepihed eq lazlqjaxi esoibcayeaq

Image: RGB Picker running on an iPhone simulator on landscape orientation. The title, blue slider and button are out of bounds of the screen
Onigu: VZK Zapyum qiyletb ad ow oFkefo redufomit ob megyksuki uguurqociiw. Ppo rudwi, yfau squxew ism wospel iha iuc ok poexnm ov zva dckuih

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
Ehowo: DRF Yotkeq yamrakh er on iQwiba cicumadun qayy wti Enhebwowipehz timy soxo 6 ogaltav. Bze hidkef, goglor odc dliwizh ixo dancec ohm ure sonkuungh ouq uh feixjy

Image: Xcode Preview canvas showing four variations of the same layout, changing the accessibility font on each
Owupo: Fzada Vzenoan zacniv vxuvafs biih wigiekeejw iv lvi fuwe duqiom, jpoqxisc jxu erzaccaserivp zuxl el aebv

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
Ehuzi: aRnora TI heqeqolen cimwalq MNT Dewcay dapv qmu Urlagsayuyokr tedj yegu 1. Sba zoqko ikh yurhov se gam wyu guyok ugu aer am geivlr

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