Introduction

RGB Picker is looking great! Users can use the app on their iPhone and browse the total range of RGB colors to find the perfect combination of red, green, and blue. The code is looking great too. It’s well-organized and way less repetitive than before.

And because SwiftUI works on all of Apple’s platforms, RGB Picker is ready to run on the iPad, too. Isn’t that cool?

While the app is running great on the iPad, it still has a couple of layout problems on the iPhone. Take a look at what happens when you rotate the device to match the landscape orientation of the iPad.

Not good. Part of the UI is off screen. The title, part of the color rectangle, blue slider and button are out of bounds.

SwiftUI supports landscape orientation out of the box, but the code you wrote to build the UI does not. The app arranges views vertically and ends up taking all the limited vertical space on-screen when the device is in landscape orientation, pushing part of the view out of bounds.

You’re going to fix that next so that users can use RGB Picker in any orientation they’d like.

In this lesson, you’ll:

• Learn the importance of Portrait and Landscape layouts and how they differ depending on the device.
• Learn about the possible solutions to this kind of issue and how ScrollView can be a quick fix.
• Use Device Size Classes and switch between two views depending on the orientation of the device.

Additionally, you’ll continue refactoring code to keep your project clean and organized while improving RGB Picker.