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

Question

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

下面是我的源代码

 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 大小约束。

从iOS9开始你可以使用这些简单的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 或其他任何方式。

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

Centring images to a view using autolayout Objective C

objective-c

autolayout

visual-format-language