Question

我尝试通过可视化格式语言在故事板上但未通过的视图上以编程方式使用自动布局。代码如下：（顺便说一句，显示bView的故事板并不重要，所以我没有上传故事板的图片。而且我没有在故事板上设置任何限制。）

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()
    }
}

但是当它执行时，它会显示错误：

***由于未捕获的异常'NSInvalidArgumentException'终止应用程序，原因：'无法解析约束格式：无法解释'|'字符，因为相关的视图没有superview V：| - [bView] - | ^'

我想也许superView（viewController的视图）确实在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)
    }
}

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

那么，如何以编程方式布局故事板上的视图？

更重要的是，有这样一个有趣的结果：（这与问题没有直接关系，但你可以尝试一下来玩！）

使用代码：

class ViewController: UIViewController {

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

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

Answer 1

如果您尝试约束蓝色矩形，那么您的第一个问题是您的bView插座未正确连接到顶层视图（白色背景）。在 Connections Inspector 中删除该连接，然后将蓝色视图连接到bView。

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

所选视图没有约束。在构建时，显式左，将为视图生成顶部，宽度和高度约束。

因此，您的视图已经完全指定。如果在代码中添加更多约束，则会产生冲突。

那么，如何在代码中为Storyboard中的视图添加约束？您需要执行以下操作：

在故事板中为左侧，顶部，宽度和高度添加显式约束。
在尺寸检查器中编辑这4个约束，然后选中占位符[]在构建时删除旁边的框。

然后，将在构建时删除这4个约束，使视图不受约束。现在您的代码可以自由添加约束。

如何以编程方式布局故事板上的视图？

1 个答案: