iOS Swift中如何按比例调整UIImage适配视图？

嘿，我来帮你搞定这几个iOS开发里常见的ImageView调整问题，咱们一个个拆解解决：

1. 图片比例不对，设置frame后过大的问题 #

核心思路是保持原图的宽高比，不要直接用ImageView的固定frame适配图片，而是根据原图比例计算合适尺寸：

方法一：手动计算尺寸（代码方式） #

// 假设已获取选中的图片
let selectedImage = UIImage(named: "your-image")!
let pickImage = UIImageView()

// 1. 确定ImageView的最大可用空间（比如父视图留边距后的宽高）
let maxAvailableWidth = pickImage.superview!.bounds.width - 40
let maxAvailableHeight = pickImage.superview!.bounds.height - 40

// 2. 计算原图宽高比
let imageAspectRatio = selectedImage.size.width / selectedImage.size.height

// 3. 根据比例计算ImageView的目标尺寸
var targetWidth: CGFloat
var targetHeight: CGFloat

if imageAspectRatio > 1 { // 宽图
    targetWidth = maxAvailableWidth
    targetHeight = targetWidth / imageAspectRatio
} else { // 高图或正方形
    targetHeight = maxAvailableHeight
    targetWidth = targetHeight * imageAspectRatio
}

// 4. 应用尺寸并居中显示
pickImage.frame = CGRect(x: (pickImage.superview!.bounds.width - targetWidth)/2,
                         y: (pickImage.superview!.bounds.height - targetHeight)/2,
                         width: targetWidth, height: targetHeight)
pickImage.image = selectedImage
pickImage.contentMode = .scaleAspectFit

方法二：AutoLayout宽高比约束（更推荐） #

如果用AutoLayout，直接给ImageView添加宽高比约束，让它自动适配比例：

let selectedImage = UIImage(named: "your-image")!
let pickImage = UIImageView()
pickImage.translatesAutoresizingMaskIntoConstraints = false
pickImage.superview?.addSubview(pickImage)

// 添加宽高比约束，值为原图的宽高比
let aspectRatioConstraint = NSLayoutConstraint(
    item: pickImage,
    attribute: .width,
    relatedBy: .equal,
    toItem: pickImage,
    attribute: .height,
    multiplier: selectedImage.size.width / selectedImage.size.height,
    constant: 0
)
pickImage.addConstraint(aspectRatioConstraint)

// 添加限制最大宽高的约束，防止超出父视图
NSLayoutConstraint.activate([
    pickImage.centerXAnchor.constraint(equalTo: pickImage.superview!.centerXAnchor),
    pickImage.centerYAnchor.constraint(equalTo: pickImage.superview!.centerYAnchor),
    pickImage.widthAnchor.constraint(lessThanOrEqualToConstant: pickImage.superview!.bounds.width - 40),
    pickImage.heightAnchor.constraint(lessThanOrEqualToConstant: pickImage.superview!.bounds.height - 40)
])

pickImage.image = selectedImage
pickImage.contentMode = .scaleAspectFit

2. 阴影覆盖整个ImageView而非图片区域的问题 #

当用scaleAspectFit时，图片会在ImageView内居中，周围留空，默认阴影是基于ImageView整个bounds绘制的。解决办法是让阴影只跟随图片的实际显示区域，有两种常用方式：

方式一：设置shadowPath（直接给ImageView加阴影） #

计算图片实际显示的矩形，把阴影路径设为这个矩形：

// 接上面的代码，设置完ImageView的image和contentMode后
let imageSize = selectedImage.size
let viewBounds = pickImage.bounds
let aspectRatio = imageSize.width / imageSize.height

var imageDisplayRect = CGRect.zero
if aspectRatio > viewBounds.width / viewBounds.height {
    imageDisplayRect.size.width = viewBounds.width
    imageDisplayRect.size.height = viewBounds.width / aspectRatio
} else {
    imageDisplayRect.size.height = viewBounds.height
    imageDisplayRect.size.width = viewBounds.height * aspectRatio
}
// 让显示区域居中
imageDisplayRect.origin.x = (viewBounds.width - imageDisplayRect.size.width)/2
imageDisplayRect.origin.y = (viewBounds.height - imageDisplayRect.size.height)/2

// 设置阴影属性
pickImage.layer.shadowColor = UIColor.black.cgColor
pickImage.layer.shadowOpacity = 0.5
pickImage.layer.shadowOffset = CGSize(width: 2, height: 2)
pickImage.layer.shadowRadius = 4
// 关键：指定阴影路径为图片实际显示的矩形
pickImage.layer.shadowPath = UIBezierPath(rect: imageDisplayRect).cgPath

方式二：用容器View承载阴影（更直观） #

创建一个容器View，把ImageView放在里面，给容器加阴影，容器大小自动适配图片尺寸：

let containerView = UIView()
containerView.translatesAutoresizingMaskIntoConstraints = false
pickImage.superview?.addSubview(containerView)

// 把ImageView加到容器里
pickImage.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(pickImage)

// 设置ImageView的约束：填充容器但保持比例
NSLayoutConstraint.activate([
    pickImage.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
    pickImage.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
    pickImage.widthAnchor.constraint(lessThanOrEqualTo: containerView.widthAnchor),
    pickImage.heightAnchor.constraint(lessThanOrEqualTo: containerView.heightAnchor),
    // 之前的宽高比约束
    aspectRatioConstraint
])

// 给容器加阴影
containerView.layer.shadowColor = UIColor.black.cgColor
containerView.layer.shadowOpacity = 0.5
containerView.layer.shadowOffset = CGSize(width: 2, height: 2)
containerView.layer.shadowRadius = 4

// 限制容器的最大宽高
NSLayoutConstraint.activate([
    containerView.centerXAnchor.constraint(equalTo: containerView.superview!.centerXAnchor),
    containerView.centerYAnchor.constraint(equalTo: containerView.superview!.centerYAnchor),
    containerView.widthAnchor.constraint(lessThanOrEqualToConstant: containerView.superview!.bounds.width - 40),
    containerView.heightAnchor.constraint(lessThanOrEqualToConstant: containerView.superview!.bounds.height - 40)
])

3. 关闭按钮定位到ImageView左上角的问题 #

核心是把按钮的位置和ImageView（或容器View）绑定，而不是和父视图绑定：

代码方式（frame） #

// 假设closeButton是你的关闭按钮
closeButton.frame = CGRect(
    x: pickImage.frame.origin.x + 10, // 偏移10pt
    y: pickImage.frame.origin.y + 10,
    width: 30,
    height: 30
)
// 如果用容器View，就换成containerView.frame.origin.x/y

AutoLayout方式（更稳定） #

closeButton.translatesAutoresizingMaskIntoConstraints = false
// 如果用容器View，就加到containerView上
pickImage.superview?.addSubview(closeButton)

NSLayoutConstraint.activate([
    closeButton.leadingAnchor.constraint(equalTo: pickImage.leadingAnchor, constant: 10),
    closeButton.topAnchor.constraint(equalTo: pickImage.topAnchor, constant: 10),
    closeButton.widthAnchor.constraint(equalToConstant: 30),
    closeButton.heightAnchor.constraint(equalToConstant: 30)
])

这样不管ImageView怎么调整尺寸，按钮都会牢牢固定在它的左上角啦！

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