OGeek|极客世界-中国程序员成长平台

标题: ios - 如何在 UIStackView 中堆叠自定义 View [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-11 19:59
标题: ios - 如何在 UIStackView 中堆叠自定义 View

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

我想创建一个自定义 View ,在里面堆叠自定义 View 。

所以我创建了自定义 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

enter image description here

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

}

结果:

enter image description here

第一项和第二项显示正确,但第三项高于预期。

此外,如果我单击按钮(应该隐藏 Stackview),请保持“额外”高度可见:

enter image description here

我该如何解决这个问题?

编辑:尝试了添加尾随 View 的@KristijanDelivuk 解决方案。并没有奏效。将青色添加到 View 中我得到了这个结果:

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

enter image description here



Best Answer-推荐答案


您可以尝试添加一个空的 UIView 作为 UIStackView 的最后一个元素:

所以你的层次结构应该是这样的:

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

Empty UIView 将从第三个 View 中占用所有未分配的空间,并且所有空间都应该正确显示。

对于隐藏/显示 stackview 后重新定位按钮,您可以创建例如“顶部约束”,然后点击将顶部约束高度更改为 (-) stackview.height 或 (+) stackview.height - 这应该没有任何问题.

关于ios - 如何在 UIStackView 中堆叠自定义 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44823982/






欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/) Powered by Discuz! X3.4