Learn how to add adaptive constraints to support an iOS app and to modify these variables, permitting us to create apps that run on both iPhone and iPad.
Get your best-in-class customized iOS application with latest tech approach, click here and get started!!!
Terminology
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 device 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 that 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 to support an IOS app
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 that 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 explain 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.
Step 4:
The image shown above is a 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 a 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.
Get your best-in-class customized iOS application with latest tech approach, click here and get started!!!
Step 5:
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 the 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 a 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 the 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 the interface builder will reflect this change in a number of places.
First, updating the interface builder to display the outline of an iPhone in landscape orientation. Second, the 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, show faded in the interface builder document outline. The image below shows the entire change.
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 be 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 add constraints in the ios app 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 the constraints we added are correct, we can again choose each device configuration, and view whether add related constraints in the iOS app in the document outline are active.
For more queries, feel free to contact our experts.
Leave a Reply