UILayoutGuide is a virtual placeholder added to iOS 9 to help developers use Auto Layout.

Let’s start with a scenario you might encounter in layout: there are two buttons of equal width, and the space between the two buttons is equal to the distance from the left and right edges. So what do YOU do with Auto Layout?





There is an equality constraint in the constraint, but there is no margin equality constraint. Obviously, we cannot directly configure the constraint to meet the requirements.

A common idea is to convert margins to a placeholder View so that equal properties can be set. But this View should be set to Hidden and should not be seen by the user. This allows us to set the widths of the three virtual views to be equal, and then set their leading and trailing constraints in order to achieve the desired result.

There is also a case where two controls need to be grouped and centered. In this case we will also introduce a View, add the two controls to the container View, and center the container View.

But a View that is designed to aid layout has one uncomfortable aspect: it is in the View hierarchy and still receives messages when events are routed. That’s the problem UILayoutGuide is trying to solve. A UILayoutGuide can be added to a View and, like a View, can set various constraints and participate in the layout. But it will not be rendered and will not respond to event routes. You can also include views directly like box.

Here is a direct code demonstration of how to center two controls. Snapkit is used for constraints, not using the native crappy API.

First we initialize two Views and a LayoutGuide.

        let label = UILabel()
        label.text = "UILabel"
        view.addSubview(label)

        let testView = UIView()
        testView.backgroundColor = UIColor.cyan
        view.addSubview(testView)

        let container = UILayoutGuide()
        view.addLayoutGuide(container)Copy the code

LayoutGuide is added to the View using the addLayoutGuide method. Next, we set the edges of the label, testView, and Container to be connected with an offset of 20 between them.

        label.snp.makeConstraints { (make) in
            make.left.equalTo(container)
            make.centerY.equalTo(container)
        }

        testView.snp.makeConstraints { (make) in
            make.left.equalTo(label.snp.right).offset(20)
            make.height.equalTo(40)
            make.width.equalTo(120)
            make.right.equalTo(container)
            make.centerY.equalTo(container)
        }Copy the code

So the width of the container is equal to the width of the two Views plus the offset of 20. The centerY of the two views is the same as the container. We can then set the container constraint:

      container.snp.makeConstraints { (make) in
            make.height.equalTo(5)
            make.center.equalTo(view)
        }Copy the code

Running it will do the trick:





Anything that requires the help of a virtual View can be handed over to UILayoutGuide. It’s lighter, faster and funnier. UILayoutGuide doesn’t actually create a View, it just creates a rectangular space and only participates in auto Layout calculations.

One last reminder, this is a new feature in iOS 9. God bless the kids who still support iOS 7.

Welcome to my micro blog: @Zhuo who has no story