iOS UIKit中如何调整Banner高度以适配图片？

问题描述 #

我有一个展示3张图片的Banner View，当前图片被裁剪以适配BannerView。尝试修改imageView的content mode，但没有效果；也尝试根据图片宽高比计算并调整Cell高度，同样无效。需要让图片完整适配Cell，并根据图片的宽高比动态调整Cell的高度，同时想知道是否可以基于2:1这类宽高比调整Cell高度让图片适配屏幕。

现有代码片段 #

HomeViewController（高度计算） #

extension HomeViewController: UITableViewDataSource, UITableViewDelegate {

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let uiComponent = homeLayout[indexPath.section]
        switch uiComponent.type {
        case "banner":
            return ThemeLayoutProvider.homeBannerSize.height + 10
        default:
            return UITableView.automaticDimension
        }
    }
}

struct ThemeLayoutProvider {
    static var bannerHeightRatio: CGFloat = 0.6
    static let SCREEN_WIDTH = UIScreen.main.bounds.size.width

    static var homeBannerSize: CGSize {
        return ThemeLayoutProvider.getHorizontallyAlignedCellSize(visibleCells: 1,
                                                                  horizontalPadding: 0,
                                                                  verticalPadding: 0,
                                                                  cellAspectRatio: ThemeLayoutProvider.bannerHeightRatio)
    }

    fileprivate static func getHorizontallyAlignedCellSize(visibleCells: CGFloat,
                                                           horizontalPadding: CGFloat = 0,
                                                           verticalPadding: CGFloat = 0,
                                                           cellAspectRatio: CGFloat = 0) -> CGSize {
        let cellWidth = (SCREEN_WIDTH/visibleCells) - (horizontalPadding*2)
        let cellHeight = (cellWidth * cellAspectRatio) - (verticalPadding*2)
        return CGSize(width: cellWidth, height: cellHeight)
    }
}

Banners Cell（图片加载） #

extension Banners: UICollectionViewDelegate, UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return componentLayout?.count ?? 0
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "BannerCell", for: indexPath) as! BannerCell
        cell.bannerStyle = bannerStyle
        let anElement = componentLayout!.elements![indexPath.row]
        cell.bannerView.setImageFrom(URL.init(string: anElement.imageUrl ?? ""), placeholder: .imagePlaceHolderRect)
        return cell
    }
}

解决方案 #

一、基于图片实际宽高比动态调整高度 #

当前问题核心是使用了固定的bannerHeightRatio = 0.6，未根据图片真实比例计算，且图片加载后未触发布局更新。按以下步骤修改：

1. 给BannerCell添加图片加载完成回调
   在BannerCell中添加闭包，通知外部图片的真实尺寸：

class BannerCell: UICollectionViewCell {
    var onImageLoaded: ((CGSize) -> Void)?
    
    func setImageFrom(url: URL?, placeholder: UIImage?) {
        // 以Kingfisher为例，其他图片加载库逻辑类似
        bannerView.kf.setImage(with: url, placeholder: placeholder) { [weak self] result in
            guard let self = self, case .success(let response) = result else { return }
            self.onImageLoaded?(response.image.size)
        }
    }
}

2. 监听图片加载完成，通知更新行高
   在Banners的cellForItemAt中绑定回调，通过通知告知HomeViewController更新高度：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "BannerCell", for: indexPath) as! BannerCell
    cell.bannerStyle = bannerStyle
    let anElement = componentLayout!.elements![indexPath.row]
    
    cell.onImageLoaded = { [weak self] imageSize in
        guard let self = self else { return }
        let ratio = imageSize.height / imageSize.width
        NotificationCenter.default.post(name: NSNotification.Name("UpdateBannerHeight"), object: ratio)
    }
    
    cell.setImageFrom(url: URL(string: anElement.imageUrl ?? ""), placeholder: .imagePlaceHolderRect)
    return cell
}

3. HomeViewController接收通知并刷新布局
   在HomeViewController中监听通知，更新比例后刷新对应section：

override func viewDidLoad() {
    super.viewDidLoad()
    NotificationCenter.default.addObserver(self, selector: #selector(updateBannerHeight(_:)), name: NSNotification.Name("UpdateBannerHeight"), object: nil)
}

@objc private func updateBannerHeight(_ notification: Notification) {
    guard let ratio = notification.object as? CGFloat else { return }
    ThemeLayoutProvider.bannerHeightRatio = ratio
    // 替换bannerSectionIndex为你的banner所在section的索引
    tableView.reloadSections(IndexSet(integer: bannerSectionIndex), with: .automatic)
}

二、固定宽高比（如2:1）适配屏幕 #

如果不需要根据图片真实比例，直接用固定2:1比例，只需修改ThemeLayoutProvider的比例值：

struct ThemeLayoutProvider {
    // 2:1宽高比 → 高度 = 宽度 * 0.5
    static var bannerHeightRatio: CGFloat = 0.5
    // ... 其他代码不变
}

关键注意事项 #

• 检查ImageView约束：确保BannerCell中的imageView的leading、trailing、top、bottom都和contentView对齐，不要设置固定高度，让imageView随Cell高度自适应。
• 正确设置contentMode：
  • 要完整显示图片：用imageView.contentMode = .scaleAspectFit
  • 要填充Cell且不拉伸：用imageView.contentMode = .scaleAspectFill，同时设置imageView.clipsToBounds = true
• 布局刷新时机：图片加载完成后必须触发TableView的section刷新，否则新的高度不会生效。

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