如何在 Xcode playground 中使用自动布局约束显示视图？

Question

我试图在 XCode playground 中显示使用 autolayout 约束配置的视图，但它似乎没有工作。就像playground完全忽略了约束，我到处都找不到关于这个问题的信息。

这是我试过的代码：

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)

提前致谢

Answer 1

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

import PlaygroundSupport

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

这里有一个 link 对此进行了进一步的扩展。

如果它不起作用，您可能需要触发 layoutIfNeeded 但这并不能真正解决问题，因为 Swift 4

此外，请在您的视图中添加 translatesAutoresizingMaskIntoConstraints = false。喜欢：

import PlaygroundSupport

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

Answer 2

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

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

Answer 3

我的最终代码；

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

XCPlaygroundPage.currentPage.needsIndefiniteExecution = true

并确保视图正在更新更改标签的文本

label.text = "I am a label3 "

完整代码

import UIKit
import XCPlayground

//




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

Answer 4

提供的解决方案对我没有用。我想要一个可以在其中使用约束的视图。为此，我必须创建一个带有 CGRect 基础的 containerView 并向其添加约束。其他一切都不成功。所以我得到了一个可查看的基础，并且能够在有限制的情况下添加视图。

设置容器视图：

let containerView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: 600, height: 400))
containerView.backgroundColor = UIColor.lightGray
containerView.translatesAutoresizingMaskIntoConstraints = false

PlaygroundPage.current.needsIndefiniteExecution = true
PlaygroundPage.current.liveView = containerView

containerView.widthAnchor.constraint(equalToConstant: 600).isActive = true
containerView.heightAnchor.constraint(equalToConstant: 400).isActive = true

在具有约束的 ContainerView 中放置视图：

let myView = UIView(frame: .zero)
myView.backgroundColor = .green
myView.translatesAutoresizingMaskIntoConstraints = false

containerView.addSubview(myView)

myView.widthAnchor.constraint(equalToConstant: 200).isActive = true
myView.heightAnchor.constraint(equalToConstant: 200).isActive = true

myView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
myView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor).isActive = true

这将创建此视图：

如何在 Xcode playground 中使用自动布局约束显示视图？

How can I display views using autolayout constraints in Xcode playground?

xcode

ios

autolayout

swift

swift-playground