如何通过在iOS中对齐顶部边缘来水平放置两个标签？

Question

我想创建如下所示的自定义视图。

如您所见，它由标题和价格标签组成。标题可以有百万行，但其顶部边缘应与价格标签对齐。看似简单的设计，却有数百种解决方案。我尝试了它们中的每一个，但我的标题标签没有增长，因为最后有点（numberOfLines = 0 没有帮助）。以下是我创建这样一个设计的方法：

1. 我创建了带有顶部、前导、尾随到价格标签、底部约束的 titleLabel。此外，我创建了带有顶部和尾部约束的价格标签，只是为了对齐它们的顶部边缘。我给价格标签分配了抗压和拥抱的优先级，因为它更重要，不应该被破坏。如果需要，这里是代码：

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

我创建了单独的自定义视图，因为我想在 StackView 中使用它（间距 8，分布填充，垂直）。这种方法的结果：标题标签没有增长。如果它有大文本，它的末尾只有一行带点。

1. 第二种方法是创建stackView（水平，间距8，分布填充，对齐顶部）。我设置对齐顶部以对齐标签的顶部边缘。结果与方法 #1 相同。

如何解决这个问题？我哪里错了？看来我在这里没有看到自动布局理论的核心内容。

Answer 1

为标题标签添加一个new height constraint 以及
关系：greater than equal to
contant：一些常量（可能是 20 或其他东西根据您的字体大小和内容）。

希望能解决你的问题

Answer 2

在您的布局开发过程中，为元素背景使用对比色会非常有帮助...可以很容易地看到它们的框架发生了什么。

试试这个...

自定义视图类

class NeoCustomView: UIView {
    
    let titleLabel = UILabel()
    let priceLabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        
        titleLabel.translatesAutoresizingMaskIntoConstraints = false
        titleLabel.numberOfLines = 0
        titleLabel.font = .systemFont(ofSize: 17)
        
        priceLabel.translatesAutoresizingMaskIntoConstraints = false
        priceLabel.font = .boldSystemFont(ofSize: 17)
        
        priceLabel.setContentHuggingPriority(.required, for: .horizontal)
        priceLabel.setContentCompressionResistancePriority(.required, for: .horizontal)
        
        addSubview(titleLabel)
        addSubview(priceLabel)
        
        titleLabel.snp.makeConstraints { make in
            make.leading.equalToSuperview().offset(16)
            make.trailing.lessThanOrEqualTo(priceLabel.snp.leading).offset(-8)
            make.top.equalToSuperview()
            make.bottom.equalToSuperview()
        }
        priceLabel.snp.makeConstraints { make in
            make.trailing.equalToSuperview().offset(-16)
            make.top.equalTo(titleLabel.snp.top)
        }

        // use some background colors so we can easily see the frames
        backgroundColor = .red
        titleLabel.backgroundColor = .yellow
        priceLabel.backgroundColor = .green
        
    }
    
}

示例视图控制器类 - 从自定义视图底部添加另一个限制 4 点的标签，以便我们可以看到一切正常：

class NeoViewController: UIViewController {
    
    let testView = NeoCustomView()
    let anotherLabel = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        anotherLabel.translatesAutoresizingMaskIntoConstraints = false
        anotherLabel.font = .systemFont(ofSize: 15)
        anotherLabel.backgroundColor = .blue
        anotherLabel.textColor = .white
        anotherLabel.textAlignment = .center
        anotherLabel.numberOfLines = 0
        anotherLabel.text = "This label is constrained 4 points from the bottom of the custom view."
        
        view.addSubview(testView)
        view.addSubview(anotherLabel)
        
        testView.snp.makeConstraints { make in
            make.leading.trailing.equalTo(view.safeAreaLayoutGuide).inset(16)
            make.top.equalTo(view.safeAreaLayoutGuide).offset(40)
        }
        anotherLabel.snp.makeConstraints { make in
            make.top.equalTo(testView.snp.bottom).offset(4)
            make.width.equalTo(testView.snp.width)
            make.centerX.equalTo(testView.snp.centerX)
        }
        
        testView.titleLabel.text = "This is long text for the title label that will word wrap when it needs to."
        testView.priceLabel.text = "300$"
    }
}

结果（红色是带有标题和价格标签的自定义视图，蓝色是在自定义视图下方添加和约束的标签）：