Question

我想以编程方式构建以下内容：

但我想以编程方式添加自定义按钮。在这里我不知道如何告诉按钮尊重它们之间的空间以及如果下一个按钮不适合相同的“行”，如何调整单元格的高度。

我尝试了约束：

import Material

class ChipButton: Button {
    override func prepare() {
        super.prepare()

        cornerRadiusPreset      = .cornerRadius5
        backgroundColor         = UIColor.lightGray
        titleColor              = Color.darkText.primary
        pulseAnimation          = .none
        contentEdgeInsets       = EdgeInsets(top: 0, left: 12, bottom: 0, right: 12)
        isUserInteractionEnabled = false
        titleLabel?.font        = RobotoFont.regular
        isOpaque                = true

        let constraintTop       = NSLayoutConstraint(item: self, attribute: .top, relatedBy: .equal, toItem: superview, attribute: .top, multiplier: 1, constant: 4)
        let constraintLeading   = NSLayoutConstraint(item: self, attribute: .leading, relatedBy: .equal, toItem: superview, attribute: .leading, multiplier: 1, constant: 4)

        superview?.addConstraint(constraintTop)
        superview?.addConstraint(constraintLeading)
    }
}

我添加如下按钮：

for tag in item.tags {
    let chip = ChipButton()
    chip.title  = tag.text

    cell!.layout(chip).edges(top: 4, left: 4, bottom: 4, right: 4)
}

但是constrainTop和constrainLeading的声明引发了一个错误，没有约束，按钮r在彼此的顶部和按钮的大小r false。

Answer 1

@Palpatim的评论启发如下：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    var cell: UITableViewCell?

    if let item: TagItem = items[indexPath.section][indexPath.row] as? TagItem {
        if (item.tags.count > 0) {
            // show all tags as a Chip

            cell = TableViewCell()
            cell?.isUserInteractionEnabled = false
            var hStackView          = UIStackView()
            hStackView.axis         = .horizontal
            hStackView.spacing      = 8
            hStackView.alignment    = .fill
            hStackView.distribution = .fill

            let vStackView          = UIStackView()
            vStackView.axis         = .vertical
            vStackView.spacing      = 8
            vStackView.alignment    = .top

            var tagsWidth: CGFloat = 0
            for tag in item.tags {
                let chip = ChipButton()
                chip.title  = tag.text
                chip.sizeToFit()

                if (tagsWidth + chip.bounds.width < (cell?.bounds.width)!) {
                    tagsWidth += chip.bounds.width
                    hStackView.addArrangedSubview(chip)
                }
                else {
                    vStackView.addArrangedSubview(hStackView)
                    tagsWidth = chip.bounds.width
                    hStackView = UIStackView()
                    hStackView.axis         = .horizontal
                    hStackView.spacing      = 8
                    hStackView.alignment    = .fill
                    hStackView.distribution = .fill
                    hStackView.addArrangedSubview(chip)
                }
            }

            vStackView.addArrangedSubview(hStackView)

            cell!.layout(vStackView).edges(left: 16, right: 16).centerVertically()

            return cell!
        }
        else {
            cell = TableViewCell(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 40))
            // show a label 
            let infoLabel = UILabel()
            infoLabel.text          = "no tags"

            cell!.layout(infoLabel).centerVertically().edges(left: 16)

            return cell!
        }
    }

    cell = TableViewCell()
    return cell!
}

结果是：

以编程方式向单元格添加单个数量的按钮

1 个答案: