skip to Main Content

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.

enter image description 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
    }
}

4

Answers


  1. Chosen as BEST ANSWER

    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 {
    

  2. 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.

    Login or Signup to reply.
  3. 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),
        ])
    
    Login or Signup to reply.
  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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search