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.
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.
To get to the following view, double click the constraint (Proportional Width to: X)
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.*
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+)
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).
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)
www.raywenderlich.com/83276/beginning-adaptive-layout-tutorial ( I had did this tutorial for 4 times again and again to practise 🙂