在UITableView中对齐多个运行时生成的UILabel [英] Aligning multiple runtime generated UILabels in a UITableView

问题描述

我有一个 UITableView 需要通过列出样式来支持内容，例如

I have a UITableView that needs to support content by listing style something like

但棘手的部分是标签的数量会因每个单元而异，有些可能只有4个，但最多12个此外，值可以是单个单词，也可以是短语，最多两行（如上图所示）。所以我决定使用 UIStackView 来帮助我打包并调整用于显示此内容的 UILabels 。当标签的长度变化如下时，我目前遇到了问题：
< img src =https://i.stack.imgur.com/yBIMw.pngalt =在此输入图像说明>

But the tricky part is that the amount of "Label" will vary with each cell, some may have only 4 but also up to 12. Also the "Value" can be either a single word or short phrase up to two lines(like in the image above). So I decided to use UIStackView to help me pack and size my UILabels used to display this. I am currently stuck at a problem when the "Label" varies in length like:

我需要即使标签的长度不同，值的前端也要像第一张图像一样对齐。是否允许 UIStackView 的行为？或者是否有另一种方法可以让我获得我需要的结果？

I need the leading end of the "Values" to be aligned like the first image even though the "Label" vary in length. Is there a behaviour of UIStackView that allows so? Or is there another approach that can allow me to obtain the results I need?

注意：每个标签和价值都在一个 UIStackView ，我做了它来对齐它们。

Note: Each "Label" and "Value" is in one UIStackView, I did it to align them.

我也试过使用字符串格式化，但是有多行的值将包含在标签而不是像我设法在图像中那样自行包装。

I tried using String Formatting too, but "Values" with more than one line will wrap under the label instead of wrapping by itself like I manage to do in the images.

我尝试将所有标签放在一个 UIStackView 和另一个中的所有值，一旦值超过一行，我就无法像在图像中那样对齐它们。

I tried placing all "Labels" in one UIStackView and all "Values" in another, I could no get them to align like they do in the images once the "Value" is more than one line.

或者如果我在某个地方犯了错误，这就是我创建 UIStackViews 的方式：

Or if it might be a mistake I made somewhere, this is how I created the UIStackViews:

    var higherCount = 0
    if labels.count<values.count {
        higherCount = values.count
    } else {
        higherCount = labels.count
    }

    mainStackView = UIStackView(frame: CGRect(x: 0, y: 0, width: frame.width, height: frame.height))

    for i in 0..<higherCount {
        var height:CGFloat = 20
        if (values[i] as NSString).size(attributes: [NSFontAttributeName:UIFont.systemFont(ofSize: UIFont.systemFontSize)]).width > frame.width {
            height = 42
        }

        let stackViewToAdd = UIStackView(frame: CGRect(x: 0, y: 0, width: frame.width, height: height))

        let label = UILabel(frame: CGRect(x: 0, y: 0, width: frame.width, height: height))
        if labels.count<higherCount {
            label.text = ""
        } else {
            label.text = labels[i]
        }
        label.setContentCompressionResistancePriority(1000, for: .horizontal)
        label.setContentHuggingPriority(999, for: .horizontal)
        stackViewToAdd.addArrangedSubview(label)
        let value = UILabel(frame: CGRect(x: 0, y: 0, width: frame.width, height: height))
        if values.count<higherCount {
            value.text = ""
        } else {
            value.text = values[i]
        }
        value.lineBreakMode = .byWordWrapping
        value.numberOfLines = 2
        stackViewToAdd.addArrangedSubview(value)
        mainStackView?.addArrangedSubview(stackViewToAdd)
    }
    mainStackView?.alignment = .fill
    mainStackView?.axis = .vertical
    mainStackView?.distribution = .fill

推荐答案

我以编程方式创建了您的单元格，然后您可以以编程方式调整单元格大小取决于UILabel内容的大小。

I you created your cell programmatically, then you can resize the cell programmatically depends on the size of UILabel Content.

在我的情况下标签字体是 UIFont.systemFont（ofSize：15），最小TableViewCell高度为50， arrLabel1 和 arrLabel2 将是标签的内容。

In my case Label font is UIFont.systemFont(ofSize: 15), minimum TableViewCell height is 50, arrLabel1 and arrLabel2 will be the content of Labels.

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return arrLable1.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = UITableViewCell(style: .default, reuseIdentifier: "\(indexPath.row)")

    let lable1 = UILabel(frame: CGRect(x: 10, y: 10, width: view.frame.size.width - 20, height: 0))
    lable1.numberOfLines = 0
    lable1.font = UIFont.systemFont(ofSize: 15)
    lable1.text = arrLable1[indexPath.row]
    lable1.sizeToFit()
    cell.addSubview(lable1)

    let lable2 = UILabel(frame: CGRect(x: 10, y: lable1.frame.origin.y + lable1.frame.size.height + 10 , width: view.frame.size.width - 20, height: 0))
    lable2.numberOfLines = 0
    lable2.font = UIFont.systemFont(ofSize: 15)
    lable2.text = arrLable2[indexPath.row]
    lable2.sizeToFit()
    cell.addSubview(lable2)

    return cell
}

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath)
    -> CGFloat {

    let boundingRect1 = arrLable1[indexPath.row].boundingRect(with: CGSize(width: view.frame.size.width - 40 , height: CGFloat(MAXFLOAT)), options: NSStringDrawingOptions.usesLineFragmentOrigin,attributes:[ NSFontAttributeName : UIFont.systemFont(ofSize: 15)] ,context: nil)

    let boundingRect2 = arrLable2[indexPath.row].boundingRect(with: CGSize(width: view.frame.size.width - 40 , height: CGFloat(MAXFLOAT)), options: NSStringDrawingOptions.usesLineFragmentOrigin,attributes:[ NSFontAttributeName : UIFont.systemFont(ofSize: 15)] ,context: nil)

    guard boundingRect1.height + boundingRect2.height + 30 > 50 else {
        return 50
    }

    return boundingRect1.height + boundingRect2.height + 30
}

将标签 numberOfLines设为0

Set Label numberOfLines to 0

这篇关于在UITableView中对齐多个运行时生成的UILabel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！