以编程方式使用自动布局将图像定位到视图的中心

Question

我正在尝试使用 NSLayoutConstraint 将图片定位到视图的中心，如下所示：

NSInteger userPictureRadius = 50.0F;

UIImageView *imgv = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - userPictureRadius,
                                                                  self.topArea.bounds.size.height / 2 - userPictureRadius + 20,
                                                                  userPictureRadius * 2,
                                                                  userPictureRadius * 2)];

NSString *urlString= [NSString stringWithFormat:@"%@%@",[[Parameters sharedInstance] BASE_URL], [[MyCredentialStore sharedInstance] getPicturePath]] ;

[imgv sd_setImageWithURL:[NSURL URLWithString:urlString]  placeholderImage:nil];
imgv.layer.cornerRadius = imgv.frame.size.height / 2;
imgv.layer.masksToBounds = YES;
imgv.layer.borderWidth = 0;
[imgv.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imgv.layer setBorderWidth: 2.0];
[imgv setTranslatesAutoresizingMaskIntoConstraints:NO];

...

[self.topArea addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[imgv(100)]-|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:elementsDictionary]];

[self.topArea addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[imgv(100)]-|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:elementsDictionary]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[_topArea]-|"
                                                                       options:0
                                                                       metrics:nil
                                                                         views:elementsDictionary]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[_topArea]-[_tableView]-|"
                                                                  options:0
                                                                  metrics:nil
                                                                    views:elementsDictionary]];

我这里有两个问题：

图像出现在屏幕的左上角。
顶部区域和屏幕边框之间有空白space。

你能告诉我我的代码有什么问题吗？

Answer 1

如果您选择自动布局，则使用手动坐标毫无意义

UIImageView *imgv = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.bounds.size.width / 2 - userPictureRadius,
                                                                  self.topArea.bounds.size.height / 2 - userPictureRadius + 20,
                                                                  userPictureRadius * 2,
                                                                  userPictureRadius * 2)];

应该变成公正

UIImageView *imgv = [[UIImageView alloc] init];

显示您如何构造 elementsDictionary 的代码，以便我可以尝试进一步提供帮助。

另外 post 一张您所面临的视觉问题的小屏幕截图会更好。

Answer 2

无法使用自动布局视觉格式语言 (VFL) 进行这样的居中。您提供的 VFL 字符串通过标准距离将图像视图的边缘与其超级视图相关联。例如，H:|-[imgv(100)]-| 建立三个约束：图像视图的前缘等于其父视图的前缘加上标准距离，图像视图的宽度为 100 点，父视图的后缘等于图像视图的后缘加上标准距离.这将导致指定图像视图及其父视图的大小。我想图像视图将在其父视图中居中，但它的父视图可能不是您期望的大小。

要使一个视图在另一个视图中水平居中，请使用如下内容：

NSLayoutConstraint* constraint = [NSLayoutConstraint constraintWithItem:imgv
                                                              attribute:NSLayoutAttributeCenterX
                                                              relatedBy:NSLayoutRelationEqual
                                                                 toItem:imgv.superview
                                                              attribute:NSLayoutAttributeCenterX
                                                             multiplier:1
                                                               constant:0];
[imgv.superview addConstraint:constraint];

你会为垂直方向做类似的事情。如果你想强制图像视图为特定大小，你可以为此使用单独的约束。（如果您愿意，可以为此使用 VFL。它类似于 H:[imgv(100)]。请注意，那里与另一个视图无关，只是宽度。）

以编程方式使用自动布局将图像定位到视图的中心

Locating an image to centre of a view with auto layout programatically

objective-c

ios

autolayout

nslayoutconstraint