Swift：无Storyboard、非自动布局下UITableViewCell实现方案问询

Hey there! Let's walk through a complete implementation of a UITableViewCell without Storyboards or Auto Layout, building on what you've already started. Here's a step-by-step solution:

1. 实现自定义UITableViewController #

First up, let's polish your table view controller to ensure it's properly configured for automatic row heights and cell reuse:

import UIKit

class HomeTableViewController: UITableViewController {
    
    // 模拟数据源，替换成你实际的图标数据
    private let iconData = ["coffee", "music", "book", "game"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 启用自动行高，estimatedRowHeight给tableView一个初始参考值
        tableView.rowHeight = UITableView.automaticDimension
        tableView.estimatedRowHeight = 200.0
        
        // 注册自定义cell
        tableView.register(HomeCell.self, forCellReuseIdentifier: "cell")
        
        // 可选：调整分隔线样式，让布局更整洁
        tableView.separatorStyle = .singleLine
        tableView.separatorInset = UIEdgeInsets(top: 0, left: 20, bottom: 0, right: 20)
    }
    
    // MARK: - UITableView DataSource
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return iconData.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! HomeCell
        // 给cell设置图标
        cell.iconImageView.image = UIImage(named: iconData[indexPath.row])
        return cell
    }
}

2. 完整实现HomeCell（无Auto Layout） #

Now let's build out your HomeCell with proper manual frame layout. We'll handle view setup in init and do the actual layout in layoutSubviews (the correct place for frame-based layout):

import UIKit

class HomeCell: UITableViewCell {
    
    // 公开图标视图，方便外部设置内容
    let iconImageView = UIImageView()
    
    // MARK: - Initialization
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupSubviews()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented — we're ditching Storyboards!")
    }
    
    // MARK: - View Setup
    private func setupSubviews() {
        // 配置图标视图的基础属性
        iconImageView.contentMode = .scaleAspectFit
        iconImageView.clipsToBounds = true
        iconImageView.backgroundColor = .systemGray5 // 可选：调试时能看到视图范围
        
        // 把视图添加到contentView（cell的标准容器，处理选中/高亮状态）
        contentView.addSubview(iconImageView)
        
        // 可选：设置cell选中样式
        selectionStyle = .none
    }
    
    // MARK: - Manual Layout
    override func layoutSubviews() {
        super.layoutSubviews()
        
        // 手动计算frame：这里做一个带内边距的正方形图标
        let padding: CGFloat = 20
        let iconWidth = contentView.bounds.width - (padding * 2)
        let iconHeight = iconWidth // 正方形图标，可根据需求调整
        
        // 设置图标视图的位置和大小
        iconImageView.frame = CGRect(
            x: padding,
            y: padding,
            width: iconWidth,
            height: iconHeight
        )
        
        // 关键：告诉tableView这个cell的实际高度，配合自动行高生效
        contentView.intrinsicContentSize = CGSize(
            width: contentView.bounds.width,
            height: iconHeight + (padding * 2)
        )
    }
    
    // MARK: - Cell Reuse
    override func prepareForReuse() {
        super.prepareForReuse()
        // 复用前清空内容，避免显示旧数据
        iconImageView.image = nil
    }
}

3. 核心注意事项 #

• 布局时机：永远在layoutSubviews里设置子视图的frame，而不是init。因为init时cell的宽度还没确定（比如设备旋转后宽度会变），layoutSubviews会在cell尺寸变化时自动调用，保证布局始终正确。
• 自动行高适配：通过设置contentView.intrinsicContentSize，我们给tableView提供了cell的精确高度，这样UITableView.automaticDimension就能完美工作，不用手动写heightForRowAt。
• 视图层级规范：所有自定义子视图都要添加到contentView，而不是cell本身。这是UITableViewCell的官方最佳实践，能避免选中/高亮状态下的布局错乱。
• 复用清理：在prepareForReuse里重置子视图内容，防止cell复用时显示上一行的旧数据。

如果你的图标不是正方形，只需要修改layoutSubviews里的iconHeight计算逻辑即可（比如根据图片的宽高比动态计算），行高会自动跟着调整。

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