Centering a view in a super view with Visual Format Language using Auto Layout in iOS/Swift
Latest commit 1ffd879 Jul 31, 2015 Evgenii Neumerzhitckii Update to Swift 2.0

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(
  options: NSLayoutFormatOptions.AlignAllCenterX,
  metrics: nil,
  views: ["superview":view, "label":label])


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


Centering in superview with VFL

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.