Session 235: UIKit: Apps for Every Size and Shape

About the author: @Hale Lilac Garden iOS engineer

Apple’s mobile devices don’t come in a single resolution size as they did in the early days. IOS12 supports devices of various sizes including iPhone 5S, iPhone8, iPhone8 Plus, iPhone X, iPad, and more. I believe that there must be many developers on the multi-device adaptation development has been troubled, this Session to quickly adapt all models of iOS mobile device development methods are introduced. The attributes and methods described below will allow developers to adapt their projects to the full range of Apple mobile devices in the shortest possible time, without compromising the user experience.

Safe Area and Layout Margins Safe Area and Layout Margins

The safety area

Safe Area was introduced in iOS11 and is a very important property. While this feature is familiar to most developers, the Safe Area was developed to accommodate a full-screen screen like the iPhone X. The safeAreaInsets and safeAreaLayoutGuide properties of UIView can be used to determine the safe zone, which limits the visible portion of the view, as shown in Figure 1.

Safety zones are transitive

As can be seen from the following two figures, the security zone of view A at the bottom is shown in Figure 2, then add A light gray view B that is not limited to the security zone of view A on view B, then add sub-view C on view B, and set the safeAreaLayoutGuide whose constraints depend on view B. The viewable range of view C will be limited to the yellow area in Figure 3, and we can conclude that the safety area of the superview will be passed up, as shown in Figure 2 and 3.

Security zones can be expanded

UIViewController supports the additionalSafeAreaInsets property to customize the size of the extended security zone to meet some application scenarios. In addition UIView provides safeAreaInsetsDidChange () method, UIViewController provides viewSafeAreaInsetsDidChange () method, used to detect changes in safety area. When the view’s security zone changes, the corresponding method is called, as shown in Figure 4.

Layout of the margin

The concept of layoutMargins was introduced in iOS8 to set the margins between sub-views and superviews, and directionalLayoutMargins was added to iOS11. Mainly for Right To Left (RTL) language can be automatically adapted. By default, layoutMargin is 8 points from each edge. Constrain to margins will automatically use directionalLayoutMargins on iOS11 and above by checking Constrain to margins in Interface Builder, as shown in figures 5 and 6.

Security zones and layout margins work together

The layout of the normal following view margin will depend on the safety of the parent view area, but when set up insetsLayoutMarginsFromSafeArea = false, child views can achieve breakthrough to layout the parent view area effect, as shown in figure 7, 8.

Layout child view propagation

When a view preservesSuperviewLayoutMargins attribute to true, when the child views of its layout, the parent view margin will also be considered. If there is a child view’s frame and parent view said margin area is just coincidence, at this point set preservesSuperviewLayoutMargins is true, then the view will be just limited to within the margin of parent view, See Figure 9 and 10.

The minimum margins

Attribute systemMinimumLayoutMargins UIViewController exist, can be rewritten, by default the view the layout of the margin is conditioned by the return value of this attribute. Override this property as follows, and the minimum margin of the view will be [20,20,20,20].

override var systemMinimumLayoutMargins: NSDirectionalEdgeInsets {
        return NSDirectionalEdgeInsets(top: 20, leading: 20, bottom: 20, trailing: 20)}Copy the code

If set viewRespectsSystemMinimumLayoutMargins to false, the view layout margin is not affected by systemMinimumLayoutMargins attribute, a default for,8,8,8 [8].

Scroll views

adjustedContentInset

AdjustedContentInset, a new attribute of UIScrollView, is presented in iOS11. Its value is equal to the original UIScrollView contentInset plus the system inset such as the security zone, as shown in figure 11.

adjustedContentInset = contentInset + system inset
Copy the code

Deprecate Automatic Content Inset

This Session mentioned iOS11 again after the abolition of the original UIViewController attribute automaticallyAdjustsScrollViewInsets instead UIScrollView new enumeration ContentInsetAdjustmentBehavior, this enumeration structure is as follows:

public enum ContentInsetAdjustmentBehavior : Int {
        case automatic
        case scrollableAxes
        case never
        case always
    }
Copy the code

Always, scrollView adjustedContentInset equals safeAreaInsets, navigationBar and tabBar will not block the viewable area. This is shown in Figure 12.

If set enumeration values to scrollableAxes, can in rolling direction, or set up alwaysBounceHorizontal/Vertical to true, an Inset will only take effect. As shown in Figure 14, when the page content is small, scrollView cannot be scrolled vertically, resulting in the text title part blocked by navigationBar, as shown in Figure 13 and 14.

System default Settings enumeration values is automatic, the enumeration values and the basic scrollableAxes performance is consistent, but the only difference is that it also inherits the original automaticallyAdjustsScrollViewInsets = true features, With navigationBar available and isTranslucent true, you can adjust the Inset to make the content visible, even if vertical scrolling is not possible, as shown in Figure 15.

If the enumeration value is set to.nerver, the Inset of the scrollView will not be changed by safeAreaInserts, as shown in Figure 16.

Write adaptive applications

Hide the status bar

If we need to hide the status bar in some scenarios, we usually do this:

class ArticleViewController: UIViewController { 
	override var prefersStatusBarHidden: Bool { 
		return true}}Copy the code

Unfortunately, this doesn’t work on the iPhone X, which only works if you hide the navigationBar, so Apple’s official advice is to hide both the navigationBar and the Status bar. See Figure 17.

readableContentGuide & cellLayoutMarginsFollowreadableWidth

ReadableContentGuide iOS9 put forward the concept of readableContentGuide, which is mainly used for some reading applications. When the visual width is large, it is hoped that the reading area can be limited to a certain range through the layout, which has alleviated the fatigue caused by tracking content moving head during the reading process. ReadableContentGuide spacing varies depending on font size, device size, and other factors. This property is now also compatible with safeAreaInsets. The same UITableView cellLayoutMarginsFollowreadableWidth attributes are also compatible safeAreaInsets, as shown in figure 18, 19 and 20.

insetsContentViewToSafeArea

UITableView began in iOS11 adds a new attribute insetsContentViewsToSafeArea, whether the attribute can control TableViewCell ContentView affected by safeAreaInsets, As shown in Figure 20 and 21.

Bottom button layout best practice

After the iPhone X, we often had a problem with how to lay out the bottom buttons. In this Session, an official solution was given. For example, set the constraint of the bottom of the button distance relative to superView to 16, the Priority of the constraint to 999, and set the constraint value of the bottom of the button relative to safeAreaLayoutGuide to be greater than or equal to 0. Different layouts of buttons can be implemented on the iPhone X and other devices, as shown in Figure 23.

conclusion

In fact, there are no new properties or methods introduced in this Session, the latest properties were introduced in the iOS11 SDK. It’s possible that many developers have solved the problems they encountered when adapting to the iPhone X. However, I think this Session is very necessary. It summarizes the existing UIKit SDK for adaptation development, which will help developers to further understand the correlation between these attributes, which will be of great help to the project development of rapid adaptation of devices of various sizes.

For more WWDC 18 articles, head over to the xSwiftGG WWDC 18 Topics directory