iOS Layouts Revisited
This article is about iOS layouts, best practices, UI issues you deal with on a day to day basis as an iOS developer and how to handle them.
In iOS, to setup any view, Auto Layout is used. For this article we will consider Auto Layout for Interface Builder. In Auto Layout, constraints are the rules which you impose on UI elements.
For a system to identify a position of any UI element, a minimum set of constraints are required. For example to position a view, x, y coordinates, height and width are required. Either you provide all these information with constant constraints or else system will calculate it with respect to its neighbouring element’s constraints or superview’s constraints.
Let’s discuss few of the issues which we encounter while developing UI.
Handling Autolayout and UI Issues:
What is Intrinsic Content Size?
As the name suggests, intrinsic content size means that the size(width and height) of the UI component is calculated by its content. For example, if you drag and drop an image view and specify top and leading constraints to it, Xcode will show an error for missing constraints.
If an image is assigned to it from the property inspector, you can see that the error is gone, as the size of the image can be determined.
Why is it important?
In some of the cases, images and text would be dynamic(not available at build time), so assigning constant width and height wouldn’t be a good option. In these cases assigning a default text or image should work.
What is Content Hugging Priority and Compression Resistance Priority?
Content hugging priority and compression resistance priority come into picture when there are constraints between the two UI elements which have intrinsic content size. In this case, system is unable to decide which element should shrink and which should expand.
Setting higher value for content hugging priority indicates that you don’t want the element to expand more than its intrinsic content size. Similarly, setting higher value for compression resistance priority indicates that you don’t want the element to shrink more than its intrinsic content size. These two properties can be set for both horizontal and vertical axis.
What is Safe Area?
iPhoneX was released with a major design change, which led to various layout issues as topLayoutGuide and bottomLayoutGuide were being used.
Safe area is nothing but the visible area of the screen (excluding the status bar, navigation bar ,toolbar, tab bar, etc.). With the introduction of iOS 11, safe area layout guide was also introduced, so that positioning of the elements should be done with respect to safe area.
How to Debug UI issues?
Many times it so happens that you have set some UI element, but it’s not visible on the screen during runtime. In situations like these, View Hierarchy Debugger is quite handy.
Introduced in Xcode 6, View hierarchy debugger could be used to inspect UI elements in the view hierarchy.
It stops the app in debugging mode and shows all the UI elements present on the screen in hierarchical format from background elements to the elements in the foreground. You can easily inspect the size and constraints on each of these element.
How to Handle Breaking Constraints?
If you have worked with Auto Layout in iOS, you must have encountered this log at least once. Sometimes these logs are very difficult to read and frustrating to deal with.
The easiest way to start debugging this is to look for the element name and start searching it in the code or storyboard. Then go through all the constraints which you have applied on it.
To speed up the debugging process, you can use https://www.wtfautolayout.com/
You just need to copy the logs and paste it on their console. They convert the logs into pictorial representation of the constraints with description as shown below:
Debugging constraints in this format would be much easier.
These were some of the UI issues and concepts we should be aware of while developing UI in iOS. This is the first part of the series iOS Layouts Revisited. The subsequent parts in this series will cover UIStackViews, Auto Layout with UIStackViews and Size Classes. Hope this was helpful.
