Custom flexible reusable view using xib

Question

I'm trying to create custom reusable view, lets say QuestionView. Now I use this class to be extended by my QuestionView, so it loads view from my xib, then this view added as subview to self. It works ok in case if my view has constant height and width, but I need kind of this layout

Question View xib

This view's file's owner set to QuestionView.

I have label on top which connected with top, left and right via constraints but it's flexible in terms of height - label is multiline. Yes/No buttons view connected to bottom of label, left and right of superview and has constant height. Details view connected to bottom of buttons view, to left and to right, has constant height. So my QuestionView has flexible height. If I change text of label to 2 lines for example, my view should be stretched.

I have ViewController xib, where I put generic view and set its class to QuestionView.

I just add this view as subview of QuestionView so I think there is a problem with constraints between view and subview, I should add them? I tried to add left, right, top, bottom constraints between them with translatesAutoresizingMaskIntoConstraints set to false but anyway got strange (similar to height from xibs) superview(QuestionView) height, subview height is ok in runtime.

So what am I doing wrong here? Do I need to bind subview height to superview height somehow differently?

UPD. Here is screenshot in runtime, gray view is it's size in runtime, should be stretched to TextField bottom. Now it looks like it was false effect of ok subview height in runtime.

Runtime

Here is my code now

import UIKit

protocol NibDefinable {
    var nibName: String { get }
}

@IBDesignable
class NibLoadingView: UIView, NibDefinable {

    var containerView: UIView!

    var nibName: String {
        return String(self.dynamicType)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        nibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        nibSetup()
    }

    private func nibSetup() {
        //clipsToBounds = true
        containerView = loadViewFromNib()
        containerView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(containerView)
        addConstraint(.Top)
        addConstraint(.Left)
        addConstraint(.Bottom)
        addConstraint(.Right)
    }

    private func addConstraint(attribute: NSLayoutAttribute) {
        self.addConstraint(NSLayoutConstraint(item: self,
                attribute: attribute,
                relatedBy: .Equal,
                toItem: containerView,
                attribute: attribute,
                multiplier: 1,
                constant: 0.0
        ))
    }

    private func loadViewFromNib() -> UIView {
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib = UINib(nibName: nibName, bundle: bundle)
        let nibView = nib.instantiateWithOwner(self, options: nil).first as! UIView

        return nibView
    }

}

can you provide picture of your runtime layout. hard to understand with your description — slxl
and yes, you have to set translatesAutoresizingMaskIntoConstraints to false and add four side constraints at nibSetup() — slxl

slxl slxl · Accepted Answer · 2016-04-16T13:15:53

First, you have to add a constraint between QuestionView and bottom of it's superview

Second, looks like problem might be with QuestionView's superview and its parent constraints.

UPD

the best tool to nail those kind of bugs - Reveal

Custom flexible reusable view using xib

1 Answers