I have two images - profileImageView, profileImageViewOfLoggedInUser which is 20px apart from each other and i want to centre them to the view.
Below is my source code
static CGFloat const MeetingDetailNameLabelMarginX = 20;
NSDictionary *views = @{
@"imageView": self.profileImageView,
@"imageViewForLoggedInUser": self.profileImageViewOfLoggedInUser,
@"nameLabel": self.nameLabel,
@"companyNameLabel": self.companyNameLabel,
@"positionLabel": self.positionLabel,
@"statusLabel": self.statusLabel,
};
NSDictionary *metrics = @{
@"imagePaddingLeft": @(MeetingDetailImageViewMarginX),
@"imagePaddingTop": @(MeetingDetailImageViewMarginY),
@"nameLabelPaddingLeft": @(MeetingDetailNameLabelMarginX),
@"nameLabelPaddingRight": @(MeetingDetailNameLabelMarginRightX),
@"nameLabelPaddingTop": @(MeetingDetailImageViewSize + MeetingDetailImageViewMarginY),
@"imageSize": @(MeetingDetailImageViewSize),
@"nameLabelHeight": @(nameLabelFrame.size.height),
@"otherLabelHeight": @(MeetingDetailOtherLabelHeight),
@"dateLabelWidth": @(self.dateLabel.frame.size.width),
@"statusLabelWidth": @(statusFrame.size.width),
@"statusLabelMarginLeftFromView": @(MeetingDetailImageViewMarginX),
};
// image left and width
[self.detailContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[imageView(imageSize)]"
options:0
metrics:metrics
views:views]];
[self.detailContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView]-imagePaddingLeft-[imageViewForLoggedInUser(imageSize)]"
options:0
metrics:metrics
views:views]];
// image top and height
[self.detailContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-imagePaddingTop-[imageView(imageSize)]"
options:0
metrics:metrics
views:views]];
[self.detailContainer addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-imagePaddingTop-[imageViewForLoggedInUser(imageSize)]"
options:0
metrics:metrics
views:views]];
Please let me know the code to be added.
I get the UI as seen in below screenshot on adding the following code:-
NSLayoutConstraint *centerXConstraint = [self.detailContainer.centerXAnchor constraintEqualToAnchor:_profileImageView.centerXAnchor];
[self.detailContainer addConstraint:centerXConstraint];
If you want to center ImageView relative it's superview, you shouldn't specify some strange margins or something else. All you have to do is specify 2 constraints for centering and 2 constraints for size of imageView.
From iOS 9 you can use these simple api:
NSLayoutConstraint *centerXConstraint = [superView.centerXAnchor constraintEqualToAnchor:imageView.centerXAnchor];
NSLayoutConstraint *centerYConstraint = [superView.centerYAnchor constraintEqualToAnchor:imageView.centerYAnchor];
NSLayoutConstraint *imageViewHeight = [imageView.heightAnchor constraintEqualToConstant:heightValue];
NSLayoutConstraint *imageViewWidth = [imageView.widthAnchor constraintEqualToConstant:widthValue];
Then, you are able to constrain second image view relative to first image view (since first one is already constrained). You can use VFL for it, or whatever.