如何設定UITableView的寬度等于其中的最大單元格寬度？

uj5u.com熱心網友回復：

一種方法可能是：

• 創建一個單獨的視圖，例如命名ThreeElementView，它將添加到單元格的內容視圖中
• 所有可用的行都可以呼叫systemLayoutSizeFitting以獲得最大寬度
• NSLayoutConstraint向表格視圖添加寬度約束 ( )
• 如果表視圖的資料發生變化，調整約束

widthContraint可以這樣設定：

private var widthContraint: NSLayoutConstraint?

widthContraint = tableView.widthAnchor.constraint(equalToConstant: 128)
widthContraint?.isActive = true
if let width = calcWidth() {
    widthContraint?.constant = width
}

在使用 更新表格視圖之前，您還可以呼叫最后 3 行tableView.reloadData()。

假設data包含實際表格資料，寬度計算可能如下所示：

private func calcWidth() -> CGFloat? {
    let prototypeView = ThreeElementView()
    let widths = data.map { row -> CGFloat in
        prototypeView.label1.text = row[0]
        prototypeView.label2.text = row[1]
        prototypeView.label3.text = row[2]
        prototypeView.setNeedsLayout()
        prototypeView.layoutIfNeeded()
        return prototypeView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).width
    }
    return widths.max()
}

因此，對于每一行，您將計算內容的寬度并最終回傳最大值。

獨立測驗

這是對上述內容的獨立測驗。UI 已在代碼中以編程方式構建，因此結果更易于理解。如果按下按鈕，您可以看到 tableview 的寬度也可以通過設定約束來動態調整。

ThreeElementView.swift

import UIKit

class ThreeElementView: UIView {
    
    let label1 = UILabel()
    let label2 = UILabel()
    let label3 = UILabel()
    
    init() {
        super.init(frame: .zero)
        
        label1.backgroundColor = UIColor(red: 84/255, green: 73/255, blue: 75/255, alpha: 1.0)
        label1.textColor = .white
        label2.backgroundColor = UIColor(red: 131/255, green: 151/255, blue: 136/255, alpha: 1.0)
        label2.textColor = .white
        label3.backgroundColor = UIColor(red: 189/255, green: 187/255, blue: 182/255, alpha: 1.0)
        
        label1.translatesAutoresizingMaskIntoConstraints = false
        label2.translatesAutoresizingMaskIntoConstraints = false
        label3.translatesAutoresizingMaskIntoConstraints = false
        
        self.addSubview(label1)
        self.addSubview(label2)
        self.addSubview(label3)
        
        NSLayoutConstraint.activate([
            label1.leadingAnchor.constraint(equalTo: self.leadingAnchor),
            label1.topAnchor.constraint(equalTo: self.topAnchor),
            label1.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            
            label2.leadingAnchor.constraint(equalTo: label1.trailingAnchor),
            label2.topAnchor.constraint(equalTo: self.topAnchor),
            label2.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            
            label3.leadingAnchor.constraint(equalTo: label2.trailingAnchor),
            label3.topAnchor.constraint(equalTo: self.topAnchor),
            label3.bottomAnchor.constraint(equalTo: self.bottomAnchor),
            label3.trailingAnchor.constraint(equalTo: self.trailingAnchor)
        ])
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

ThreeElementCell.swift

import UIKit

class ThreeElementCell: UITableViewCell {
    
    static let id = "ThreeElementCellId"
    let threeElementView = ThreeElementView()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        threeElementView.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(threeElementView)
        NSLayoutConstraint.activate([
            threeElementView.topAnchor.constraint(equalTo: contentView.topAnchor),
            threeElementView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            threeElementView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            threeElementView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
        ])
    }
    
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

ViewController.swift

import UIKit

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    private let tableView = UITableView()
    private let addMoreButton = UIButton()
    private var data = [
        ["a", "tiny", "row"],
    ]
    private var widthContraint: NSLayoutConstraint?

    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
        setupButton()
    }
    
    @objc func onAddMore() {
        if data.count < 2 {
            data.append(["a", "little bit", "longer row"])
        } else {
            data.append(["this is", " finally an even longer", "row"])
        }
        if let width = calcWidth() {
            widthContraint?.constant = width
        }
        tableView.reloadData()
    }
    
    // MARK: - UITableViewDataSource
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: ThreeElementCell.id, for: indexPath) as! ThreeElementCell
        let item = data[indexPath.row]
        cell.threeElementView.label1.text = item[0]
        cell.threeElementView.label2.text = item[1]
        cell.threeElementView.label3.text = item[2]        
        return cell
    }
    
    // MARK: - Private
    
    private func setupTableView() {
        tableView.backgroundColor = UIColor(red: 245/255, green: 228/255, blue: 215/255, alpha: 1.0)
        tableView.register(ThreeElementCell.self, forCellReuseIdentifier: ThreeElementCell.id)
        tableView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(tableView)

        NSLayoutConstraint.activate([
            tableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 16.0),
            tableView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16.0),
        ])
        widthContraint = tableView.widthAnchor.constraint(equalToConstant: 128)
        
        widthContraint?.isActive = true
        if let width = calcWidth() {
            widthContraint?.constant = width
        }
        
        tableView.delegate = self
        tableView.dataSource = self
    }
    
    private func setupButton() {
        addMoreButton.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(addMoreButton)
        NSLayoutConstraint.activate([
            addMoreButton.topAnchor.constraint(equalTo: tableView.bottomAnchor, constant: 32.0),
            addMoreButton.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            addMoreButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -32.0),
        ])
        addMoreButton.setTitle("Add More Rows", for: .normal)
        addMoreButton.setTitleColor(.blue, for: .normal)
        addMoreButton.addTarget(self, action: #selector(onAddMore), for: .touchUpInside)
    }

    private func calcWidth() -> CGFloat? {
        let prototypeView = ThreeElementView()
        let widths = data.map { row -> CGFloat in
            prototypeView.label1.text = row[0]
            prototypeView.label2.text = row[1]
            prototypeView.label3.text = row[2]
            prototypeView.setNeedsLayout()
            prototypeView.layoutIfNeeded()
            return prototypeView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize).width
        }
        return widths.max()
    }
    
}

演示

標籤：合适的视图 nslayoutconstraint

上一篇：Terraform對于物件上的每個回圈并傳遞給子模塊

下一篇：如何在Swift中以編程方式將UIActivityIndi??catorView居中？