AUTO LAYOUT in iOS with Xcode 8 (Part-2)
In the previous tutorial of Auto Layout, we discussed only about Constraints. Now in this tutorial blog, we will discuss & implement Auto Layout Size Classes & Trait Collections into our application in Xcode 8.
Before moving to implementation part, let’s discuss first what is Size Classes ?
1. SIZE CLASSES
Size classes refers to categorisation of the screen sizes and orientation of all iPhone/iPad. Hence Interface Builder provides customisation of layout on the basis of current Size Class and further layout then automatically adapts when size class changes. Most Important, Interface builder by default use size classes.
Size Classes categories
There are two sizes for size classes: compact, and regular.
compact: meaning your interface is having shortest dimension.
regular: meaning your interface is having longest dimension.
With the above two terms, categories are as follows:
- Compact-Compact -> wC hC, where w is width & h is height.
- Compact-Regular -> wC hR
- Regular-Compact -> wR hC
- Regular-Regular -> wR hR
This category is known as Final Size Classes in which four size classes are there and also shown in below screenshot.
There is also a word Any like Compact or Regular. Any is generic size that works for all devices. Compact or Regular can be specified with Any which will create five more categories as follows:
- Compact-Any
- Any-Compact
- Regular-Any
- Any-Regular
- Any-Any
This above category is known as Base Size Classes and its abstract size classes which can represent two or more Final Size Classes. For Example - In Compact-Any size class appear in both Compact-Compact & Compact-Regular size views.
The following features can be set up using Size Classes:
- Views can be resized or repositioned.
- Fonts and colors can be changed.
- Constraints can be activated/deactivated (called installed and uninstalled).
- Views can be added or removed (also called installed and uninstalled).
2. Trait Collections
Trait Collection is the collection which defines Vertical & Horizontal size class, and display scale.
Varying for traits
Varying for traits is great for making more significant changes to a layout for a size class. Let’s explore varying for traits by adding a view and a constraint for different size classes in the sample application.
You may have noticed the Vary for Traits button at the right of the device configuration bar, and wondered what that button was for. Well, wonder no more! You can use the Vary for Traits button to start varying a layout just for specific size classes.
With an iPhone 7 device selected in the device configuration bar, select Vary for Traits. On clicking that button, two options will be appeared to vary for the width size class (wR), height size class (hR), or both (wR hR). In our case, select only height for landscape mode. When you make your selection, the device configuration bar will turn blue and you will see which devices and orientations you will be varying the layout for.
Now, let’s get started to create new Xcode project for implementing Size Classes and see how it works.
Following are the steps to implement Auto Layout Size Classes & Trait Collections:
Step 1: Open Xcode -> click on Create New Xcode project then choose Single View Application template under iOS tab as shown in below image and click Next button.
Step 2: Enter the product name as AutoLayoutDemo(Part-2), select any Language and again click Next button as shown in below image. Later click Create button to create project appear on the next window.
Step 3: Adding UIButton into the View Controller.
On your project, click on main.storyboard file available in the project navigator, then View Controller will be shown where you need to add button by searching from object library, drag into the superview of View Controller, it will look like below.
Now, select button and change its Background colour to ‘Blue’ & Text colour to ‘White’ just to look better. (Optional to you)
Step 4: Applying Constraints to UIButton using Layout Bar
As discussed earlier, to set the button at the centre, you need to define that four constraints: center horizontally and center vertically with its width and height as well. All constraints are with respect to the view.
For applying align constraints, select UIButton & then to add constraints for width and height by clicking ‘Adding New Constraints’ from layout bar, check Height and for width pin it from left and right & then click on “Add 3 Constraints” button as mentioned below.
After adding above 3 constraints, click the Align icon in the layout bar. In the pop-over menu, check only “Vertically in container” options. Then click the “Add 1 Constraints” button because width is dynamic so Horizontal position is not required.
After applying all 4 constraints, it look as can be seen in below image. Blue line indicates that constraints are applied successfully.
Step 5: Customising constraints of UIButton in Landscape.
Select UIButton then click on ‘+’ sign of Background property in Attribute Inspector. Now, for Landscape mode, width as Any and height as Compact should be selected as shown below.
Thereafter, choose any different colour (peach colour is selected). The above added property will be shown as mentioned below.
Step 6: Apply Vary for Traits for the landscape mode.
Now, you need to change orientation from Portrait to Landscape of View Controller.
Then click on Vary for Traits as appeared on right hand side.
After clicking on that button, two variations will be displayed - width & height. In our case, we need to only select height for landscape mode.
Thereafter, drag & drop a new button from object library to the view controller in landscape mode. Add the constraints as shown in below screenshots.
After adding all constraints to that new button, click on Done Varying to complete the trait collections process.
Step 7: Run Simulator to test result.
Hence you can now run the simulator to check the Buttons in Portrait as well as Landscape orientation.
Hopefully, this tutorial is helpful to you.
Enjoy ! Have Fun
No comments:
Post a Comment