Adaptive layout: Autolayout and size classes

Note

Only available iOS 6 and later.

Part 1: Working with Constraints

This might not be new anymore and I used to avoid using it when I did UI maintenance (erm.. still using auto-resizing for all) . It might be frustrating at first because the elements will not behave the same as your brain think they should and they went poof missing on the screen when you update the frames.

Constraints
Align | Pin | Issue | Resizing

I usually set element to be horizontal centre (select the box with blue tick) in container but just clicking the element and go for the bottom right of the storyboard to add the constraint.

When you need to pin an element to have 139pt with the above element(take note this is not y coordinates but only the point away from the top element. Your element can be 200pt from top but it has to be 139pt from the nearest top element) Remember to take note of the constrain to margins  box as it contain default padding from device. If the blue box is ticked, the left padding is 19 + 20(auto-margin) = 39pt. Remember deselect if it is not what you want.

Part 2: Working with Autolayout

You will notice the beauty of autolayout if you application caters for different screen size and orientation. Keep going, re-read the same lines or get your hands on practical to try to make yourself slowly understand how all these worked.

Screen Shot 2015-04-04 at 3.48.30 pm

To get to the following view, double click the constraint (Proportional Width to: X)

Screen Shot 2015-04-04 at 3.23.39 pm

What is relation?

According to the above image, you can relate it as “If  XX’s width is equal X.width” then Xcode will perform the following algorithm

FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant

What is multiplier?

In the case, we wish to have the width of the XX to be 2X wider than the X textfield then we need to set the multiplier to 2. (Etc: If x width is 10, then xx’s width is 20)

So if we have 3 textfields and we want to keep the ratio 2:7:1 then we can made the ratio textfield’s multiplier to 7 (to X, not XX )

*If you notice all the elements ended up disappeared, remember to check if you have set the x and y for them.*

Result

ratio 2:7:1

Part 3: Size classes

New in Xcode 6.

The size classes now enable the merging of iPhone and iPad storyboard into one. You can choose to only implement your constraint into some but not all the outputs and also adaptive fonts as well. (For more details, refer the tutorial section)

For a better note to rememeber:

Compact: iPhone       (except Regular Width | Compact Height – iPhone 6+)

Regular:   iPad

FotorCreated1 FotorCreated2 FotorCreated3

Your elements might be in different design when it is in portrait and in landscape mode so size classes will come in handy. Notice the blue bar at the bottom? It indicates that you are now in one of the size classes (wCompact hAny) so your changes will only affect those devices. The bar without blue means you are in base layout mode (iPhone and iPad mode).

sizeclasses2

When you double clicked your element’s constraint at size inspector, you can specify the size classes but clicking the “+” (“x” to remove the installation of that constraint)

Tutorial:

www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial ( I had did this tutorial for 4 times again and again to practise 🙂

References:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html

Video Tutorial: Beginning Auto Layout

http://stackoverflow.com/questions/25693318/difference-between-compact-and-regular-size-class

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/WorkingwithConstraints/WorkingwithConstraints.html

https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/chapters/EditingConstraintAttributesintheAttributesInspector.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s