Centering a view in its superview using Visual Format Language
IosLayoutAutolayoutVisual Format-LanguageIos Problem Overview
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?
Ios Solutions
Solution 1 - Ios
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.
Solution 2 - Ios
Yes, it is possible to center a view in its superview with Visual Format Language. Both vertically and horizontally. Here is the demo:
Solution 3 - Ios
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() })
Solution 4 - Ios
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])
Solution 5 - Ios
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]];
Solution 6 - Ios
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.
Solution 7 - Ios
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.
Solution 8 - Ios
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.
Solution 9 - Ios
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.
Solution 10 - Ios
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".
Solution 11 - Ios
@igor-muzyka answer in Swift 2:
NSLayoutConstraint.constraintsWithVisualFormat("H:[view]-(<=1)-[subview]",
options: .AlignAllCenterY,
metrics: nil,
views: ["view":view, "subview":subview])
Solution 12 - Ios
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])
Solution 13 - Ios
Just need to say, that u can use this instead of constraints:
child.center = [parent convertPoint:parent.center fromView:parent.superview];
Solution 14 - Ios
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.