What is your name?

Alright, {{answer_iCTTz5Ge9AnE}}, are you ready to test your knowledge of Auto Layout?

What is Auto Layout?

What is a UIView?

What are two properties that Auto Layout constraints control on a UIView?

What is the default behavior of a view when placed on your Storyboard canvas?

What first device should you design an iPhone app UI?

How do you center a 100x100 point profile image in the top third of an app?

What is a structural view in terms of Auto Layout?

Why does a fixed pixel layout not work for iOS apps?

What does it mean for a UILabel to be relative to a UIImageView?

What two positional constraints do you need to create between two images that will be in a column layout?

How does Auto Layout enable you to make adaptive layouts?

How do points relate to pixels?

What are size classes?

What are the limitations of size classes?

Great job!

While you answer a few questions, I'll tally up the results.

At the end I'll share what you can do to improve.

How hard was the Auto Layout quiz?

Do you want to learn more about Auto Layout?

Fantastic! You scored {{var_score}} out of 30!

You're a Master Auto Layout Panda!

You've got what it takes to create complex UI designs and turn them into apps!

You have a solid understanding of the concepts, but can you apply that to create any UI?

Mockup the Instagram app (one screen) all in code and test your skills. If you're stuck, maybe you need a mentor.

Perfect practice makes perfect.

Awesome! You scored {{var_score}} out of 30!

You're an Apprentice Auto Layout Panda!

While you understand the core concepts of Auto Layout, you struggle with some of the more advanced concepts.

You will need to take time to practice using Auto Layout and learn more to become more proficient. Find a good instructor to follow, or enroll in a course.

Perfect practice makes perfect.

Way to get {{var_score}} out of 30 on the scoreboard!

You're a Junior Apprentice Auto Layout Panda!

There's a lot to learn when you start using Auto Layout and about iOS apps in general.

You need to start regular practice to learn the fundamentals of Auto Layout. The more you know, the faster you can create the app of your dreams!

Find a good instructor to follow, or enroll in a course to learn faster.

Perfect practice makes perfect.

You're new to Auto Layout and scored {{var_score}} out of 30!

You're a Beginner Panda.

You haven't learned the lingo yet, and that's ok!

Don't worry, everyone starts out as a beginner, the thing that makes you different is your drive to learn, the new job prospect, or because you want to show off an app to friend!

Let's start working on the fundamentals of Auto Layout and iOS apps, so that you can start making the app designs you're dreaming about.

Find a good isntructor to follow, or enroll in a course to learn faster.

Perfect practice makes perfect.

Ready to see the answers?

Auto Layout is a rule based system to describe size and position for adaptive layouts (You selected: {{answer_uuj14Zn3y26W}})

You can use Auto Layout to create UI designs that will fit the entire width and height of the iPhone SE or the iPhone X.

Under the hood, Auto Layout uses linear algebra to do all the complex math to "solve" your UI's size and position . . . so you don't have to hardcode pixel coordinates!

A UIView is both "A container for buttons, images, and labels" AND "A graphical rectangle in an app" (You selected: {{answer_jKwak88EKAHr}})

The UIView is a building block for any iOS app. It can be both a container with subviews, that allow you to organize your app screen into parts, as well as something the user can see and tap on.

It is not an abstract class, because you can create instances of the UIView. And in Swift, we use a Protocol to create an interface, or abstract classes.

Auto Layout constraints control the Position and Size of a UIView (You selected: {{answer_v1gGZiuXoMzu}})

Auto Layout is used to control the layout, or visual blocks of content on the screen. It determines the size of a label in addition to where a UI element appears on the screen.

It does not control the alpha (i.e.: Transparency), rotation, or depth. You can control those programmatically with Swift's UIView properties on the image or label . . . you can even animate these properties.

The default behavior of a view is to be pinned in place with the top left corner. (You selected: {{answer_dQk0iC9RKuZ3}})

The Storyboard automatically creates Auto Layout constraints for new views (i.e.: a UIButton) that pin the view to it's location. The view does not resize and you can see it remains fixed in both size and position when you rotate.

This behavior is why views disappear when you rotate the device.

You should start with iPhone 8. It's the most common screen size and it's the size Xcode defaults to. (You selected: {{answer_CFlocEGbcEgw}})

