使用 UITableViewAutomaticDimension 显示多行标签的自定义单元格

Posted 2023-02-27

【中文标题】使用 UITableViewAutomaticDimension 显示多行标签的自定义单元格

【英文标题】：Custom cell to display multiline label using UITableViewAutomaticDimension

【发布时间】：2015-05-21 04:39:18

【问题描述】：

目标：

使用自动布局和UITableViewAutomaticDimension 在UITableView 中的自定义单元格上显示多行标签。 单元格应根据每个UILabel 中的文本而有所不同。

我做了什么：

使用自动布局 tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 100 label.numberOfLines = 0（标签是我新建的标签） label.setTranslatesAutoresizingMaskIntoConstraints(false) 将UILabel 添加到contentView 添加了从UILabel 到内容视图的约束

问题：

当我使用自定义单元格时，某些文本会被剪切 (...) 有时滚动不是很流畅

尝试与UITableViewCell 相同：

tableView.rowHeight = UITableViewAutomaticDimension tableView.estimatedRowHeight = 100 textLabel.numberOfLines = 0（textLabel 已存在于UITableViewCell） 滚动看起来很流畅 无剪辑，文字显示正确 打印了cell.textLabel?.preferredMaxLayoutWidth，显示为0

问题：

为什么它可以正常使用 UITableViewCell 而不是我的自定义单元格？ 在这两种情况下，preferredMaxLayoutWidth 都没有设置。 请告诉我我缺少什么。

我的自定义单元格的代码：

    class MultilineLabelCell : UITableViewCell 

    let label = UILabel()

    //MARK: Initializers

    override init(style: UITableViewCellStyle, reuseIdentifier: String?) 
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        setup()
    

    required init(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)

        setup()
    

    //MARK: Setup Views

    func setup() 
        setupLabel()
        setupLayout()
    

    func setupLabel() 

        label.setTranslatesAutoresizingMaskIntoConstraints(false)

        label.numberOfLines = 0

        contentView.addSubview(label)
    

    func setupLayout() 

        let views = ["label" : label]

        let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|-[label]-|",
            options: .allZeros,
            metrics: nil,
            views: views)

        let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-[label]-|",
            options: .allZeros,
            metrics: nil,
            views: views)

        contentView.addConstraints(horizontalConstraints)
        contentView.addConstraints(verticalConstraints)
    

查看控制器代码

override func loadView() 
    super.loadView()

    tableView.registerClass(MultilineLabelCell.self, forCellReuseIdentifier: ViewController.cellIdentifier)

    tableView.rowHeight = UITableViewAutomaticDimension
    tableView.estimatedRowHeight = 100


    func populateData() 

        dataArray.append("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat")

        dataArray.append("Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum")


        dataArray.append("Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,")

        dataArray.append("nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?")

        dataArray.append("But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?")
    

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 

        let cell = tableView.dequeueReusableCellWithIdentifier(ViewController.cellIdentifier) as! MultilineLabelCell

        cell.label.numberOfLines = 0
        cell.label.text = dataArray[indexPath.row]

        return cell
    

【问题讨论】：

您使用的是故事板还是代码？它对我来说工作正常，代码稍作修改。

不，我以编程方式为表格视图注册单元格，然后将单元格从队列中取出。请尝试使用很长的文本，每个索引路径都会发生变化。

尝试将标签上的 preferredMaxLayoutWidth 设置为标签边界

绝对设置preferredMaxLayoutWidth 有效。我的问题是我尝试打印 textLabel.preferredMaxlayout 宽度，即使在 layoutIfNeeded 之后，UITableViewCell 的宽度也为零，但它仍然有效。所以想知道 UITableViewCell.textLabel 是否有不同的做法。

【参考方案1】：

虽然在UITableViewCell 的内容视图中以编程方式提供约束视图/控件并希望根据您的文本长度具有动态单元格大小，但您需要明确地从所有四个方面进行填充（提供一些值）。按照以下进行更改。看起来像一个错误

在 setupLayout 方法中

func setupLayout() 

        let views = ["label" : label]

        let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|-5-[label]-5-|",
            options: .allZeros,
            metrics: nil,
            views: views)

        let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|-5-[label]-5-|",
            options: .allZeros,
            metrics: nil,
            views: views)

        contentView.addConstraints(horizontalConstraints)
        contentView.addConstraints(verticalConstraints)
    

【讨论】：

我看到的唯一区别是您为 3 个单元格显示相同的文本。我正在为单元格显示不同的文本。不过我会试试的

您需要在单元格内容视图约束中提供左、右、上、下边距。我编辑了答案。

我的理解是只要没有歧义并且约束是详尽的就可以了。我认为我在代码中添加的约束是详尽无遗的。

可能是，我根据我编辑的代码修改并给出了左、右、上、下的值，效果很好。

谢谢！！！很奇怪...H:|-[label]-| 似乎是导致问题的原因。 （文本被剪裁）。当它被替换为H:|-8-[label]-8-| 时，它可以正常工作而无需更改其他代码。我的理解是两者都是一样的。 - 仅表示默认间距。但这解决了问题。请您编辑您的答案并删除所有代码并将其替换为文本，以便我可以将其标记为正确答案。