In this blog, we will illustrate how to add NSLayoutConstraints in interface builder which adapt to modifies in these variables, permitting us to create apps which run on both iphone and ipad.
The following are some useful terminology:
Trait — Each of the environment variables described above is a trait; screen size, orientation, and adaptation.
Device configuration — A devices configuration is a combination of the three traits mentioned above; screen size, orientation (portrait or landscape), and adaptation (iPads running in multitasking mode display in a split-screen, referred to as an adaptation).
Size class — A size class is a trait identifies the relative amount of width (horizontal) or height (vertical) available for a view. Size classes depend on the three traits already described. The interface builder has two size classes; compact (in portrait mode, iPhone width is compact, iPhone height is regular), and regular (in landscape mode, iPhone width is regular, iPhone height is compact).
Adding adaptive constraints
Here we will use the following simple example of adding a single UIView to another view to describe how to add adaptive constraints
Our main target is to add constraints which adapt and modify based on environment variables. This will result in three layout variations:
iPhone, portrait — Our added view should be rectangular, pinned to the left side of the device, and centered vertically.
iPhone, landscape — Our added view should be square, pinned to the top of the device, and centered horizontally.
iPad, portrait or landscape — Our included display should be rectangular, pinned to the right of the device, and centered vertically.
The following steps explains you easily be applied to this trait
Step 1: We initiate in interface builder with a UIViewController which holds only its default UIView.
Step 2: then add a new UIView as a subview, and modify its background color to make it easily identifiable.
Step 3: In this step, open the device configuration pane by selecting the ‘View as:…’ button at the bottom left of the interface builder.
The image shown above is device configuration pane, which permits us to choose a device, orientation and adaption (if an ipads device is selected). In the above image, the selected device is an iPhone 8 Plus, and the orientation is portrait. The device configuration pane also shows us the size classes for the selected device configuration. In this case the width size class is compact, and the height size class is regular. This is showed by the ‘(wC hR)’ text at the top of the device configuration pane.
Now we add constraints for our first layout variation, iPhone in portrait orientation. Tap the ‘Vary for Traits’ button at the bottom right. A popover display, allowing us to select which size class traits we want to create a layout variation for, e.g width, height, or both. Selecting a size class trait creates a variation based on the size class for the currently selected device configuration. e.g If we select width, the variation will be for all compact widths, as that is the width size class for the currently selected device configuration. In our case, we want to create a variation based on both the width and height size classes of the selected device configuration. Select both of these in the popover.
Step 6: To remove the popover, click outside and now add our constraints for this layout variation. Remember, on iPhone in portrait, our added view should be rectangular, pinned to the left side of the device, and centered vertically. In added view, we add a width constraint of 100 and height constraint of 600. Then constrain the view’s leading edge to the safe-area’s leading edge, and constrain the view’s center Y value to the safe-area’s center Y value. When we added the constraint, click the ‘done varying’ button in the bottom right. The image shows you the added constraints and resulting layout
Step 7: Now we move on to our second layout variation, iPhone in landscape orientation. Our currently selected device configuration is iPhone 8 in portrait, so in the device configuration pane, change the orientation to landscape. Updating interface builder will reflect this change in number of places.
First, updating interface builder display the outline of an iPhone in landscape orientation. Second, update in the text at the top of the device configuration pane is to show the new size classes. Here the new size classes are regular width and compact height, ‘ ( wRhC)’. Third , the constraints we included for our first device configuration are now disabled, shows faded in the interface builder document outline. The image below shows the entire changes.
Step 8: As before, we click the ‘Vary for Traits’ button. In the popover that appears, select both the width and height size classes. This particular configuration applies only to iPhones in landscape orientation. Next, we add the constraints. Remember, for this configuration, our view should be square, pinned to the top of the device, and centered horizontally. Add a width constraint of 300 to our added view, and a height constraint of 300. Then constrain the view’s top edge to the safe-area’s top edge, and constrain the view’s center X value to the safe-area’s center X value. When we included the constraint, click the ‘Done Varying’ button in the bottom right. The constraints we included for this configuration will shown active, while the constraints we added for the previous configuration will show faded, representing they are inactive. Observe the image below.
Step 9: In the end, our third layout variation, iPad in portrait or landscape orientations. Exploit the device configuration pane to choose the device configuration, selecting either portrait or landscape (ignore the ‘Adaptation’ options, as we said we are only considering full-screen iPad configurations), and click the ‘Vary for Traits’ button. Like previous, select both width and height size classes from the popover, and include constraints which will result in our display being rectangular, click to the right of the device, and centered vertically. Once we have included the constraints click the ‘Done varying’ button. The constraints and resulting layouts are shown in the following image mentioned below.
Now we added constraints for our three device configurations. To check fast that constraints we added are correct, we can again choose each device configuration, and view whether the related constraints in the document outline are active.
for more queries,feel free to contact our expertise.
Last Update: September 4, 2018