While it's great to support all device types, it can be overwhelming. Keep it simple and start with iPhone 8. After you add Auto Layout constraints, you can tweak the design to work with other screen sizes. In 2018, less than 18% of iOS users have an iPhone SE size screen, while 47% have an iPhone 8.

It also helps to make sure the app will work on your personal device. I (Paul Solt) use an iPhone 6 Plus, and I plan to get an iPhone X soon.

You want to leverage composition and heirarchy in your app UI. Pin a view to the top third, and add an image as a subview that is centered within this top view. (You selected: {{answer_aX5HHsCbJdTO}})

Composition with subviews to block out portions of your app makes the layout constraints easier and more modular. When you separate an app into parts, you can decouple and simplify constraints between different portions of the screen.

You can create percentage based layouts for the top view using an equal height constraint to the main view with a multiplier value with a 1:3 value.

A structural view is a view that impacts both the height and width of an app screen. It is a main content view. You selected ({{answer_DS2g478wY0uN}})

When you add layout constraints you should add top to bottom, then left to right, and then inside out for any centered content.

The structural views and content areas will be the largest blocks in your UI. A supplemental or detail view on the inside of a structural view generally does not impact size and height, instead it's size and height is based on the parent view.

Apple is launching new devices regular with different screen sizes. All of these devices can rotate orientations and users can use Dynamic Type to resize all labels in apps. (You selected: {{answer_OYP1KoDFhSw6}})

Fixed layouts only work when the form factor is always the same. Now as an app designer you have to think about the main content regions, and how they need to resize or relayout to fill the space.

Auto Layout is the only way that you can do this effectively without wasting enormous amounts of time redesigning every single interface size/font combination.

A relative UILabel's position will be dependent on both the position and size of a UIImageView, even when it animates. (You selected: {{answer_CkH2w5B5qEVb}})

A relative view on iOS means that a view is dependent on another view for it's position (and/or size).

Most apps have a limited number of structural views, and then the surrounding detail or accessory views will be positioned relative to the positions of the structural views.

If you want to center three UIButton's in a row, pin the middle UIButton to the center of the content view, and then make relative positional constraints to the view's vertical center and the horizontal spacing between the adjacent views.

To center two images in a column you need to set both the vertical spacing and the horizontal centering constraints. (You selected: {{answer_MPeD8vfjZPUn}})

A Stack View can help with these layouts when the views in the Stack View are simple.

You can get the same effect by manually adding both of these constraints. If you add the wrong one, just undo and try again.

Points are an abstraction on pixels, because there are different pixel densities with non-retina and retina screens. An iPhone 8 Plus has 3 pixels per point, and an iPhone 8 has 2 pixels per point. (You selected: {{answer_HqvyIty482po}})

The iPhone 7 has 2 pixels per point.

When you design an iOS screen you want to design it at the point size, rather than the specific pixel size. Designs at the point size in Sketch allow you to easily export either vectors (.PDF) or .png files for each resolution type.

When you talk about screen sizes, it's best to focus on points, not pixels.

Size classes are a rough approximation of screen type, enable different layouts based on device orientation, and control UI customizations based on device type. (You selected: {{answer_DosafjkJIbFt}})

Size classes allow you to target iPhone screens in portrait mode. They also help you provide additional views on a large iPhone 8 Plus screen that is rotated.

Size classes make it easier to create universal apps that have different UI on the iPhone vs. the iPad.

Size classes are more geared towards iPhone vs. iPad layouts. They cannot distinguish between the iPhone 8, iPhone X, or even the iPhone SE in portrait. You cannot customize fonts based on size classes. (You selected: {{answer_DehHouClSB2s}})

Size classes are better designed for separating common UI controls between iPhone and iPad.

They are less useful when you want to customize the size of a font between an iPhone SE and an iPhone X. You're better off creating custom logic in code based on the screen width/orientation if you need fine tune control.

Thank you for taking the Auto Layout Quiz!

Try taking the quiz again and see if you can beat your score: {{var_score}} out of 30!

If you're interested in learning fundamentals or practicing more, keep an eye out for an upcoming Auto Layout workbook and online course!
Learn More >
Powered by Typeform
Powered by Typeform