UITableViewCell выравнивающие столбцы, чтобы соответствовать содержанию

Question

Я создаю UITableView с использованием автоматического макета и прототипа ячеек. Я хотел бы, чтобы он действовал больше как веб-таблица HTML. Каждая ячейка имеет четыре «столбца», каждый с одним ярлыком, см. Здесь . В конечном счете, каждый столбец должен регулировать свою ширину в соответствии с самым широким столбцом всех других строк. Это похоже на обычный случай, но я не могу найти какую-либо информацию об этом. Я что-то упускаю здесь очевидное?

Какой результат у меня сейчас:

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

Что бы я хотел:

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

Надеюсь, это имеет какой-то смысл, иначе дайте мне знать. Спасибо!

Answer 1

Вы можете построить «сетку» из меток, используя встроенные UIStackView s

. Используйте «внешний» горизонтальный вид стека для хранения 4 «внутренних» представлений стека, которые используются как 4 «столбца».

Вставить представление внешнего стека в UIScrollView, если содержимое превышает доступную область.

Результат выглядит следующим образом:

Первые два представления стека "столбец" имеют .alignment = .leading, а 3-й и 4-й имеют .alignment = .trailing.Как вы можете видеть, каждое представление стека «столбец» расширяет свою ширину, чтобы соответствовать самой широкой метке.

Вот некоторый код для создания этого примера:

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

Создание 2-х мерных таблиц всегда было PiTA на iOS. Я настоятельно рекомендую вам найти уже существующее решение и сэкономить много времени для себя.
Если вы не делаете это для себя (иначе обучение), в этом случае вам необходимо:

1. Пересчитайте размеры ячеек где-то в фоновом режиме и используйте их везде
2. Или добавить ограничение ширины (больше или равно) для первой ячейки в строке. Позвольте UIKit обрабатывать макет для вас. Каждый раз, когда UIKit обновляет ширину ячейки, проверяйте, чтобы она была такой же большой, как ограничение, если она больше, вам нужно обновить ограничение всех строк с новой самой большой шириной.

1-й подход - самое чистое и, вероятно, единственно правильное решение, но если ваше приложение может обмениваться незначительными показателями производительности за время разработки, вы можете попробовать второй подход.

РЕДАКТИРОВАТЬ: Я только что проверил ваше изображение. Зачем вам здесь 2д стол?

Все, что вам нужно, это:
|-amount-name-iDunnoWhatIsIt-price-|

Где:
name метка выровнена по левому краю
iDunnoWhatIsIt метка выровнена вправо
price и amount имеет фиксированную ширину

Теперь вам нужно решить, что важнее name или iDunnoWhatIsIt. И на его основе обновите их compression resistance, поэтому важный не будет обрезан (я полагаю, это будет iDunnoWhatIsIt)