CODEWITHSUNDEEP
iosswift
TOPCOD3R
TOPCOD3R

Reputation: 154

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

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?

This is my layout

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

Upvotes: 0

Views: 322

Answers (2)

shakil080
shakil080

Reputation: 381

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:

enter image description here

Upvotes: 1

Kutay Demireren
Kutay Demireren

Reputation: 650

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

Upvotes: 1

Related Questions