objective-c - 使用自动布局Objective C将图像居中到视图

Question

我有两个图像 - profileImageView、profileImageViewOfLoggedInUser，它们彼此相距 20 像素，我想将它们放在视图的中心。

下面是我的源代码

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

请让我知道要添加的代码。

在添加以下代码时，我得到了如下屏幕截图所示的 UI：-

    NSLayoutConstraint *centerXConstraint = [self.detailContainer.centerXAnchor constraintEqualToAnchor:_profileImageView.centerXAnchor];
[self.detailContainer addConstraint:centerXConstraint];

Answer 1

如果你想让 ImageView 相对于它的超级视图居中，你不应该指定一些奇怪的边距或其他东西。您所要做的就是指定 2 个用于居中的约束和 2 个用于 imageView 大小的约束。

在 iOS 9 中，您可以使用这些简单的 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];

然后，您可以相对于第一个图像视图约束第二个图像视图（因为第一个图像视图已经受到约束）。您可以使用VFL或其他方式。