在 Swift 中，以编程方式创建 UIView 并向其中添加控件并使用自动布局，使控件显示在视图的父级上。

Question

我试图在Swift 3中为iOS编写一个简单的复合组件。它由uilabel组成，然后是一个uitextfield，水平布置了一个uitextfield，然后是下面的一条线。但是发生的事情是uilabel消失了，uitextfield出现在父视图上，行也消失了。

我在草图中的设计

故事板中的实际外观

我组件在视图控制器中的约束

我的目的是使用自动布局，将标签固定到顶部，并带有视图的领先锚，将Textfield锚定在视图顶部，并以恒定的速度将标签的锚定锚定，以便它们并排出现。<<<<<<<<<<<<<<<<<<<</p>

我确实对此做了很多研究，一个看上去非常接近我想要的网站是https://www.raywenderlich.com/125718/coding-auto-layout，我想我正在关注更多或更多

少于相同的方法。

我在做一些明显错误的事情，但无法弄清楚什么。任何帮助都非常感谢，我已经在此工作了几天。

import UIKit
@IBDesignable
class OTextEdit: UIView {
    @IBInspectable var LabelText: String = "Label"
    @IBInspectable var SecureText: Bool = false
    @IBInspectable var Color: UIColor = UIColor.black
    @IBInspectable var Text: String = "" {
        didSet {
            edit.text = Text
        }
    }
    fileprivate let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 35))
    fileprivate let edit = UITextField(frame: CGRect(x: 210, y: 0, width: 200, height: 35))
    fileprivate let line: UIView = UIView()
    override var intrinsicContentSize: CGSize {
        return CGSize(width: 300, height: 100)
    }
    func setup() {
        label.text = LabelText
        label.textColor = Color
        label.font = UIFont(name: "Avenir Next Condensed", size: 24)
        edit.font = UIFont(name: "Avenir Next Condensed", size: 24)
        edit.borderStyle = .roundedRect
        edit.isSecureTextEntry = SecureText
        line.backgroundColor = UIColor.white
        self.addSubview(label)
        self.addSubview(edit)
        self.addSubview(line)
    }
    override func willMove(toSuperview newSuperview: UIView?) {
        super.willMove(toSuperview: newSuperview)
        setup()
        setupConstaints()
    }
    func setupConstaints() {
        label.translatesAutoresizingMaskIntoConstraints = false
        edit.translatesAutoresizingMaskIntoConstraints = false
        line.translatesAutoresizingMaskIntoConstraints = false
        label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: -10).isActive = true
        label.topAnchor.constraint(equalTo: topAnchor)
        edit.leadingAnchor.constraint(equalTo: label.leadingAnchor, constant: 10).isActive = true
        edit.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
        edit.topAnchor.constraint(equalTo: self.topAnchor)
        line.heightAnchor.constraint(equalToConstant: 2.0).isActive = true
        line.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
        line.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
        line.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 1.0).isActive = true
    }
}

Answer 1

您没有一系列的约束，因此自动布局无法确定对象的内容大小。您已经尝试通过initrinsicContentSize设置此设置，但是您不需要执行此操作。

您还需要为您的标签设置水平拥抱优先级，以便让自动布局知道您希望文本字段扩展：

我删除了您对intrinsicContentSize的替代，并将您的约束更改为：

• 将标签的底部限制到线的顶部
• 将行的底部限制到监督的底部
• 将标签的基线限制为文本字段的基线
• 删除文本字段顶部和Supperiew之间的约束
• 设置标签的水平拥抱优先级。

 func setupConstraints() {
    label.translatesAutoresizingMaskIntoConstraints = false
    edit.translatesAutoresizingMaskIntoConstraints = false
    line.translatesAutoresizingMaskIntoConstraints = false
    label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
    label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
    label.topAnchor.constraint(equalTo: topAnchor)
    label.bottomAnchor.constraint(equalTo: line.topAnchor, constant: -8).isActive = true
    edit.leadingAnchor.constraint(equalTo: label.trailingAnchor, constant: 10).isActive = true
    edit.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
    edit.firstBaselineAnchor.constraint(equalTo: label.firstBaselineAnchor).isActive = true
    line.heightAnchor.constraint(equalToConstant: 2.0).isActive = true
    line.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
    line.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
    line.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 1.0).isActive = true
    line.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}

我认为它非常接近您的追求。