All Projects → evgenyneu → Center Vfl

evgenyneu / Center Vfl

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

Programming Languages

swift
15916 projects

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)
Centering in superview with VFL

How it works

This code is something like theory of special 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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].