Question

我想实现以下用户界面：

此UI包含标签（在顶部为粗体），stackview（在蓝色矩形内），视图（灰线）以及该行下方的两个标签。

如您所见，我在stackview中有单独的视图。设置其约束的方法如下：

titleLabel.snp.makeConstraints { make in
        make.leading.equalToSuperview().offset(16)
        make.top.equalToSuperview()
        make.bottom.equalToSuperview()
    }

    priceLabel.snp.makeConstraints { make in
        make.trailing.equalToSuperview().offset(-16)
        make.top.equalTo(titleLabel.snp.top)
        make.leading.equalTo(titleLabel.snp.trailing).offset(16)
    }

我的目标是使titleLabel的顶部与priceLabel的顶部对齐。似乎一切正常，但这是此用户界面的屏幕截图，其中包含不同的文本：

如您所见，我的stackview没有为粗体标签留出空间。我不希望它发生。此用户界面显示在底部面板的内部布局。我认为问题在于我的priceLabel没有底部限制。让我们尝试给它：

priceLabel.snp.makeConstraints { make in
        make.trailing.equalToSuperview().offset(-16)
        make.top.equalTo(titleLabel.snp.top)
        make.leading.equalTo(titleLabel.snp.trailing).offset(16)
        make.bottom.equalToSuperview()
    }

titleLabel的约束未更改。结果如下：

似乎一切正常，但是我的第一个titleLabel太小，即使numberOfLines设置为0。另一个问题是我的priceLabel的顶部未对齐以titleLabel开头。我不希望它发生。

此后，我记得UIStackView中的UIKit具有firstBaseline对齐方式。然后，我决定将titleLabel和priceLabel放在具有firstBaseline对齐和fill分布的水平堆栈视图中：

private lazy var stackView: UIStackView = {
    let stackView = UIStackView()
    stackView.distribution = .fill
    stackView.alignment = .firstBaseline
    stackView.axis = .horizontal
    stackView.spacing = 16
    return stackView
}()


 private func setup() {
    stackView.addArrangedSubview(titleLabel)
    stackView.addArrangedSubview(priceLabel)
    addSubview(stackView)
    stackView.snp.makeConstraints { make in
        make.leading.equalToSuperview().offset(16)
        make.trailing.equalToSuperview().offset(-16)
        make.bottom.top.equalToSuperview()
    }
}

结果如下：

它完全毁了。我的粗体标签和stackview之间的空间太大。可能的原因是粗体标签具有优先权。

最后一句话

如您所见，问题在于stackview中的标签对齐。对齐uilabel顶部的方法有很多，但所有方法都给出不同的结果。我不知道为什么看来我对自动版式一无所知。那么，如何获得第一张截图的结果呢？

Answer 1

您要做的是为粗体标签设置高度限制。这样就不会缩小。

label.heightAnchor.constraint(equalToConstant: 30).isActive = true

如何将UILabel的顶部与另一个UILabel的顶部对齐？

1 个答案: