CODEWITHSUNDEEP
iosobjective-cuiviewautolayoutnslayoutconstraint
StuartM
StuartM

Reputation: 6813

Creating constraint to center label in view

I am trying to programatically setup some constraints. I have one container view UIView which holds three subviews.

UIView - circleView
UILabel - label1
UILabel - label2

The circleview is shown at the top of the container at (0,0,width,80). The label1 is shown underneath the circleview with 5.0 padding.

I am now trying to add the label2 to be in the center of the circleView. How do I do this with AutoLayout programatically.

This is what I currently do. 

NSDictionary *views = NSDictionaryOfVariableBindings(circleView,labelView, iconLbl);

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[circleView(circleSize)]|" options:0 metrics:metrics views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[labelView]|" options:0 metrics:metrics views:views]];
[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[circleView(circleSize)]-(padding)-[labelView]-|" options:0 metrics:metrics views:views]];

The label2 is the iconLbl view in the dictionary.

Upvotes: 0

Views: 2941

Answers (3)

Bimawa
Bimawa

Reputation: 3700

With Masonry library

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.center.equalTo(view);
}];

Upvotes: 0

rvijay007
rvijay007

Reputation: 1357

This should be relatively straightforward - it helps to use xib to see how many constraints you actually need to get the effect you want. Constraining a label to be in the center of another view, both of which are in a parentView, only requires 2 constraints to be fully constrained. If this were a regular UIView, you'd need 4 constraints (x,y,width,height), but the label will automatically determine it's width and height from it's content, so it's not ambiguous. This is of course if you other views are all properly constrained, but you only asked about the label2 in the circle view.

I prefer to use the non-visual form for defining constraints because they read like mathematical equations. What you want is:

label2.centerX = circleView.centerX*1 + 0;

label2.centerY = circleView.centerY*1 + 0;

Since these are siblings with a common parent, the constraints are added to the parentView. So you get the following two constraints.

[parentView addConstraint:[NSLayoutConstraint constraintWithItem:label2  attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:circleView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];

[parentView addConstraint:[NSLayoutConstraint constraintWithItem:label2  attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:circleView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];

This is sufficient for getting label2 centered in the parentView. Any issues you get will likely be due to other constraints between your views not being properly specified.

Upvotes: 2

nprd
nprd

Reputation: 1942

Can you try this?

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[circleView(circleSize)]" options:0 metrics:metrics views:views]];      //Dont link to both the sides. Dock to the left edge

[self addConstraint:[NSLayoutConstraint constraintWithItem:self.view  attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self. labelView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0  ]]; //Specify the X

[self addConstraint:[NSLayoutConstraint constraintWithItem:self.view  attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self. labelView attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0  ]]; //Specify Y

[self addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[circleView(circleSize)]" options:0 metrics:metrics views:views]]; //Dock the circle to the top

Upvotes: 1

Related Questions