eco-system has grown to support a plethora of iOS devices in the market. They all are different in shapes and dimensions which present a unique challenge for app developers to optimize apps for different size and context. But how can we do that? The answer is . iOS Adaptivity Why Adaptivity? With adaptivity, we can layout interface specially formatted for the environment. If the environment has limited space, we might want to display the most important and simplified piece of information. On the other hand, if the environment has ample amount of space, then we can layout our apps to display sufficient content. One of the tools that Xcode provides is . For small adaptivity conditions (same layout across all orientations) AutoLayout works fine. But for different layout across different device size and orientation, another tool should be used i.e. . AutoLayout Trait Collection Size Class A is a specification of a display’s width or height that can be used to describe a family of devices and orientations. All widths and heights fall into one of two size classes — or . size class compact regular iOS Devices Size Classes One should be aware of size classes while designing an adaptive layout. Enough talk?🙊 Let’s get started Download the starter project here Make sure you have the right tools when you start building your first adaptive layout.🔧 Example project works fine in both of the orientations. What we want is to improve our layout for landscape mode. We can use size classes to leverage this. Open file and check for yourself Main.storyboard Inside document outline select Username Stack View Perform following steps: Click ( ) add customization → + Attribute Inspector > Axis Select Height: Compact, Width: Any Adding Customization for iOS Landscape 3. Select for our size class Horizontal Remember h represents size class for iPhone Device in landscape mode which implies . 🏋 C compact height for any width Repeat the same procedure for Password Stack View. Now we can add some spacing between the text fields by changing spacing of . Fields Stack View Fields Stack View Last but not least, set following options for : Buttons Stack View Buttons Stack View Hurrah!! We have successfully optimized our layout for landscape mode. 🎉 Optimized Login Layout For Landscape Mode What’s Next? 🤔 Trait collection provides huge control for developers to build highly optimized user interface for any iOS device available. Using this tool we can completely replace the interface without even writing a single line of code. Download Complete Project Feedback and get in touch on twitter Thanks for reading! 🤹 @khfarooq

Apple

iOS Adaptive Layouts

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Alertable Errors in Swift ⛔️

Auto Layout UI Examples

SwifWeb and How to Center the Div!

Understanding Auto Layout in Xcode 9

105 Stories To Learn About Ios App Development

10 Things You Didn't Know You Could Do With Google Keep

Alertable Errors in Swift ⛔️

Auto Layout UI Examples

SwifWeb and How to Center the Div!

Understanding Auto Layout in Xcode 9

105 Stories To Learn About Ios App Development

10 Things You Didn't Know You Could Do With Google Keep

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps