ios - 如何以编程方式布局 Storyboard上的 View ？

Question

我尝试在 Storyboard上的 View 上通过视觉格式语言以编程方式使用自动布局，但失败了。代码如下:(顺便说一句，显示 bView 的 Storyboard并不重要，所以我没有上传 Storyboard的图片。我也没有在 Storyboard上设置任何约束。)

class ViewController: UIViewController {

    @IBOutlet var bView: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()
        bView.translatesAutoresizingMaskIntoConstraints = false
        var allConstraints = [NSLayoutConstraint]()
        let vC =  NSLayoutConstraint.constraintsWithVisualFormat("V:|-[bView]-|", options: [], metrics: nil, views: ["bView":bView])
        let hC = NSLayoutConstraint.constraintsWithVisualFormat("H:|-[bView]-|", options: [], metrics: nil, views: ["bView":bView])
        allConstraints += vC
        allConstraints += hC
        NSLayoutConstraint.activateConstraints(allConstraints)
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
    }
}

但是执行的时候报错:

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: 'Unable to parse constraint format: Unable to interpret '|' character, because the related view doesn't have a superview V:|-[bView]-| ^'

我想也许 superView(viewController 的 View )确实添加到了 mainWindow 上。因此，我尝试通过将代码移至 viewWillLayoutSubviews() 来解决此问题。如下图:

class ViewController: UIViewController {

    @IBOutlet var bView: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        bView.translatesAutoresizingMaskIntoConstraints = false
        var allConstraints = [NSLayoutConstraint]()
        let vC =  NSLayoutConstraint.constraintsWithVisualFormat("V:|-[bView]-|", options: [], metrics: nil, views: ["bView":bView])
        let hC = NSLayoutConstraint.constraintsWithVisualFormat("H:|-[bView]-|", options: [], metrics: nil, views: ["bView":bView])
        allConstraints += vC
        allConstraints += hC
        NSLayoutConstraint.activateConstraints(allConstraints)
    }
}

然后它显示了一个非常有趣的错误结果。

那么，如何以编程方式布局 Storyboard上的 View ？

---

此外，还有一个有趣的结果是这样的:(和题目没有直接关系，大家可以试试看!)

附代码:

class ViewController: UIViewController {

    @IBOutlet var bView: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        bView.translatesAutoresizingMaskIntoConstraints = false
    }
}

Answer 1

如果您试图限制蓝色矩形，那么您的第一个问题是您的 bView 导出错误地连接到您的顶层 View (白色背景)。在 Connections Inspector 中删除该连接，然后将蓝色 View 连接到 bView。

如果您在 Interface Builder 中添加一个 View ，但不给它任何约束，那么 Xcode 将在构建时添加 4 个约束。如果单击 View ，您将在尺寸检查器中看到以下消息:

The selected views have no constraints. At build time, explicit left, top, width, and height constraints will be generated for the view.

因此，您的 View 已经完全指定。如果您在代码中添加任何更多约束，就会发生冲突。

那么，如何在代码中为 Storyboard 中布局的 View 添加约束？您需要执行以下操作:

1. 在 Storyboard 中为左侧、顶部、宽度和高度添加显式约束。

   

2. 在 Size Inspector 中编辑这 4 个约束并选中 Placeholder [] Remove at build time 旁边的框。

   

然后，这 4 个约束将在构建时移除，使 View 没有约束。现在您的代码可以自由添加约束。