表视图未显示在视图 Controller

Question

I am trying to display a UITableView and its cells in a UIViewController but I am not seeing the UITableView appear in the UIViewController. My AutoLayout constraints have the table set to appear underneath the "My Trips" UILabel. I've added the delegate and data source, not sure what I'm missing here.

class TripsViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    //components
    let viewTitle = UILabel()
    let tripsTableView = UITableView()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setup()
        style()
        layout()
    }
}


extension TripsViewController {
    
    func setup(){
        tripsTableView.delegate = self
        tripsTableView.dataSource = self
    }
    
    func style() {
        view.backgroundColor = .systemBackground
        
        viewTitle.translatesAutoresizingMaskIntoConstraints = false
        viewTitle.text = "My Trips"
        viewTitle.font = UIFont.preferredFont(forTextStyle: .title1)
        
        tripsTableView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func layout() {
        view.addSubview(viewTitle)
        view.addSubview(tripsTableView)
        
        NSLayoutConstraint.activate([
            viewTitle.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 2),
            viewTitle.topAnchor.constraint(equalToSystemSpacingBelow: view.safeAreaLayoutGuide.topAnchor, multiplier: 2),
            tripsTableView.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 2),
            tripsTableView.topAnchor.constraint(equalToSystemSpacingBelow: viewTitle.bottomAnchor, multiplier: 2)
        ])
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 5
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        cell.textLabel?.text = "This is row \(indexPath.row)"
        return cell
    }
}

Answer 1

you are super close here. The issue lies with your constraints.

        NSLayoutConstraint.activate([
        viewTitle.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 2),
        viewTitle.topAnchor.constraint(equalToSystemSpacingBelow: view.safeAreaLayoutGuide.topAnchor, multiplier: 2),
        tripsTableView.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 2),
        tripsTableView.topAnchor.constraint(equalToSystemSpacingBelow: viewTitle.bottomAnchor, multiplier: 2),
        tripsTableView.rightAnchor.constraint(equalToSystemSpacingAfter: self.view.rightAnchor, multiplier: 1),
        tripsTableView.heightAnchor.constraint(equalToConstant: 200)
    ])

you can see here I added in a right anchor and a height of 200.

Table View Appears.

Good Luck

Answer 2

Add Trailing and Bottom constraints for your table view:

    NSLayoutConstraint.activate([
        viewTitle.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 2),
        viewTitle.topAnchor.constraint(equalToSystemSpacingBelow: view.safeAreaLayoutGuide.topAnchor, multiplier: 2),
        tripsTableView.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 2),
        tripsTableView.topAnchor.constraint(equalToSystemSpacingBelow: viewTitle.bottomAnchor, multiplier: 2),
        
        // add these constraints
        view.safeAreaLayoutGuide.trailingAnchor.constraint(equalToSystemSpacingAfter: tripsTableView.trailingAnchor, multiplier: 2),
        view.safeAreaLayoutGuide.bottomAnchor.constraint(equalToSystemSpacingBelow: tripsTableView.bottomAnchor, multiplier: 2),
    ])

Answer 3

I needed to change the UIViewController to a UITableViewController since I am using static cells (for now) in my code. I also overrode the numberOfRowsInSection and cellForRowAt functions.

Changed

class TripsViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

to

class TripsViewController: UITableViewController {

Answer 4

You need to set trailing and bottom(or height) constraints as well. It will set a correct frame of tableview.

Snippet:

tripsTableView.trailingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.trailingAnchor, multiplier: 2), tripsTableView.bottomAnchor.constraint(equalToSystemSpacingBelow: view.safeAreaLayoutGuide.bottomAnchor, multiplier: 2)

Note: Set multiple as per your need