Why is it so? The answer lies in the plenty of device screen sizes, which has made it difficult for the developers to create an app that supports all screen resolutions. Here, Apple’s auto layout is a great news, which is around us since 2012 and continuously improved year after another.
Let’s understand the concept:
The auto layout is an incredible layout engine that provides multi-resolution support to the range of the devices where the interface gets automatically adapt to the screen size, so no image distortion or content trimming would occur. Besides, no new storyboards or nibs need to be created for every language, even for the right-to-left language, which makes app internationalization effortless. In a nutshell, the app’s user interface grow, shrink, or move depending on the screen size due to the auto layout.
It has made the life of developers terribly easier and flexible with the development of more fluid layouts with trivial layout logic in code.
Also Read: UX Design Strategy and Tips to transform your Mobile App
How does the auto layout work?
The auto layout is a series of UI based rules or constraints which calculate the size and position of the views on the screen based on the constraints placed on the views. For instance, a button is a constraint which must be positioned horizontally centered with an image view alongside the button’s top edge should remain 4 points below the image’s bottom.Later, in the event, if the position or image view’s size changes, the button position will remain horizontally centered because it auto adjust to the match calculated.
The constraint-based approach enables beautiful and dynamic interface creation that respond to the different device screen sizes and orientation.
Let’s create the user interface using the auto layout:
If you are a novice player in the iOS development space, then creating the user interface with interface builder using auto layout inside Xcode perhaps foreign to you. Before we dive in, take a quick glance at a few terminologies you come across when jumping on to the dynamic UI development bandwagon.
The stack views are a kind of UI View subclass that manages the content layout and simplifies the logic required for the remaining layout. They are considered as best for crafting the UIs with increasing complexity at speed, in addition to a high degree of control over the arranged views in the sense of how they are laid out. This is why stack views must be used wherever possible.
The second is the intrinsic content size that represents the minimum size of the view for displaying all the content in the label without getting cropped. Well, the intrinsic size of the view can be set in the interface builder, but the interface builder uses the default size returned from the view’s intrinsic Content Size method.
Additionally, Pin menu, align menu, document align, attributes inspector, and T-bars are the tools that make UI creation leveraging auto layout a breeze.
Know Also: What are the factors to be considered in app design for iPhone X?
Now, it’s time to get your hands dirty on adaptive UI development using different components:
• Using Intrinsic Content Size
The apps having dynamic content which is fetched from the cloud and changes on a regular basis, then it becomes essential for the app to handle the content of varying length and dimensions. The auto layout with intrinsic content size perfectly takes the advantage of itas the view's with the intrinsic content size generally determine by themselves of what size a view should be.For instance, a view like- UILabel determine the view size from the text, and UIImageView determines it from the original image size.
But, this is not the case always, when the constraint is not set for a given dimension, then the view's intrinsic content sizes are used to measure the dimension. Many times, the NSLayoutConstraints are defined in a way that can be satisfied in a limited way through content hugging and content compression resistance.
With content hugging, the view size can be restricted to not grow larger than its intrinsic content size and with content compression resistance, the view size can be restricted to not become smaller than its intrinsic content size.Both content hugging and content compression resistance can be set either programmatically or through interface builder. It ensures that neither the content will shrink nor grow more so that the content won’t get truncated on the interface.
In this manner,the intrinsic content sizes can be used to auto-adapt the changes in the content, which in turn, makes developing and maintaining the interface a lot easier.
• Using stack view
The stack view is a holy grail that can be used in conjunction with the auto layout to make the UI highly adaptable and modifiable. The new UI component- UIStackView hide the details of constraint management from the developers as every view has its own intrinsic content size which makes adaptable UI development a ton easier.
First thing first, the stack view quite resembles a feature of Microsoft PowerPoint where the multiple objects when grouped together, then they can be easily resized or moved as a single object. In a stack view, an interface is provided where the collection of multiple UI objects can be embedded as subviews in a row or column, which eliminates the need to define auto layout constraint for every subview.
In this manner, the mobile app developers can quickly and easily define the layout constraints for the stack view, and later, stack view manages the layout of subviews and apply the layout constraints to all the subviews. It implies the subviews together readily adapt the interface of a multitude of devices with different resolution. Also, adding or removing the subviews from the layout is no more taxing because the stack view dynamically updates its layout when the views are added/removed.
Moreover, the complex UIs can be built with minimal auto layout pain when one stack view is embedded in another stack view. The advanced option- ‘hide view’ in the stack view is a bonus that makes the interface dynamic where any view in the stack view can be displayed or hidden based on the certain conditions.
The stack view can be used in Xcode in two ways- one is using stack option in the auto layout bar, and the second is dragging the stack view from the object library and putting it straight into the storyboard.
Back to the generation when the first iPhone released in the market, developing and designing the iOS app was a piece of cake for the developers. But, as the advanced iPhone and iPad make inroads into the market with increased size and resolution, building a pixel-perfect interface that responds to every device was a major roadblock for the developers.
After auto layout release in the market, building responsive pixel-perfect designs become effortless. It enables the developers to craft UI designs that scale up and down for creating unmatched mobile experiences for every generation of the iPhone and the iPad without getting crushed with misplaced views or ambiguous layouts.
Save yourself the frustration and time,which comes in making the UI that adapts the changes in device orientation and screen sizes with auto layout, in addition to stack view and intrinsic content size.