首页 > 解决方案 > 解决 UILabel 约束问题

问题描述

我是 UIKit 的初学者,我想在UITableViewCell.

带有两个 UIStackView 的布局

UIStackView1 由如下排列的子视图组成:

UIStackView1 布局

Header Label 和 Value Label 都是 UILabel,用bottom-top anchoring 连接。

UIStackView2 类似,但 Value Label 是 UITextField

出于某种原因,此代码会产生空单元格。

func singleFieldsRow() -> UIView {
    
    let viewContainer = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 0))
    viewContainer.translatesAutoresizingMaskIntoConstraints = false
    
    let stackView1: UIStackView = UIStackView()
    stackView1.alignment = .leading
    stackView1.axis = .vertical
    stackView1.distribution = .fillProportionally
    
    viewContainer.addSubview(stackView1)
    
    // stackview1 constraints
    stackView1.translatesAutoresizingMaskIntoConstraints = false
    
    stackView1.leftAnchor.constraint(equalTo: viewContainer.leftAnchor).isActive = true
    stackView1.bottomAnchor.constraint(equalTo: viewContainer.bottomAnchor).isActive = true
    stackView1.rightAnchor.constraint(equalTo: viewContainer.rightAnchor).isActive = true
    
    let stackView1Container: UIView = UIView()
    viewContainer.addSubview(stackView1Container)
    
    stackView1Container.translatesAutoresizingMaskIntoConstraints = false
    stackView1Container.topAnchor.constraint(equalTo: viewContainer.topAnchor).isActive = true
    stackView1Container.leftAnchor.constraint(equalTo: viewContainer.leftAnchor).isActive = true
    stackView1Container.rightAnchor.constraint(equalTo: viewContainer.rightAnchor).isActive = true
    stackView1Container.bottomAnchor.constraint(equalTo: stackView1.topAnchor).isActive = true
    stackView1Container.widthAnchor.constraint(equalTo: viewContainer.widthAnchor).isActive = true
    
    // stackview2
    let stackView2: UIStackView = UIStackView()
    stackView2.alignment = .leading
    stackView2.axis = .vertical
    stackView2.distribution = .equalCentering
    
    stackView1Container.addSubview(stackView2)
    
    stackView2.translatesAutoresizingMaskIntoConstraints = false
    
    
    stackView2.topAnchor.constraint(equalTo: stackView1Container.topAnchor).isActive = true
    stackView2.bottomAnchor.constraint(equalTo: stackView1Container.topAnchor).isActive = true
    stackView2.leftAnchor.constraint(equalTo: stackView1Container.leftAnchor).isActive = true
    
    stackView2.rightAnchor.constraint(equalTo: stackView1Container.rightAnchor).isActive = true
    stackView2.widthAnchor.constraint(equalTo: stackView1Container.widthAnchor).isActive = true
    
        
    for field in stack1Fields {
        let fieldContainer = UIView()
        let headerLabel: UILabel = UILabel()
        let valueLabel: UILabel = UILabel()
        
        headerLabel.text = field.title
        headerLabel.numberOfLines = 0
        headerLabel.adjustsFontSizeToFitWidth = true
        
        valueLabel.text = field.value
        valueLabel.numberOfLines = 0
        valueLabel.adjustsFontSizeToFitWidth = true
        
        fieldContainer.addSubview(headerLabel)
        fieldContainer.addSubview(valueLabel)
        
        headerLabel.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        headerLabel.topAnchor.constraint(equalTo: fieldContainer.topAnchor).isActive = true
        headerLabel.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        headerLabel.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        
        valueLabel.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        valueLabel.bottomAnchor.constraint(equalTo: fieldContainer.bottomAnchor).isActive = true
        valueLabel.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        valueLabel.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        
        stackView2.addArrangedSubview(fieldContainer)
    }
    
    
    
    for field in stack2Fields {
        
        let fieldContainer = UIView()
        
        let headerLabel: UILabel = UILabel()
        
        headerLabel.text = productField.title
        headerLabel.numberOfLines = 0
        headerLabel.adjustsFontSizeToFitWidth = true
        
        fieldContainer.addSubview(headerLabel)
        
        let valueTextField: UITextField = UITextField()
        valueTextField.text = productField.value
        valueTextField.keyboardType = .default
        valueTextField.placeholder = "Insert value"
        valueTextField.translatesAutoresizingMaskIntoConstraints = false
        
        fieldContainer.addSubview(valueTextField)
        
        headerLabel.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        headerLabel.topAnchor.constraint(equalTo: fieldContainer.topAnchor).isActive = true
        headerLabel.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        headerLabel.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        headerLabel.bottomAnchor.constraint(equalTo: valueTextField.topAnchor).isActive = true
        
        valueTextField.widthAnchor.constraint(equalTo: fieldContainer.widthAnchor).isActive = true
        valueTextField.leftAnchor.constraint(equalTo: fieldContainer.leftAnchor).isActive = true
        valueTextField.rightAnchor.constraint(equalTo: fieldContainer.rightAnchor).isActive = true
        valueTextField.bottomAnchor.constraint(equalTo: fieldContainer.bottomAnchor).isActive = true
        
        editableStackView.addArrangedSubview(fieldContainer)
    }
    
    
    return viewContainer
}

您可以看到 UIStackView1 周围有一个额外的 Container,因为有一段代码在 UIStackView 的右侧绘制图像,但对于本示例而言,它并不重要。

如果我穿上我可以看到一些sizeToFit()内容UILabels,但 UIStackView1 是折叠的,这意味着每个 UILabel 相互重叠。

UIStackView1 重叠内容

我还在控制台上收到这些消息:

[LayoutConstraints] 无法同时满足约束。以下列表中的至少一个约束可能是您不想要的。试试这个:(1)查看每个约束并尝试找出您不期望的;(2) 找到添加了一个或多个不需要的约束的代码并修复它。(注意:如果您看到不理解的 NSAutoresizingMaskLayoutConstraints,请参阅 UIView 属性 translatesAutoresizingMaskIntoConstraints 的文档) ( "<NSAutoresizingMaskLayoutConstraint:0x28157b4d0 h=--& v=--& UILabel:0x10501b790.width == 33.5 (active)>", "<NSAutoresizingMaskLayoutConstraint:0x28157b700 h=--& v=--& UILabel:0x10501ca00.width == 66.5 (active)>", "<NSLayoutConstraint:0x28154cc80 UILabel:0x10501b790.width == UIView:

UIStackView2而是正确显示,并一个接一个地UILabel垂直UITextField放置。然而,有些UITextField显示不正确,运行时窗口给了我这个警告。

x-xcode-debug-views://7f82a530ff20?DBGViewDebuggerLaunchSessionParameter=7f82a530ff20:运行时:布局问题:UITextField 的水平位置不明确。

我是否设置了太多限制?

任何帮助是极大的赞赏。

标签: iosswiftuitableviewautolayoutnslayoutconstraint

解决方案


无需为要添加到堆栈视图的所有视图添加约束。堆栈视图将处理约束。


推荐阅读