Centering a view in its superview using Visual Format Language

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?

Slapup

Answer 1

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.

Paulita

Thank you for that detailed answer. The only reason for me to use VFL, however, is getting rid of those ugly chunks of constraints. Too bad Apple does not support this yet... – Slapup

@Paulita Could you comment on why the answer below works? It's got me stumped. – Geniculate

Evgeny's answer below works because the autolayout engine treats | and [superview] as separate internal entities even though they represent the same semantic object. By using [superview], autolayout is including the superview object in its alignment metrics (in the case in his answer at the github link, its the NSLayoutFormatAlignAllCenterY/X metric). – Paulita

Do we know if the limitation still applies with the version of VFL that ships with current iOS 7.x? – Jacktar

Isn't VFL: "|-(>=20)-[view]-(>=20)-|" your solution? I'm confused as to why you are saying NO... – Medieval

@Honey Since the padding on either side of [view] is an inequality, it results in an ambiguous constraint set, in this case since view also doesn't have any defined constraints on it's axis. Basically, there can be several different valid layouts for that VFL string, so auto layout deems that ambiguous. – Paulita

Answer 2

Yes, it is possible to center a view in its superview with Visual Format Language. Both vertically and horizontally. Here is the demo:

https://github.com/evgenyneu/center-vfl

Crosse

This is awesome, do you think you could expand on this and explain why it works? – Touber

I ended up utilizing something closer to the marked answer, but +1 for a github attachment in yours – Catawba

@Dan If it doesn't work for you, you might need to have constraints in place for width and height as well. The VFL would be like this for width: @"[label(==200)]" and like this for height: @"V:[label(==200)]" – Andes

Why are the results from | and [superview] different? Is this something that should be radar'd or is there going on that I'm just not following? – Geniculate

@MattG I would like to know too. It is like adding constraints to self.view and self.view itself is a subview in self.view? Mind blowing – Tanta

@shinnyx Check out the comment above from larsacus – Geniculate

@Touber it aligns the centres of the label and its superview. There is a bit more detailed answer on github demo page. – Crosse

Unable to parse constraint format: Options mask required views to be aligned on a horizontal edge, which is not allowed for layout that is also horizontal. H:[superview]-(<=1)-[label1] – Castiron

when I replaced "[superview]" to '|' ,it will not work. in apple's document they are equals. is there a bug? – Tananarive

Note H: goes with NSLayoutFormatAlignAllCenterY and V: goes with NSLayoutFormatAlignAllCenterX – Lockman

Your repos code doesn't work for me. I found an another solution for this. If you want to Horizontal Alignment, just use it [parentView addConstraint:[NSLayoutConstraint constraintWithItem:subView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:parentView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; – Kaine

Answer 3

I think it is better to manually create constraints.

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

---

Now we can use NSLayoutAnchor to programatically define AutoLayout:

(Available in iOS 9.0 and later)

view.centerXAnchor.constraint(equalTo: superview.centerXAnchor).isActive = true
view.centerYAnchor.constraint(equalTo: superview.centerYAnchor).isActive = true

---

I recommend using SnapKit, which is a DSL to make Auto Layout easy on both iOS and macOS.

view.snp.makeConstraints({ $0.center.equalToSuperview() })

Coniology

Worked best im my context - no VFL though. – Felicle

it give me an warning: Warning once only: Detected a case where constraints ambiguously suggest a height of zero for a tableview cell's content view. We're considering the collapse unintentional and using standard height instead. – Marienthal

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])

Boarder

Answer 5

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]];

Appalachia

Answer 6

I know it's not want you want but you can of course calculate the margins and use them to create the visual format string ;)

Anyway, no. Unfortunatly it's not possible to do that 'automatically' with VFL - at least not yet.

Jagatai

Well, you can use NSString stringWithFormat: to build your VFL string dynamically at runtime. – Actinopod

Answer 7

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.

Compete

Answer 8

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.

Mortmain

Answer 9

You can use extra views.

NSDictionary *formats =
@{
  @"H:|[centerXView]|": @0,
  @"V:|[centerYView]|": @0,
  @"H:[centerYView(0)]-(>=0)-[yourView]": @(NSLayoutFormatAlignAllCenterY),
  @"V:[centerXView(0)]-(>=0)-[yourView]": @(NSLayoutFormatAlignAllCenterX),
};
NSDictionary *views = @{
  @"centerXView": centerXView, 
  @"centerYView": centerYView, 
  @"yourView": yourView,
};
 ^(NSString *format, NSNumber *options, BOOL *stop) {
     [superview addConstraints:
      [NSLayoutConstraint constraintsWithVisualFormat:format
                                              options:options.integerValue
                                              metrics:nil
                                                views:views]];
 }];

If you want it neat, then centerXView.hidden = centerYView.hidden = YES;.

PS: I am not sure I can call the extra views "placeholders", because English is my second language. It will be appreciated if someone can tell me that.

Nickelic

Something is missing here. How do you call the block under the views declaration? It is not a legal code the way you put it – Skolnik

Answer 10

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".

Orvalorvan

Answer 11

@igor-muzyka answer in Swift 2:

NSLayoutConstraint.constraintsWithVisualFormat("H:[view]-(<=1)-[subview]", 
                                               options: .AlignAllCenterY,
                                               metrics: nil,
                                               views: ["view":view, "subview":subview])

Zitazitah

Answer 12

This is my method

//create a 100*100 rect in the center of superView
var consts = NSLayoutConstraint.constraints(withVisualFormat: "H:|-space-[myView]-space-|", options: [], metrics:["space":view.bounds.width/2-50], views:["myView":myView])

consts += NSLayoutConstraint.constraints(withVisualFormat: "V:|-space-[myView]-space-|", options: [], metrics: ["space":view.bounds.height/2-50], views: ["myView":myView])

Bremble

Answer 13

Just need to say, that u can use this instead of constraints:

child.center = [parent convertPoint:parent.center fromView:parent.superview];

Wauters

Just need to say, that's not what he's asking for nor will it work if you rotate the device, screen get's resized, etc. – Russon

Answer 14

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.

Vhf