Text is jumbled in custom cell

Question

I'm trying to read data from CoreData into a custom cell. This is just a test app before I try moving to the real app that I've been working on. The data is there - I can print it to the console and see it. For some reason, even with constraints, all of the data is laid on top of each other in the cell. Can anyone see what's going on with this?

I've created constraints to keep the cells where they should be, but when the data is loaded from my 'show data' button, the data is laid on top of each other.

Here is my custom cell class:

import UIKit

class CustomCellClass: UITableViewCell {


    @IBOutlet weak var txtNameLabel: UILabel!
    @IBOutlet weak var txtAgeLabel: UILabel!



}

Here is the ShowData class: (partial)

class ShowData: UIViewController, NSFetchedResultsControllerDelegate {


    @IBOutlet weak var personTableView: UITableView!


    let appDelegate = (UIApplication.shared.delegate as! AppDelegate).persistentContainer.viewContext

    var personData = [Person]()

    // Read the data

    override func viewDidLoad() {
        super.viewDidLoad()
        personTableView.delegate = self
        personTableView.dataSource = self

        loadItems()
    }

  func loadItems() {
        let request : NSFetchRequest<Person> = Person.fetchRequest()
        do {
           personData = try appDelegate.fetch(request)
        } catch {
            print("couldn't load")
        }

    }

}

extension ShowData : UITableViewDataSource, UITableViewDelegate {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return personData.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let person = personData[indexPath.row]

        let cell = tableView.dequeueReusableCell(withIdentifier: "personNameAge", for: indexPath) as! CustomCellClass


        cell.txtNameLabel?.text = person.name
        cell.txtAgeLabel?.text = String(person.age)

        return cell

    }

Here is a screenshot of the tableview while running:

Edit:

I just deleted the app from the simulator and tried to rerun - now there isn't any data in the cells.

Answer 1

Just to clarify for other readers, as can be seen in your screenshot, the rows in your table are separated as expected but the different fields in each cell, what one might call the columns, are on top of one another.

You say that you have created constraints to keep the cells where they should be, I'm not sure what you mean by that. What you need is constraints for the fields within each cell – what I call intra-cell constraints. Either you have not added these constraints, or there is a mistake in them which causes all fields to be drawn at the left.

To show you what I mean, let's use the example of a little workout app of mine which has, in each table cell, from left to right, a Perform button, an Edit button, a Name field and a Duration field. The screenshot below shows, in the big yellow box, the intra-cell constraints. If you are using a storyboard, the problem with your app must be in that area. If you are not using a storyboard, the problem must be in the equivalent code (or lack of it).