使用自动布局的UITableView不显示，Frame布局却正常？

问题描述 #

编写的CatalogTableViewController中，通过自动布局添加的autoSuggestionTableView完全不显示，但改用Frame设置固定位置后视图正常显示。

原自动布局代码：

func configureHeaderView() {
    headerView.typeField.delegate = self
    autoSuggestionTableView = UITableView(frame: .zero)
    autoSuggestionTableView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(autoSuggestionTableView)
    autoSuggestionTableView.snp.makeConstraints{ (make) in
        make.top.equalToSuperview().offset(50)
        make.bottom.equalToSuperview().offset(100)
        make.left.equalToSuperview()
        make.right.equalToSuperview()
    }
    // 其他配置代码...
}

改用Frame的有效代码：

func configureHeaderView() {
    headerView.typeField.delegate = self
    autoSuggestionTableView = UITableView(frame: CGRect(x: 50, y: 50, width: 100, height: 500))
    self.view.addSubview(autoSuggestionTableView)
    // 其他配置代码...
}

原因分析 #

1. 约束逻辑错误
   原代码中make.bottom.equalToSuperview().offset(100)是核心问题：SnapKit的offset(100)会将autoSuggestionTableView的底部位置设置在父视图底部下方100pt，结合top.equalToSuperview().offset(50)的设置，最终tableView的高度为「父视图高度 + 50pt」，大部分区域会超出父视图的可视范围，导致看起来完全不显示。

2. UITableViewController的视图层级特性
   UITableViewController的self.view本身就是主列表的UITableView，你将autoSuggestionTableView添加到self.view上，相当于叠加在主列表之上。Frame布局直接明确了可视区域的位置和大小，所以能正常显示；而错误的约束导致视图偏移到可视区域外，自然无法看到。

正确的自动布局实现方式 #

修正约束逻辑，确保autoSuggestionTableView的边界在父视图可视范围内，示例代码如下：

func configureHeaderView() {
    headerView.typeField.delegate = self
    autoSuggestionTableView = UITableView(frame: .zero)
    autoSuggestionTableView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(autoSuggestionTableView)
    
    // 修正约束：top距父视图顶部50pt，bottom距父视图底部100pt，左右贴边
    autoSuggestionTableView.snp.makeConstraints{ (make) in
        make.top.equalToSuperview().offset(50)
        // 使用offset(-100)让底部向内缩进100pt，或用inset(100)效果一致
        make.bottom.equalToSuperview().offset(-100)
        make.left.right.equalToSuperview()
    }
    
    autoSuggestionTableView.backgroundColor = .gray
    suggestionsTableViewDataSource = AutoPopulateSuggestionTableViewDataSource(tableView: autoSuggestionTableView)
    autoSuggestionTableView.dataSource = suggestionsTableViewDataSource
    autoSuggestionTableView.register(TextCell.self, forCellReuseIdentifier: "someID")
    suggestionsTableViewDataSource.apply(AutoCompleteSuggestionDataModel.snapshot(), animatingDifferences: false)
}

额外注意事项 #

• 若需要让autoSuggestionTableView显示在导航栏下方，应将top约束关联到导航栏底部：make.top.equalTo(self.navigationController?.navigationBar.snp.bottom ?? superview.snp.top).offset(50)，避免被导航栏遮挡。
• 可设置autoSuggestionTableView.clipsToBounds = true，确保内容不会超出自身边界。
• 若约束设置后仍不显示，可在设置约束后调用self.view.layoutIfNeeded()强制触发布局更新。

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