如何在Xcode游乐场中使用autolayout约束显示视图?

I am trying to display views configured with autolayout constraints in XCode playground, but it doesn't seem to work. It's like playground ignores the constraints completely, and I can't find information about this issue anywhere.

我试图在XCode游乐场中显示使用autolayout约束配置的视图，但它似乎不起作用。就像游乐场完全忽略了约束，我在任何地方都找不到关于这个问题的信息。

Here's the code I tried:

下面是我试过的代码:

let view = UIView()
view.frame = CGRectMake(0, 0, 400, 200)
view.backgroundColor = UIColor.lightGrayColor()

let label = UILabel() // I can only see the label if I set a frame
         // UILabel(frame: CGRectMake(0, 0, 200, 50))
label.backgroundColor = UIColor.greenColor()
label.text = "I am a label"
label.setTranslatesAutoresizingMaskIntoConstraints(false)
view.addSubview(label)

let views = ["label":label]
let options = NSLayoutFormatOptions(0)

let cs1 = NSLayoutConstraint.constraintsWithVisualFormat(
    "H:|-[label]-|", options: options, metrics: nil, views:views )

let cs2 = NSLayoutConstraint.constraintsWithVisualFormat(
    "V:|-[label]-|", options: options, metrics: nil, views:views )

view.addConstraints(cs1)
view.addConstraints(cs2)

Thanks in advance

谢谢提前

3 个解决方案

#1

That being said you can use the liveView property of PlaygroundPage to preview your UI.

也就是说，您可以使用PlaygroundPage的liveView属性来预览您的UI。

import PlaygroundSupport

PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = myLiveView

Here's a link that expands on this further.

这是一个进一步扩展的链接。

If its not working you may need to trigger a layoutIfNeeded but that shouldn't really solve the issue since Swift 4

如果它不工作，你可能需要触发一个layoutifneed，但这不应该真正解决问题，因为斯威夫特4

Also, include translatesAutoresizingMaskIntoConstraints = false on your view. Like:

另外，在你的视图中也包含了平移自适应的maskintoconstraints = false。如:

import PlaygroundSupport

myLiveView.translatesAutoresizingMaskIntoConstraints = false
PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = myLiveView

#2

It seems that now you need to do something like this:

现在看来你需要做这样的事情:

import UIKit
import XCPlayground

let main = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 700))
main.backgroundColor = .blackColor()
XCPlaygroundPage.currentPage.liveView = main

// now add views and constraints to main

main // display view

#3

My final code;

我最后的代码;

If you only see the yellow outer UIView then definitely need:

如果你只看到黄色的外部UIView那么你肯定需要:

XCPlaygroundPage.currentPage.needsIndefiniteExecution = true

And to make sure view is updating change the text of the label

确保视图更新了标签的文本

label.text = "I am a label3 "

FULL CODE

完整代码

import UIKit
import XCPlayground

//http://*.com/questions/30333323/how-can-i-display-views-using-autolayout-constraints-in-xcode-playground/30336502#30336502




let view = UIView()
view.frame = CGRectMake(0, 0, 300, 200)
view.backgroundColor = UIColor.yellowColor()

//-------------------------------------------------------------

XCPlaygroundPage.currentPage.liveView = view
//needed else label may not appear
XCPlaygroundPage.currentPage.needsIndefiniteExecution = true


//-------------------------------------------------------------
//LABEL
//-------------------------------------------------------------
let label = UILabel(frame: CGRectMake(0, 0,200, 50))
label.backgroundColor = UIColor.greenColor()
label.textColor = UIColor.redColor()

//TO FORCE REFRESH change text of label
label.text = "I am a label3 "

//add constraints
label.translatesAutoresizingMaskIntoConstraints = false

//COULDNT GET TO WORK
view.addSubview(label)


//--------------------------------------------------------------
//COMMENT OUT TO SEE LABEL with out constraints
//--------------------------------------------------------------
let views = ["label":label]
let options = NSLayoutFormatOptions(arrayLiteral:[])

let cs1 = NSLayoutConstraint.constraintsWithVisualFormat(
    "H:|-[label]-|", options: options, metrics: nil, views:views )

let cs2 = NSLayoutConstraint.constraintsWithVisualFormat(
    "V:|-[label]-|", options: options, metrics: nil, views:views )

view.addConstraints(cs1)
view.addConstraints(cs2)

//XCPlaygroundPage.currentPage.liveView = view

#1