Deep understanding replaces simple memory

Top/Bottom Layout Guide

  • Initially (iOS 7), NSLayoutConstraint represents the constraint and is applied directly to the view

  • Later (iOS 9), a set of APIS for NSLayoutAnchor emerged because the API for directly adding constraints was too long

    view1.topAnchor.constraint(equalTo: view2.centerYAnchor).isActive = true
Copy the code

  • – Top/Bottom Layout Guide is also available to solve the problem of avoiding the Top navigation bar and status bar when Layout with root view of ViewController (because without these two guides, some magic numbers may appear in code)

  • TopLayoutGuide is of UILayoutSupportprotocol type

    • This type is providedlengthFor frame layout
    • Also providestopAnchor,bottomAnchor,lengthFor Autolayout layouts

Auto Layout Guide

IOS 11 and later was deprecated, replaced by the much better safeArea

LayoutMargins

A relative layout mechanism between views and subviews; Think of it as an area where subview layout is not recommended

  • Every view has itlayoutMarginsandlayoutMarginsGuideTwo properties (corresponding to frame and Autolayout layouts)
  • This property tells subViews that I recommend that you do not cover up your layoutlayoutMarginsRange of representation
  • So according to the idea above
    • In the use oflayoutMarginsGuideOr select IB layout relative to Margin when the superviewlayoutMarginsWhen changes occur, the position of the subview changes relative to each other
    • In addition to the linkage changes mentioned above, whenpreservesSuperviewLayoutMarginsWhen the property is true (the default is false), linkage changes as well. What’s changing is that the view that sets the property to subview layout considers the layoutMargins set by View.superView. For example, the layoutMargins set by View.superView are pretty big, So that the subview may be laid out where the view.superview does not want it to be, and enabling this property will automatically adjust the subview position
  • IOS 11 was introduceddirectionalLayoutMargins, it islayoutMarginAn updated version oflayoutMaringThere’s only left and right in the horizontal direction, butdirectionalLayoutMarginsUse leading and trailing to dynamically configure horizontal margins for languages with different reading directions

Positioning Content Within Layout Margins

safeArea

  • Introduced in iOS 11, there is a safeArea for each UIView, which represents a layable safeArea that can’t be blocked by other controls
    • The safeArea of a UIViewController view takes into account the Status bar, navigation bar, and TAB bar
  • SafeArea is similar to layoutMargin, which is also reflected in autolayout and non-Autolayout
    • safeAreaLayoutGuideUsed for autolayout
    • safeAreaInsetsFor frame layout
  • These two properties of safeArea cannot be modified
    • But the view of UIViewController can be setadditionalSafeAreaInsetsTo extend the safearea

Positioning Content Relative to the Safe Area

safeArea vs layoutMargin

As of now (iOS version 13 as of this writing)

  • Safearea was not created to replace layoutMargin. It can be seen from the fact that layoutMargin has not been abandoned that both mechanisms can work normally

  • LayoutMargin can be modified, safeArea cannot

  • Is that the only connection between insetsLayoutMarginsFromSafeArea when is true, and layoutMargin beyond the limits of safearea when layoutMargin will automatically adjust to the size of the safearea

  • Layout Guide, Margins, Insets and Safe Area demystified on iOS 10 & 11