How to add a custom UIView programmatically with Swift and see it in Interface Builder

问题

I'm trying to add a UserView with controller to a view with Xcode 7 / Swift 2.0.

I was not able to figure out how to do this using Interface Builder, instead I added a NSView as a placeholder view and then add the view in code.

Is it possible to do it with the Interface Builder?

In the image, the orange is the place holder and the green is the user view:

When adding the view in code, I assume I have to add the constraints. I tried to use the constraintsWithVisualFormat like below, but when I add this, the view cannot be resized. I think it might be related to the priorities.

How do I get the green subview to fill the place holder container and be resizable?

override func windowDidLoad() {
    super.windowDidLoad()
    print("MainWindowController.windowDidLoad");

    let view = UserView01();
    self.m_viewPlaceHolder.addSubview(view.view);

    let hor = NSLayoutConstraint.constraintsWithVisualFormat("H:|-10-[view]-10-|", options: .AlignAllLeft, metrics: nil, views: ["view" : view.view]);
    let ver = NSLayoutConstraint.constraintsWithVisualFormat("V:|-10-[view]-10-|", options: .AlignAllLeft, metrics: nil, views: ["view" : view.view]);
    NSLayoutConstraint.activateConstraints(hor);
    NSLayoutConstraint.activateConstraints(ver);
}

回答1:

First of all, there is no need to add any placeholders for the view you create programmatically. If you want to see it in the storyboard, I'd suggest you make the view class @IBDesignable:

@IBDesignable class UserView01: UIView {

    // class declaration

}

The properties you want to be changing as you code should be declared as @IBInspectable similarly to class declaration.

To ensure the programmatically set constraints are executed you have to add the following line before the constraints code:

view.translatesAutoresizingMaskIntoConstraints = false

It tells Xcode to use the constraints you set without trying to add any automatically, which normally Xcode does. Other than that - your code should work fine.

There is also another way to add relative constraints which you might use as well:

 let leadingConstraint = NSLayoutConstraint(item: view, attribute: .Leading, relatedBy: .Equal, toItem: placeholder, attribute: .Leading, multiplier: 1, constant: 20)
 let trailingConstraint = NSLayoutConstraint(item: view, attribute: .Trailing, relatedBy: .Equal, toItem: placeholder, attribute: .Trailing, multiplier: 1, constant: 20)
 let topConstraint = NSLayoutConstraint(item: view, attribute: .Top, relatedBy: .Equal, toItem: placeholder, attribute: .Top, multiplier: 1, constant: 20)
 let bottomConstraint = NSLayoutConstraint(item: view, attribute: .Bottom, relatedBy: .Equal, toItem: placeholder, attribute: .Bottom, multiplier: 1, constant: 20)

 view.addConstraints([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint])

Just change the view and placeholder to the names you use for the view and its superview in your project.

来源：https://stackoverflow.com/questions/34736540/how-to-add-a-custom-uiview-programmatically-with-swift-and-see-it-in-interface-b

标签

cocoa

autolayout

swift2

xcode7

nslayoutconstraint