UITableView cell detailTextLabel text alignment not working

Question

I'm trying to format the position of numbers in a UIViewController's detailTextLabel property. The numbers in the detailTextLabel part of the UIViewTable are too far to the right (as in the image).

I've tried:

cell.detailTextLabel?.textAlignment = .center

but it doesn't work. I've tried .left, .right, .justified and various settings in interface builder.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "PracticeWord", for: indexPath)

        let sortedPracticeWord = sortedPracticeWords[indexPath.row]
        print("practiceWord is: \(sortedPracticeWord)")

        let split = sortedPracticeWord.components(separatedBy: "::")

        cell.textLabel?.text = split[0]

        cell.textLabel?.textColor = UIColor.white

        cell.selectedBackgroundView = UIView()
        cell.selectedBackgroundView!.backgroundColor = UIColor(white: 1, alpha: 0.20)

        cell.textLabel?.text = split[1]
        cell.detailTextLabel?.text = split[2]
        cell.detailTextLabel?.textAlignment = .center

        print("cell is: \(cell)")
        return cell
    }

I would like each number to end just under the 'g' of the word 'wrong'.

I would ***strongly*** suggest designing your own custom cell. That way you get exactly the layout you want. — DonMag, Apr 03 '19 at 17:39

score 0 · Answer 1 · answered Apr 03 '19 at 16:20

I think what's happening here is that the detailTextLabel is being sized to fit the text length, and the whole label aligned to the right edge.

I'd try adding a whitespace to the text that you add to the detail text label.

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "PracticeWord", for: indexPath)

    let sortedPracticeWord = sortedPracticeWords[indexPath.row]
    print("practiceWord is: \(sortedPracticeWord)")

    let split = sortedPracticeWord.components(separatedBy: "::")

    cell.textLabel?.text = split[0]

    cell.textLabel?.textColor = UIColor.white

    cell.selectedBackgroundView = UIView()
    cell.selectedBackgroundView!.backgroundColor = UIColor(white: 1, alpha: 0.20)

    cell.textLabel?.text = split[1]
    cell.detailTextLabel?.text = split[2] + "   "
    cell.detailTextLabel?.textAlignment = .center

    print("cell is: \(cell)")
    return cell
}

glad you figured it out. I was hoping this would work without needing a custom tablecell. — Nitin Alabur, Apr 04 '19 at 14:19

score 0 · Answer 2 · answered Apr 03 '19 at 18:29

The detail text label is only displayed with the built in UITableViewCell styles, and it's not going to respect the alignment because the default styles will do their own thing and won't give you that much control. Which is just fine for simple stuff but quickly becomes a limitation for anything nontrivial.

If you want to control placement you'll need to define your own custom table cell with left and right UILabels, and constrain them exactly where you want them. Also bear in mind that if the user changes the system font size, you still may not line up with the 'g' character, so you might want to consider a different design, or just not worrying about that alignment.

See https://developer.apple.com/documentation/uikit/uitableviewcell/cellstyle for a description of the built in styles, but I suspect you'll need to create your own if the default style isn't doing what you want.

score 0 · Answer 3 · answered Apr 03 '19 at 20:14

0

After creating custom cells by following this tutorial:

creating custom tableview cells in swift

It seems to be giving me what I originally intended.

answered Apr 03 '19 at 20:14

Tirna

383
1
12

UITableView cell detailTextLabel text alignment not working

3 Answers3