Centering a view in its superview using Visual For

Question

I just started learning AutoLayout for iOS and had a look at Visual Format Language.

It all works fine except for one thing: I just can't get a view to center within its superview.
Is this possible with VFL or do I need to manually create a constraint myself?

Answer 1

Add below code and have your button at the center of the screen. Absolutely possible.

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"H:|-[button]-|"
                           options:NSLayoutFormatAlignAllCenterY
                           metrics:0
                           views:views]];

[self.view addConstraints:[NSLayoutConstraint
                           constraintsWithVisualFormat:@"V:|-[button]-|"
                           options:NSLayoutFormatAlignAllCenterX
                           metrics:0
                           views:views]];

Answer 2

For those who came here for an Interface Builder based solution (Google leads me here), just add const width/height constraints, and select the subview -> control drag to it's superview -> select "center vertically/horizontally in superview".

Answer 3

Instead of using VFL, you can easily do this in interface builder. In the Main Storyboard, ctrl+click on the view you want to center. Drag to the superview (while holding ctrl) and select "Center X" or "Center Y". No code needed.

Answer 4

Absolutely possible was able to do it like this:

[NSLayoutConstraint constraintsWithVisualFormat:@"H:[view]-(<=1)-[subview]"
                                        options:NSLayoutFormatAlignAllCenterY
                                        metrics:nil
                                          views:NSDictionaryOfVariableBindings(view, subview)];

Learned this from here. Code above centers subview in view by Y obviously.

Swift3:

        NSLayoutConstraint.constraints(withVisualFormat: "H:[view]-(<=1)-[subview]",
                                       options: .alignAllCenterY,
                                                       metrics: nil,
                                                       views: ["view":self, "subview":_spinnerView])

Answer 5

What it have to be done is that superview should be declared in the dictionary. Instead of using | you use @{@"super": view.superview};.

And NSLayoutFormatAlignAllCenterX for vertical and NSLayoutFormatAlignAllCenterY for horizontal as options.

Answer 6

Thanks to the answer from @Evgenii, I create a full example in gist:

center the red square vertically with custom height

https://gist.github.com/yallenh/9fc2104b719742ae51384ed95dcaf626

You can center a view vertically by useing either VFL (which is not quite intuitive) or use constraints manually. By the way, I cannot combine both centerY and height together in VFL like:

"H:[subView]-(<=1)-[followIcon(==customHeight)]"

In the current solution VFL constraints are added separately.