如何在UIStackView中堆疊自定義視圖

Question

注意：我是使用iOS UI的新手。

我想創建一個自定義視圖，在其中堆疊一個自定義視圖。

所以我創建了自定義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)
    }
}

在RowView.xib我創建了一個簡單的布局進行測試：

Simulated Metrics = Freeform
Height = 100

還有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)
    }

}

結果：

第一項和第二項顯示正確，但第三項高於預期。

另外，如果我單擊按鈕（應該隱藏Stackview），則保持“額外”高度可見：

我該如何解決？

編輯：嘗試@KristijanDelivuk解決方案添加尾隨視圖。 而且沒有用。 在視圖中添加青色，我得到了以下結果：

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

您可以嘗試添加一個空的UIView作為UIStackView的最后一個元素：

因此，您的層次結構應如下所示：

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

空的UIView將占用第3個視圖中所有未分配的空間，並且應正確顯示所有空間。

為了在隱藏/顯示stackview之后重新定位按鈕，您可以創建例如“頂部約束”，然后在點擊時將頂部約束高度更改為（-）stackview.height或（+）stackview.height-這應該沒有問題。