cell.defaultContentConfiguration() vs cell.textLabel

For a tableView: I try to change my code from using cell.textLabel to cell.contentConfiguration, we can't get the same result as before (using cell.textLabel), I like to keep the row heigh at 20, the old code display nicely, but the new code won't be able to show it at all unless I use row height 40. Here's the code:

import UIKit

var fruites = ["Apple","Orange","PineApple", "Water Melon", "Banana"]

class ViewController: UIViewController {
    @IBOutlet weak var tblTableViewA: UITableView!
    override func viewDidLoad() {
        super.viewDidLoad()
        tblTableViewA.dataSource = self
        tblTableViewA.delegate = self
    }
}

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return fruites.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "CellA", for: indexPath)
        let fruit = fruites[indexPath.row]
        // New code does not display right, content does not display properly like old code. when row height = 20, it won't even show.
        /*
        var content = cell.defaultContentConfiguration()
        content.textProperties.adjustsFontSizeToFitWidth = true
        content.text = fruit
        cell.contentConfiguration = content
        */

        // Old code works perfect
        cell.textLabel?.adjustsFontSizeToFitWidth = true
        cell.textLabel!.text = fruit
        return cell
    }

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
    {
        return 20 //CGFloat(20)
    }
}

Thanks in advance!

Answered by Frameworks Engineer in 715256022

UIListContentConfiguration is designed to work with self-sizing cells, where the cell height is dynamically computed based on the size of the content. The content (text and image) is positioned using the layout margins of the content view.

If you are enforcing a fixed height (like 20 in your example) for each row, then you are not allowing the cells to self-size, and so the content in each cell is forced to layout in the space provided. With a very small height like 20, the default vertical layout margins are larger than the space available, leaving no room at all for the actual content (e.g. text) to display.

Therefore, you need to reduce the top and bottom values of the directionalLayoutMargins on UIListContentConfiguration before applying it to the cell, in order to leave some space for the content.

Keep in mind, the recommended and best approach is to rely on self-sizing to ensure that cells are sized to fit their content, including at different Dynamic Type system text size settings.

Accepted Answer

UIListContentConfiguration is designed to work with self-sizing cells, where the cell height is dynamically computed based on the size of the content. The content (text and image) is positioned using the layout margins of the content view.

If you are enforcing a fixed height (like 20 in your example) for each row, then you are not allowing the cells to self-size, and so the content in each cell is forced to layout in the space provided. With a very small height like 20, the default vertical layout margins are larger than the space available, leaving no room at all for the actual content (e.g. text) to display.

Therefore, you need to reduce the top and bottom values of the directionalLayoutMargins on UIListContentConfiguration before applying it to the cell, in order to leave some space for the content.

Keep in mind, the recommended and best approach is to rely on self-sizing to ensure that cells are sized to fit their content, including at different Dynamic Type system text size settings.

cell.defaultContentConfiguration() vs cell.textLabel
 
 
Q