Swift：如何在Interface Builder中约束视图至ImageView适配后内容尺寸？

当然可以实现你要的效果！不过得先说清楚：在Interface Builder里没法直接给aspect fit模式下的图片内容边界添加约束——因为ImageView的外框和实际显示的图片内容之间会有空白（比如图片是竖屏、ImageView是横屏时，左右会留白），IB识别不到这个动态变化的内容区域的布局锚点。不过我们可以用「IB基础布局+少量代码」的组合，轻松搞定这个问题：

第一步：IB里先搭好基础布局 #

• 把你要放在ImageView内部的视图（比如叫overlayView）拖到ImageView里面，给它加两个约束：水平居中、垂直居中，和ImageView对齐。这样不管图片怎么变，这个视图始终会在图片内容的中心。
• 先给overlayView设个临时的宽高约束（比如随便设个200x200），后面我们会用代码动态替换成图片的实际尺寸。

第二步：用代码动态计算图片的显示尺寸并更新约束 #

在ImageView所在的ViewController里，重写viewDidLayoutSubviews方法，在这里计算aspect fit模式下图片的实际显示尺寸，然后更新内部视图的约束：

Swift版本 #

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    
    guard let image = imageView.image else { return }
    
    // 计算图片和ImageView的宽高比
    let imageAspectRatio = image.size.width / image.size.height
    let viewAspectRatio = imageView.bounds.width / imageView.bounds.height
    
    // 根据比例算出图片实际显示的帧
    let imageFrame: CGRect
    if imageAspectRatio > viewAspectRatio {
        // 图片比ImageView宽，高度撑满ImageView，宽度按比例缩放
        let displayHeight = imageView.bounds.height
        let displayWidth = displayHeight * imageAspectRatio
        imageFrame = CGRect(x: (imageView.bounds.width - displayWidth)/2, y: 0, width: displayWidth, height: displayHeight)
    } else {
        // 图片比ImageView高，宽度撑满ImageView，高度按比例缩放
        let displayWidth = imageView.bounds.width
        let displayHeight = displayWidth / imageAspectRatio
        imageFrame = CGRect(x: 0, y: (imageView.bounds.height - displayHeight)/2, width: displayWidth, height: displayHeight)
    }
    
    // 更新内部视图的宽高约束
    // 先关掉旧的约束
    overlayView.widthAnchor.constraint(equalToConstant: overlayView.bounds.width).isActive = false
    overlayView.heightAnchor.constraint(equalToConstant: overlayView.bounds.height).isActive = false
    // 添加新的约束，绑定到图片的实际显示尺寸
    overlayView.widthAnchor.constraint(equalToConstant: imageFrame.width).isActive = true
    overlayView.heightAnchor.constraint(equalToConstant: imageFrame.height).isActive = true
}

Objective-C版本 #

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    
    UIImage *image = self.imageView.image;
    if (!image) return;
    
    CGFloat imageAspectRatio = image.size.width / image.size.height;
    CGFloat viewAspectRatio = self.imageView.bounds.size.width / self.imageView.bounds.size.height;
    
    CGRect imageFrame;
    if (imageAspectRatio > viewAspectRatio) {
        CGFloat displayHeight = self.imageView.bounds.size.height;
        CGFloat displayWidth = displayHeight * imageAspectRatio;
        imageFrame = CGRectMake((self.imageView.bounds.size.width - displayWidth)/2, 0, displayWidth, displayHeight);
    } else {
        CGFloat displayWidth = self.imageView.bounds.size.width;
        CGFloat displayHeight = displayWidth / imageAspectRatio;
        imageFrame = CGRectMake(0, (self.imageView.bounds.size.height - displayHeight)/2, displayWidth, displayHeight);
    }
    
    // 更新约束
    [self.overlayView.widthAnchor constraintEqualToConstant:self.overlayView.bounds.size.width].active = NO;
    [self.overlayView.heightAnchor constraintEqualToConstant:self.overlayView.bounds.size.height].active = NO;
    
    [self.overlayView.widthAnchor constraintEqualToConstant:imageFrame.size.width].active = YES;
    [self.overlayView.heightAnchor constraintEqualToConstant:imageFrame.size.height].active = YES;
}

额外提示：动态加载图片时的处理 #

如果你的ImageView是动态加载图片（比如从网络拉取），记得在设置完图片后，调用imageView.setNeedsLayout()来触发约束更新：

// 示例：设置图片后触发布局更新
imageView.image = fetchedImage
imageView.setNeedsLayout()

这样一来，不管ImageView的尺寸怎么变化，或者加载的图片比例如何，你的内部视图都会完美贴合aspect fit模式下的图片内容区域啦！

内容的提问来源于stack exchange，提问作者Logan