Layout for 2 UILabels on UITableViewCell

Question

I wish to have 2 labels on custom table view cell. First label should be on left 15 points away from left margin and 2nd label should be on right 15 points away from right margin. It can grow internally. Since the label is not going to display lots of data, it surely won't overlap on each other.

I am using stack view. Below are the images for my custom xib file. Number of lines for both the label is set to 1. When I launch, I see a blank cell without the labels. What is missing?

EDIT: Adding more details. I updated distribution on UIStackView to Fill Equally and updated alignment for 2nd label ie start time label to right. I am seeing the data on the cell now, but 2nd label is not getting aligned to right.

Code in cellForRow:

let cell = tableView.dequeueReusableCell(withIdentifier: "displayStartTime") as! ScheduleDisplayStartTimeCustomCell
cell.selectionStyle = UITableViewCell.SelectionStyle.gray
cell.titleLabel.text = "Start"
cell.timeLabel.text = startTime
return cell

This is how it looks now after the edit:

Answer 1

Storyboard solution:

You can select the distribution for the StackView to equal spacing in the storyboard, with the default spacing value. The Labels only need the height contraint after that (or you could set the height for the StackView), and will be positioned to the sides of the StackView.

Resulting cell

The text alignment in the Label won't matter, as the Label will be only as wide as needed.

Answer 2

I do not use storyboards that much but I know this works. First you have to register the cell in your viewDidLoad:

tableView.register(ScheduleDisplayStartTimeCustomCell.self, forCellReuseIdentifier: "displayStartTime")

Then you can programmatically create a custom cell like this:

class ScheduleDisplayStartTimeCustomCell: UITableViewCell {
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupView()
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    let startLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1
        label.textAlignment = .left
        return label
    }()
    
    let timeLabel: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.numberOfLines = 1
        label.textAlignment = .right
        return label
    }()

    
    func setupView() {
        addSubview(startLabel)
        addSubview(timeLabel)
        
        NSLayoutConstraint.activate([
            startLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            startLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 15),
           
            timeLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -15),
            timeLabel.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
        
        selectionStyle = UITableViewCell.SelectionStyle.gray
    }
    
}

And finally you would set your cells like this:

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "displayStartTime") as! ScheduleDisplayStartTimeCustomCell
        cell.startLabel.text = "Start"
        cell.timeLabel.text = startTime
        
        return cell
    }

Answer 3

I have had similar issues in the past, the best solution I found it to assign a BackgroundColor to the labels (Blue, Red) and the StackView (Black). Then I see if the problem is with the constraints, or the UILabel text alignment properties.

Also, I noticed that you have an extension to UIViews, there may be something in there that is causing the problem.