如何调整UIImageView的Frame以匹配缩放后图片的尺寸？

要让UIImageView的Frame匹配scaleAspectFill缩放后的图片尺寸，你需要根据原图尺寸和容器视图的尺寸，计算出图片缩放后的实际大小，再以此设置imageView的Frame。同时还要限制拖动范围，确保图片始终在容器可视区域内。

修改后的完整代码 #

private func setupViews() {
    let containerView = UIView()
    containerView.clipsToBounds = true
    containerView.backgroundColor = .gray

    view.addSubview(containerView)
    containerView.frame.size = CGSize(width: 300.0, height: 100.0)
    containerView.center = view.center

    let imageView = UIImageView()
    imageView.contentMode = .scaleAspectFill
    guard let image = UIImage(named: "one") else { return }
    imageView.image = image

    // 计算scaleAspectFill下的图片实际尺寸
    let containerSize = containerView.bounds.size
    let imageSize = image.size
    
    let widthScale = containerSize.width / imageSize.width
    let heightScale = containerSize.height / imageSize.height
    // scaleAspectFill取较大的缩放比例
    let scale = max(widthScale, heightScale)
    
    // 计算imageView的实际尺寸
    let scaledImageWidth = imageSize.width * scale
    let scaledImageHeight = imageSize.height * scale
    imageView.frame = CGRect(x: (containerSize.width - scaledImageWidth)/2, 
                             y: (containerSize.height - scaledImageHeight)/2, 
                             width: scaledImageWidth, 
                             height: scaledImageHeight)
    
    containerView.addSubview(imageView)

    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan))
    imageView.addGestureRecognizer(panGesture)
    imageView.isUserInteractionEnabled = true
}

@objc func handlePan(_ gesture: UIPanGestureRecognizer) {
    guard let imageView = gesture.view as? UIImageView, 
          let containerView = imageView.superview else {
        return
    }

    let translation = gesture.translation(in: containerView)
    
    // 计算新的center位置
    var newCenterX = imageView.center.x + translation.x
    var newCenterY = imageView.center.y + translation.y
    
    // 限制拖动范围，确保图片始终覆盖容器可视区域
    let containerBounds = containerView.bounds
    let imageViewBounds = imageView.bounds
    
    // X轴边界：imageView左边缘不超过container左边缘，右边缘不超过container右边缘
    newCenterX = max(containerBounds.midX - (imageViewBounds.width - containerBounds.width)/2, 
                     min(newCenterX, containerBounds.midX + (imageViewBounds.width - containerBounds.width)/2))
    
    // Y轴边界：imageView上边缘不超过container上边缘，下边缘不超过container下边缘
    newCenterY = max(containerBounds.midY - (imageViewBounds.height - containerBounds.height)/2, 
                     min(newCenterY, containerBounds.midY + (imageViewBounds.height - containerBounds.height)/2))
    
    imageView.center = CGPoint(x: newCenterX, y: newCenterY)
    gesture.setTranslation(.zero, in: containerView)
}

关键逻辑说明 #

• 计算缩放后的图片尺寸：

  • 分别计算宽、高方向的缩放比例，取较大值（完全匹配scaleAspectFill的缩放规则）
  • 用该比例乘以原图尺寸，得到imageView需要的实际大小
  • 初始时将imageView居中放置在容器内，保证图片裁剪效果和原有逻辑一致

• 限制拖动范围：

  • 计算imageView的可拖动边界，避免拖动时图片完全移出容器可视区域
  • 对X、Y轴的center值做上下限约束，确保用户拖动时始终能看到图片的一部分

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