如何通过代码将UITableView下移并锚定至图片下方

问题核心在于UITableViewController的tableView默认由系统设置为充满整个视图的约束，导致它会覆盖图片或无法自动避开图片。要实现列表在图片下方展示，需手动修改tableView的约束逻辑：

修改步骤 #

• 禁用tableView的自动约束转换，获得手动设置约束的权限
• 给tableView添加明确约束，将其顶部锚定到图片底部，并保留合适间距，同时让左右、底部贴合视图边缘
• 确保图片的约束逻辑完整，避免冲突

修改后的完整代码 #

class MenuViewController: UITableViewController {
    
    public var delegate: MenuControllerDelagate?
    private let menuItems: [MenuOptions]
    let darkColour = UIColor(displayP3Red: 33/255.0, green: 33/255.0, blue: 33/255.0, alpha: 1)
    
    private let profileImageView: UIImageView = {
        let iv = UIImageView()
        iv.contentMode = .scaleAspectFill
        iv.clipsToBounds = true
        iv.isUserInteractionEnabled = true
        iv.image = #imageLiteral(resourceName: "venom-7")
        iv.translatesAutoresizingMaskIntoConstraints = false // 禁用自动约束转换
        return iv
    }()
    
    init(with menuItems: [MenuOptions]) {
        self.menuItems = menuItems
        super.init(nibName: nil, bundle: nil)
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(profileImageView)
        
        // 配置图片约束
        NSLayoutConstraint.activate([
            profileImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
            profileImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            profileImageView.widthAnchor.constraint(equalToConstant: 130),
            profileImageView.heightAnchor.constraint(equalToConstant: 130)
        ])
        profileImageView.layer.cornerRadius = 130/2
        
        // 配置tableView约束
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.backgroundColor = darkColour
        
        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: profileImageView.bottomAnchor, constant: 20),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            tableView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            tableView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return menuItems.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.textColor = .white
        cell.textLabel?.text = menuItems[indexPath.row].rawValue
        cell.backgroundColor = darkColour
        cell.imageView?.image = UIImage(systemName: MenuOptions.allCases[indexPath.row].imageName)
        cell.imageView?.tintColor = .white
        return cell
    }
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        tableView.deselectRow(at: indexPath, animated: true )
        let selectedItem = menuItems[indexPath.row]
        delegate?.didSelectMenuItem(named: selectedItem)
    }
}

关键说明 #

• 必须设置tableView.translatesAutoresizingMaskIntoConstraints = false，否则系统默认的充满约束会覆盖手动设置的规则
• 用NSLayoutConstraint.activate批量添加约束，能有效避免约束冲突，比自定义anchor方法更稳定
• 可通过调整constant参数修改图片顶部、图片与tableView之间的间距，优化布局美观度

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