inzan / center-vfl

Centering a view in a super view with Visual Format Language using Auto Layout in iOS/Swift

Centering a view in a super view with visual format language using Auto Layout in iOS/Swift

This is an example of centeing a label in its view using Visual Format Language. Tested in iOS 7, 8 and 9.

Here is the code from view controller that does the trick:

// Center horizontally
var constraints = NSLayoutConstraint.constraintsWithVisualFormat(
  "V:[superview]-(<=1)-[label]",
  options: NSLayoutFormatOptions.AlignAllCenterX,
  metrics: nil,
  views: ["superview":view, "label":label])

view.addConstraints(constraints)

 // Center vertically
constraints = NSLayoutConstraint.constraintsWithVisualFormat(
  "H:[superview]-(<=1)-[label]",
  options: NSLayoutFormatOptions.AlignAllCenterY,
  metrics: nil,
  views: ["superview":view, "label":label])

view.addConstraints(constraints)

How it works

This code is something like special theory of relativity. I can not say I completely understand it. But it seems to work.

We use two visual format strings:

1. @"V:[superview]-(<=1)-[label]" with AlignAllCenterX option
2. @"H:[superview]-(<=1)-[label]" with AlignAllCenterY option

It aligns X and Y centres of the label and its superview. The (<=1) inequality constraints are needed to allow those centering constraints do their job. If we had just [superview][label] it would probably stick the edges of the label and its superview together.

Feedback is welcome

If you need help or want to improve this technique feel free to create a pull request, or comment on this stackoverflow answer.