How to stack custom views inside a UIStackView

Question

Note: I'm pretty new working with iOS UI.

I want to create a custom view that stacks a custom view inside.

So I created the custom UIStackView

class CustomStackView: UIStackView {

    func addItem(color:UIColor){
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: "RowView", bundle: bundle)
        let rowView = RowView();
        let view = nib.instantiate(withOwner: rowView, options: nil).first as! UIView
        rowView.addSubview(view)
        rowView.view.backgroundColor = color;
        addArrangedSubview(rowView)
    }

}

class RowView :UIView{

    @IBOutlet var view: UIView!

    override public var intrinsicContentSize: CGSize {
        return CGSize(width: view.frame.width,height:view.frame.height)
    }
}

in the RowView.xib I created a simple layout for testing:

Simulated Metrics = Freeform
Height = 100

And the ViewController.swift:

class ViewController: UIViewController {

    @IBOutlet weak var customStackView: CustomStackView!
    @IBOutlet weak var constraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        customStackView.addItem(color: UIColor.red)
        customStackView.addItem(color: UIColor.blue)
        customStackView.addItem(color: UIColor.green)
    }

    @IBAction func click(_ sender: Any) {
        constraint.constant = -customStackView.frame.height
        UIView.animate(withDuration: 4, animations: {
            self.view.layoutIfNeeded();
        },completion:nil)
    }

}

The result:

The first and second item are displayed correctly but the third is higher than expected.

In addition if I click the button (which should hide the Stackview) keep the "extra" height visible:

How can I fix that?

Edit: Tried the @KristijanDelivuk solution adding a trailing view. And didn't work. Adding cyan color to the view I got this result:

override func viewDidLoad() {
    super.viewDidLoad()
    customStackView.addItem(color: UIColor.red)
    customStackView.addItem(color: UIColor.blue)
    customStackView.addItem(color: UIColor.green)
    let view = UIView();
    view.heightAnchor.constraint(equalToConstant: 50).isActive = true;
    view.backgroundColor = UIColor.cyan;
    customStackView.addArrangedSubview(view)
}

Answer 1

You can try adding an empty UIView as your last element of UIStackView:

So your hierarchy should look something like this:

- STACKVIEW
-- 1ST ADDED CUSTOM VIEW 
-- 2ND ADDED CUSTOM VIEW
-- 3RD ADDED CUSTOM VIEW
-- EMPTY UIVIEW

Empty UIView will take all unallocated space from 3rd view and all should be displayed correctly.

For repositioning button after hiding/showing stackview you can create for example "top constraint" and then on tap change top constraint height to (-) stackview.height or (+) stackview.height - This shouldn't be any problem.