Centering a view in its superview using Visual Format Language

by

Currently, no, it doesn’t look like it is possible to center a view in the superview using only VFL. It is, however, not that difficult to do it using a single VFL string and a single extra constraint (per axis):

VFL: "|-(>=20)-[view]-(>=20)-|"

[NSLayoutConstraint constraintWithItem:view
                             attribute:NSLayoutAttributeCenterX
                             relatedBy:NSLayoutRelationEqual
                                toItem:view.superview
                             attribute:NSLayoutAttributeCenterX
                            multiplier:1.f constant:0.f];

One would think that you would simply be able to do this (which is what I initially thought and tried when I saw this question):

[NSLayoutConstraint constraintsWithVisualFormat:@"|-(>=20)-[view(==200)]-(>=20)-|"
                                 options: NSLayoutFormatAlignAllCenterX | NSLayoutFormatAlignAllCenterY
                                 metrics:nil
                                   views:@{@"view" : view}];

I tried many different variations of the above trying to bend it to my will, but this does not appear to apply to the superview even when explicitly having two separate VFL strings for both axes (H:|V:). I then started to try and isolate exactly when the options do get applied to the VFL. They appear to not apply to the superview in the VFL and will only apply to any explicit views that are mentioned in the VFL string (which is disappointing in certain cases).

I hope in the future Apple adds some kind of new option to have the VFL options take into account the superview, even if doing it only when there is only a single explicit view besides the superview in the VFL. Another solution could be another option passed into the VFL that says something like: NSLayoutFormatOptionIncludeSuperview.

Needless to say, I learned a lot about VFL trying to answer this question.

More Related Contents:

  1. On iOS, what are the differences between margins, edge insets, content insets, alignment rects, layout margins, anchors…?
  2. Using Auto Layout in UITableView for dynamic cell layouts & variable row heights
  3. How to add constraints programmatically using Swift
  4. What is “Constrain to margin” in Storyboard in Xcode 6
  5. reloadData() of UITableView with Dynamic cell heights causes jumpy scrolling
  6. Enabling auto layout in iOS 6 while remaining backwards compatible with iOS 5
  7. Is it possible for UIStackView to scroll?
  8. Interface Builder: What are the UIView’s Layout iOS 6/7 Deltas for?
  9. iOS AutoLayout – get frame size width
  10. Setting tableHeaderView height dynamically
  11. Using ScrollView Programmatically in Swift 3
  12. AutoLayout + RTL + UILabel text alignment
  13. Simple way to change the position of UIView?
  14. Auto layout UIScrollView with subviews with dynamic heights
  15. UICollectionView header dynamic height using Auto Layout
  16. Centering subview’s X in autolayout throws “not prepared for the constraint”
  17. How to keep a round imageView round using auto layout?
  18. Need assistance setting two buttons of equal width, side by side Autolayout
  19. Wrap items in a horizontal UIStackView on multiple lines
  20. How do I put the image on the right side of the text in a UIButton?
  21. How can I get a view’s current width and height when using autolayout constraints?
  22. AutoLayout link two UILabels to have the same font size
  23. Specifying one Dimension of Cells in UICollectionView using Auto Layout
  24. setNeedsLayout and setNeedsDisplay
  25. iOS ScrollView needs constraint for y position or height
  26. Trouble with AutoLayout on UITableViewCell
  27. Layout attributes relative to the layout margin on iOS versions prior to 8.0
  28. UITextView is not scrolled to top when loaded
  29. AutoLayout, Unable to simultaneously satisfy constraints
  30. UITableView auto resizing row constraint breaking mysteriously on iPhone 6Plus

Leave a Comment