Centring images to a view using autolayout Objective C

Question

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

Answer 1

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.