UITableViewCell对齐列以适合内容

Question

I am creating an UITableView using auto layout and prototype cells. I would like it to act more like a web HTML table. Each cell has four "columns", each with one label in it, see here . Ultimately, each column should adjust its width to the widest column of all the other rows. This seems like a common case but I am unable to find any info about it. Am I missing something obvious here?

What result I have right now:

1|product name|11 xx|22 yy
1|longer product name|11 xxx|22 yy
1|short|1x|22 yy

What I would like:

1|product name       |11 xx |22 yy
1|longer product name|11 xxx|22 yy
1|short              |1x    |22 yy

I hope this makes any sense, otherwise let me know. Thanks!

Answer 1

You can build a "grid" of labels using embedded UIStackView s

Use an "outer" horizontal stack view to hold 4 "inner" stack views, which are used as the 4 "columns".

Embed the outer stack view in a UIScrollView in case the content exceeds the available area.

The result looks like this:

The first two "column" stack views have .alignment = .leading and the 3rd and 4th have .alignment = .trailing . As you can see, each "column" stack view stretches its width to fit the widest label.

Here is some code to produce that example:

class StackGridViewController: UIViewController {

    var myData = [[String]]()

    override func viewDidLoad() {
        super.viewDidLoad()

        // init 30 rows of data
        for i in 1...30 {
            myData.append(["\(i)", "Product Name", "12 xx", "34 xx"])
        }

        // make a few of the rows different
        for i in [2, 15, 21] {

            // longer "column B"
            myData[i][1] = "Longer Product Name"

            // longer "column C"
            myData[i+2][2] = "1234 xx"

            // longer "column D"
            myData[i+4][3] = "3456 xx"

        }

        // and one row with the longest values
        // longest "column B"
        myData[9][1] = "The Longest Product Name"

        // longest "column C"
        myData[9][2] = "123456 xx"

        // longest "column D"
        myData[9][3] = "345678 xx"


        // create a horizontal stack view
        let outerSV = UIStackView()
        outerSV.translatesAutoresizingMaskIntoConstraints = false
        outerSV.axis = .horizontal
        outerSV.distribution = .fill

        // "column" spacing
        outerSV.spacing = 12

        // add 4 "column" vertical stack views
        for col in 0..<4 {
            let columnSV = UIStackView()
            columnSV.translatesAutoresizingMaskIntoConstraints = false
            columnSV.axis = .vertical

            // align leading for first two columns, trailing for 3rd and 4th
            columnSV.alignment = col < 2 ? .leading : .trailing

            columnSV.distribution = .fill

            // "row" spacing
            columnSV.spacing = 8

            // add a label for each data "row"
            for row in 0..<myData.count {
                let v = UILabel()
                v.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
                v.font = UIFont.systemFont(ofSize: 13.0, weight: .light)
                v.text = myData[row][col]
                columnSV.addArrangedSubview(v)
            }

            // add the "column" stack view to the outer stack view
            outerSV.addArrangedSubview(columnSV)
        }

        // create a scroll view
        let scrollView = UIScrollView()
        scrollView.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(scrollView)

        // constrain it to all four sides with 20-pt padding on top/bottom, 8-pt padding leading/trailing
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20.0),
            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20.0),
            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 8.0),
            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -8.0),
            ])

        // add the outer stack view to the scroll view
        scrollView.addSubview(outerSV)

        // constrain it to all four sides (which will also define .contentSize (the "scrollable area")
        NSLayoutConstraint.activate([
            outerSV.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 0.0),
            outerSV.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: 0.0),
            outerSV.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 0.0),
            outerSV.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 0.0),
            ])

    }

}

Answer 2

Creating 2 dimensional tables was always PiTA on iOS. I would strongly recommend you find already existing solution and save a lot time for yourself.
Unless you doing it for yourself (aka learning), in this case you need to:

1. Precalculate cell sizes somewhere in background and use it everywhere
2. Or add width constraint (greater or equal) on first cell in row. Let UIKit handle layout for you. Each time UIKit update width of cell, check that it same big as constraint, if it bigger you need to update constrain of all rows with new biggest width.

1st approach is cleanest and probably only right solution, but if your app can exchange little of performances for development time, you can try second approach.

EDIT: I just checked your image. Why do you ever need 2d table here?

All you need is:
|-amount-name-iDunnoWhatIsIt-price-|

Where:
name label aligned left
iDunnoWhatIsIt label aligned right
price and amount has fixed width

Now you need to decide what is more important name or iDunnoWhatIsIt . And based on it update their compression resistance , so important one will be not trimmed (I assume it will be iDunnoWhatIsIt )