Using IBDesignable and IBInspectable with UIViewController

Question

I am new to iOS development. I am using swift and I want to design my views programmatically but I would like to use IBDesigner and IBInspectable to speed up my design process.

Right now I have a view controller with various buttons and labels on it. Here is a snippet of my code:

@IBDesignable class LandingView: UIViewController, LandingViewProtocol {

    @IBInspectable lazy var backButton: UIButton = {
        var button = UIButton()
        button.backgroundColor = Styles.BUTTON_COLOR
        return button
    }()
    @IBInspectable lazy var caption: UILabel = UILabel()
}

My question now is how do I use the interface builder with IBDesignable and IBInspectable? Do I need to add a .xib? I saw some other questions mentioning that I need to use a playground, but I was trying to avoid using that, i essentially wanted to know if it is possible to view my entire viewcontroller?

Thank you,

Answer 1

You can not use IBDesignable with another class that not inherit from UIView or NSView. Check the Guideline by the Apple about the IBDesignable:

You can use two different attributes—@IBDesignable and @IBInspectable—to enable live, interactive custom view design in Interface Builder. When you create a custom view that inherits from the UIView class or the NSView class, you can add the @IBDesignable attribute just before the class declaration

Source: Live Rendering

a

Answer 2

There is a workaround to test out your view controller layout using IBDesignable.

1. Layout your view controller in code just as you'd do normally
2. Create an IBDesignable UIView subclass and add the view controller's view as a subview.
3. Create a xib and set the class its view to the subclass you created in step 2

To elaborate on step 2, your IBDesignable's initWithFrame: method may look like

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    MyViewController *viewController = [MyViewController alloc] init];
    viewController.view.frame = self.bounds;
    [self addSubview:viewController.view];
    return self;
}

So beyond this initWithFrame method, all of your layout code can be handled by your view controller. You may want to pass data to your view controller in your subview's prepareForInterfaceBuilder method.