调整大小后使用自动布局以编程方式居中 UIImageVIew

Question

我只在 IB 中使用过自动布局，想知道如何在调整 UIImageView 大小后以编程方式将其设置为垂直和水平居中。

基本上 UIImageView 包含一张照片，然后 UIImageView 会调整大小以适合照片。在此过程之后，我想知道如何设置约束以正确定位图像。

下面的代码展示了加载图片和设置 UIImageView 的过程。目前定位是手动完成的，不使用 AutoLayout。

- (void)setupUI {

CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHeight = screenRect.size.height;

self.imageViewCanvas.translatesAutoresizingMaskIntoConstraints = YES;
[self.imageViewCanvas setFrame:CGRectMake(0, 0, screenWidth, screenHeight)];

self.btnTool.alpha = 0;

}

- (void)loadNewImageIntoCanvas {

[self.imageViewCanvas setImage:self.imageToEdit];

[self imageSizeAfterAspectFit:self.imageViewCanvas];

[UIImageView animateWithDuration:0.2 animations:^{
    self.imageViewCanvas.alpha = 1;
} completion:^(BOOL finished) {

    [self showBTNTool];

}];


}

- (void)resetCanvasSize {

CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHeight = screenRect.size.height;

[self.imageViewCanvas setFrame:CGRectMake(0, 0, screenWidth, screenHeight)];

}

-(CGSize)imageSizeAfterAspectFit:(UIImageView*)imgview{

CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHeight = screenRect.size.height;

CGRect newSize = [self frameForImage:self.imageViewCanvas.image inImageViewAspectFit:self.imageViewCanvas];

float newwidth = newSize.size.width;
float newheight = newSize.size.height;

float new_x = (screenWidth / 2) - (newwidth / 2);
float new_y = (screenHeight / 2) - (newheight / 2);

[self.imageViewCanvas setFrame:CGRectMake(new_x, new_y, newwidth, newheight)];

return CGSizeMake(0, 0);

}

-(CGRect)frameForImage:(UIImage*)image inImageViewAspectFit:(UIImageView*)imageView {

float imageRatio = image.size.width / image.size.height;

float viewRatio = imageView.frame.size.width / imageView.frame.size.height;

if(imageRatio < viewRatio)
{
    float scale = imageView.frame.size.height / image.size.height;

    float width = scale * image.size.width;

    float topLeftX = (imageView.frame.size.width - width) * 0.5;

    return CGRectMake(topLeftX, 0, width, imageView.frame.size.height);
}
else
{
    float scale = imageView.frame.size.width / image.size.width;

    float height = scale * image.size.height;

    float topLeftY = (imageView.frame.size.height - height) * 0.5;

    return CGRectMake(0, topLeftY, imageView.frame.size.width, height);
}
}

Answer 1

为了使用自动布局使图像视图居中，您还需要对宽度和高度进行约束。不仅是 centerXAnchor 和 centerYAnchor。 因为UIImageView 没有intrinsicContentSize。

（请注意，centerXAnchor 和 centerYAnchor 方法仅适用于 iOS 9.0+）

self.imageView.translatesAutoresizingMaskIntoConstraints = NO;

[self.imageView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = YES;
[self.imageView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = YES;

[self.imageView.widthAnchor constraintEqualToConstant:self.imageWidth].active = YES;
[self.imageView.heightAnchor constraintEqualToConstant:self.imageHeight].active = YES;

Answer 2

你可以这么说。

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.imageViewCanvas attribute: NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0]];

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.imageViewCanvas attribute: NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1.0 constant:0.0]];

但这还不足以满足所有必要的约束。 IMO，在 IB 中设置约束更容易，如果您需要动态更改约束，为它们创建一个 IBOutlet，并更改它们的常量属性。

例如，您可以为图像视图的高度约束创建一个 IBOutlet，称为 imageViewHeightConstraint，为您的图像视图的宽度约束创建另一个，称为 imageViewWidthConstraint，然后您可以说：

self.imageViewHeightConstraint.constant = 400;
self.imageViewWidthConstraint.constant = 400;