代码实现AutoLayout时UITableView多Cell显示重叠问题求助

嘿，我仔细看了你的代码和问题描述，第二个分区的菜单Cell被第一个用户信息Cell遮挡，核心原因是AutoLayout约束不完整+TableView自动高度计算缺少必要配置，下面给你一步步解决：

问题根源拆解 #

1. UserTableViewCell的约束错误：你在设置userPhoto的宽高时用了frame.width / 3，但在cell初始化阶段，frame还没有被正确计算（此时width是0），导致这个约束无效，AutoLayout无法正确算出用户Cell的高度，进而挤压了后面的菜单Cell。
2. TableView自动高度缺少预估高度：你开启了UITableView.automaticDimension，但注释掉了estimatedRowHeight，TableView需要这个预估高度来初始化布局，否则自动高度计算会失效。
3. 用户名的约束不严谨：你用了lessThanOrEqualTo来约束用户名的top，这会让AutoLayout认为这个约束不是必须满足的，可能导致Cell高度计算偏小。

具体修复步骤 #

1. 修复UserTableViewCell的约束问题 #

修改setupUserPhotoConstraints和setupUsernameConstraints方法，替换掉依赖frame的约束，改用相对父视图的比例约束，同时修正用户名的top约束：

func setupUserPhotoConstraints() {
    NSLayoutConstraint.activate([
        userPhoto.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
        // 改用containerView的宽度比例，避免依赖未初始化的frame
        userPhoto.widthAnchor.constraint(equalTo: containerView.widthAnchor, multiplier: 1/3),
        userPhoto.heightAnchor.constraint(equalTo: userPhoto.widthAnchor) // 宽高相等，保证圆形头像
    ])
}

func setupUsernameConstraints() {
    NSLayoutConstraint.activate([
        // 改用equalTo，确保用户名和头像之间的间距是固定的，让AutoLayout能正确计算高度
        username.topAnchor.constraint(equalTo: userPhoto.bottomAnchor, constant: 16),
        username.centerXAnchor.constraint(equalTo: containerView.centerXAnchor),
        // 增加bottom约束，保证从头像到底部有完整的约束链，AutoLayout才能算出完整高度
        username.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor, constant: -16)
    ])
}

2. 开启TableView的预估高度 #

在SideMenuTableViewController的viewDidLoad里取消注释estimatedRowHeight，设置一个合理的值（比如用户Cell的预估高度）：

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.register(UserTableViewCell.self, forCellReuseIdentifier: "UserTableViewCell")
    tableView.register(SideMenuOptionTableViewCell.self, forCellReuseIdentifier: "SideMenuOptionTableViewCell")
    tableView.reloadData()
    tableView.backgroundColor = .CustomGreen()
    tableView.separatorStyle = .none
    tableView.rowHeight = UITableView.automaticDimension
    // 开启预估高度，给AutoLayout一个初始参考值
    tableView.estimatedRowHeight = 200
}

3. 确保MenuCell的约束完整性（可选优化） #

你的SideMenuOptionTableViewCell目前约束没问题，但可以给viewTitle增加bottom约束，让高度计算更稳定：

func setupFoodTitle() {
    NSLayoutConstraint.activate([
        viewTitle.centerYAnchor.constraint(equalTo: containerView.centerYAnchor),
        viewTitle.leadingAnchor.constraint(equalTo: containerView.leadingAnchor, constant: 16),
        viewTitle.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor, constant: 16),
        viewTitle.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor, constant: -16)
    ])
}

为什么这样修复？ #

• 用相对父视图的比例约束替代frame.width，保证在任何屏幕尺寸下约束都有效，AutoLayout能正确计算头像的大小。
• 完整的约束链（从Cell的top到bottom都有约束关联）是AutoLayout计算Cell高度的必要条件，否则TableView无法知道Cell应该有多高。
• 预估高度是自动高度计算的“启动器”，没有它TableView会默认用一个极小的高度，导致后面的Cell被前面的Cell挤压遮挡。

内容的提问来源于stack exchange，提问作者Ahmed Abd Elaziz