Simple way of aligning text to the top left corner of a cell in a TableView?

Question

I have some text in a cell in a TableView which I would like to appear on the top left corner of the cell.

Aligning the text to the left was simple enough, using:

cell.textLabel?.textAlignment = NSTextAlignment.left

However, all the solutions I have found for aligning the text vertically to the top are very convoluted.

Is there a simple way to do this I am unaware of?

Here is my layout, I do not have customised cells.

Are you using autolayout constraints? please provide a screenshot from your layout . — Mojtaba Hosseini, Jan 29 '19 at 13:00
Are you using UITableViewCell directly, or do you have custom designed cell? — Kutay Demireren, Jan 29 '19 at 13:03
you will have to subclass UITableViewCell and add a label at the top left or your desired position — Shahzaib Qureshi, Jan 29 '19 at 13:06

Kutay Demireren · Answer 1 · 2019-01-29T13:33:17.197

You cannot change/add constraint to default UITableViewCell. Thus, you should start with first creating a new class which should be a subclass of UITableViewCell.

A tip on creating a new UITableViewCell class would be: from the create a new file page, go with the Cocoa Touch Class option and in the new window, after naming your cell make sure you type UITableViewCell to subclass section and select Also create a XIB file. This will create you both a .swift and .xib file.

Go to .xib file and design your cell as you wish. Put the label at the top left corner of the cell.

After you are done with designing your custom cell, add below lines first to your tableView:cellForRow function so that you can make use of your custom UITableViewCell.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

    var cell : SomeTableViewCell!

    let tempCell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier)
    if tempCell != nil {
        cell = tempCell as! SomeTableViewCell
    }
    if(cell == nil)
    {
        cell = Bundle.main.loadNibNamed("SomeTableViewCell", owner: self, options: nil)?.first as! SomeTableViewCell
    }

    ...
    Do other customizations with your cell here.
    e.g. -> cell.label.textAlignment = .center
    ...
}

I know this is not a full documentation of how to use UITableViewCell, but I tried to give you the minimal required information for designing and using a custom UITableViewCell. For a full explanation you can use any tutorial you like or for example you can take a look for this question as a start:

creating custom tableview cells in swift

Of course, feel free to ask me if there is something missing on my answer.

Hope this helps you to start with!

Edit: I noticed I passed reuseIdentifier. reuseIdentifier is just a string that you better assign to your custom cell from its .xib and use the same string here

shakil080 · Accepted Answer · 2019-01-29T15:37:09.603

1

Declare the cell as below:

   override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

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

       // to do: additional code
        return cell
    }

After that define the UserCell class:

class UserCell: UITableViewCell {

    override func layoutSubviews() {
        super.layoutSubviews()
        textLabel?.frame = CGRect(x: 0, y: 0, width: textLabel!.frame.width, height: textLabel!.frame.height)
        textLabel?.backgroundColor = UIColor.red //only for demonstration
        textLabel?.sizeToFit()
        //detailtextlabel code
    }
}

I think you are looking for the output like below:

edited Jan 29 '19 at 15:37

answered Jan 29 '19 at 13:33

shakil080

351
2
5

I am having trouble with the 'withIdentifier'; what is meant to go in that parameter? – TOPCOD3R Jan 29 '19 at 14:54
I have updated the answer, actually, this is just a string identifier. I have declared this identifier at the beginning of the class to use it as per my requirement. Just like this: let cellId = "cellId" – shakil080 Jan 29 '19 at 15:41

Simple way of aligning text to the top left corner of a cell in a TableView?

2 Answers2