如何在UITableView Cell中水平添加ImageView且避免其横向拉伸占满空间？

我太懂这种“明明看起来是基础需求，却卡了好久”的沮丧感了！咱们直接来搞定这个布局问题，不用折腾CollectionView，用StackView就能完美解决。

问题根源 #

你的ImageView被横向拉伸，主要是两个核心原因：

• UIImageView默认的contentMode是.scaleToFill，会强制图片填满整个视图空间
• 水平StackView默认的distribution是.fill，会让子视图尽可能占据可用宽度

解决方案步骤 #

1. 先配置好Cell里的水平StackView

首先在你的ItemBox自定义Cell中，先把承载头像的StackView配置到位：

class ItemBox: UITableViewCell {
    // 声明水平StackView（代码创建或Storyboard拖拽都可以）
    let participantsStackView: UIStackView = {
        let stack = UIStackView()
        stack.axis = .horizontal
        stack.spacing = 8 // 头像之间的间距，按需调整
        stack.alignment = .center // 让头像垂直居中
        stack.distribution = .fill // 保持默认即可，我们会通过约束限制头像尺寸
        stack.translatesAutoresizingMaskIntoConstraints = false
        return stack
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupCellLayout()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupCellLayout()
    }
    
    private func setupCellLayout() {
        contentView.addSubview(participantsStackView)
        // 给StackView添加约束，绑定到Cell的contentView上
        NSLayoutConstraint.activate([
            participantsStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            participantsStackView.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
            participantsStackView.heightAnchor.constraint(equalToConstant: 40) // 头像区域的高度，按需调整
        ])
    }
    
    // 重用Cell时清空StackView子视图，避免重复添加头像
    override func prepareForReuse() {
        super.prepareForReuse()
        participantsStackView.arrangedSubviews.forEach { $0.removeFromSuperview() }
    }
}

2. 修改cellForRowAt方法，正确添加ImageView

现在在表格数据源方法里，给每个ImageView设置固定尺寸和正确的内容模式，再加入StackView：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { 
    let cell = tableView.dequeueReusableCell(withIdentifier: "itemsBox", for: indexPath) as! ItemBox 
    // 注意：原代码里的tableView[indexPath.row]应该是你的数据源数组，比如改成dataSource[indexPath.row]
    let item = dataSource[indexPath.row]
    let participants = item.participants?.prefix(3) 
    
    participants?.forEach { participant in 
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        // 设置图片内容模式，避免拉伸变形
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true // 裁剪超出部分，保证图片显示完整
        
        // 给ImageView设置固定宽高，告诉StackView这个视图的尺寸，就不会被拉伸了
        NSLayoutConstraint.activate([
            imageView.widthAnchor.constraint(equalToConstant: 40),
            imageView.heightAnchor.constraint(equalToConstant: 40)
        ])
        
        // 如果需要圆形头像，添加圆角设置
        imageView.layer.cornerRadius = 20
        
        // 加载网络图片
        let imageUrl = URL(string: participant.imageURL) 
        imageView.kf.setImage(with: imageUrl) 
        
        // 将头像添加到StackView中
        cell.participantsStackView.addArrangedSubview(imageView)
    } 
    return cell 
}

关键要点总结 #

• 必须给ImageView设置固定宽高约束，明确告诉StackView这个视图的尺寸，它就不会强制拉伸视图了
• 把ImageView的contentMode设为.scaleAspectFill或.scaleAspectFit，避免图片变形
• 重用Cell时一定要清空StackView的子视图，不然滑动表格时会重复添加头像
• StackView的alignment设为.center，保证头像在垂直方向居中显示

这样调整之后，你的三个头像就会保持固定尺寸，不会被横向拉伸了，完全不用引入CollectionView这种复杂方案~

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