Nested #IBDesignables using xibs? - ios

Question

I'm trying to create a component-based system on iOS, and I'd like to do the following:
Create a "PaddedView" component that has 8px of space around any added child components, like a container type component.
Add another IBDesignable view into this PaddedView on a storyboard, and see both render.
Is this possible?
Right now, I'm using the following superclass for all IBDesignable components to load their views from xibs:
import Foundation
import UIKit
#IBDesignable
class SKDesignableView: UIView {
var view: UIView?
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.loadXib()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.loadXib()
}
func loadXib() {
self.view = self.viewFromXib()
self.view!.frame = self.bounds
self.view!.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]
self.addSubview(self.view!)
}
func viewFromXib() -> UIView {
let bundle = UINib(nibName: String(describing: self.getType()), bundle: Bundle(for: self.getType()))
let views = bundle.instantiate(withOwner: self, options: nil)
return views.first as! UIView
}
func getType() -> AnyClass {
fatalError()
}
}
How do I create placeholders for other IBDesignables?

Answer 1

The view initially contains the children, so add a container view as a subview to any component that needs children.
func loadXib() {
var subview: UIView? = nil
if self.subviews.count > 0 {
subview = self.subviews[0]
}
subview?.removeFromSuperview()
self.view = self.viewFromXib()
self.view!.frame = self.bounds
self.view!.autoresizingMask = [UIViewAutoresizing.flexibleWidth, UIViewAutoresizing.flexibleHeight]
if let subview = subview {
let lConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.leading, relatedBy: NSLayoutRelation.equal,
toItem: self.view!, attribute: NSLayoutAttribute.leading, multiplier: 1, constant: 8)
let rConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.trailing, relatedBy: NSLayoutRelation.equal,
toItem: self.view!, attribute: NSLayoutAttribute.trailing, multiplier: 1, constant: -8)
let tConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.top, relatedBy: NSLayoutRelation.equal,
toItem: self.view!, attribute: NSLayoutAttribute.top, multiplier: 1, constant: 8)
let bConstraint = NSLayoutConstraint(item: subview, attribute: NSLayoutAttribute.bottom, relatedBy: NSLayoutRelation.equal,
toItem: self.view!, attribute: NSLayoutAttribute.bottom, multiplier: 1, constant: -8)
self.view!.addSubview(subview)
self.view!.addConstraints([lConstraint, rConstraint, tConstraint, bConstraint])
}
self.addSubview(self.view!)
}
This approach can be generalized with tags etc to add multiple subviews.