将视图动态添加到 UIStackview答案

【问题标题】：Adding views dynamically to UIStackview将视图动态添加到 UIStackview
【发布时间】：2018-07-24 04:45:09
【问题描述】：

我正在尝试将视图（或按钮）动态添加到 UIStackView。

起初，UIStackView 没有排列视图（垂直），并且从一些 http 响应获得后，几个视图（按钮）被添加到 UIStackView。 UIStackView 也是自动布局以容纳特定区域。我试图找到动态添加示例，但失败了。

任何人都可以向我展示动态添加视图到UIStackView 的示例吗？

【问题讨论】：

不确定这是否可行，我想我尝试过一次但失败了
到目前为止你做了什么？
您的问题解决了吗？如果是，请从下面选择一个答案
感谢所有答案，但没有我需要的确切答案。但是，我必须拿起一个吗？

标签： swift autolayout uistackview

【解决方案1】：

它可以帮助你。请遵循以下几点：

在情节提要或 XIB 中将 UIScrollView 添加到您的 UIViewController。
启动一个NSMutableArray 命名它arrViews 获取服务器响应并在数组中添加视图。
在 init 方法中初始化 UIStackViewpass arrView 数组。
之后UIStackView 将添加UIScrollView 的子视图。

以编程方式将约束添加到UIStackView。就是这样。

if let response = self.serverResponse {
    if let body = response.responseBody {

        if let view = body.views {
            arrViews =  createSubViews(view)
        }

    }
}

let stackView = UIStackView(arrangedSubviews: arrViews)
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.spacing = 16
stackView.distribution = .fill
self.scrollView.addSubview(stackView)

//constraints

let leading = NSLayoutConstraint(item: stackView, attribute: .leading, relatedBy: .equal, toItem: self.scrollView, attribute: .leading, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(leading)
let trailing = NSLayoutConstraint(item: stackView, attribute: .trailing, relatedBy: .equal, toItem: self.scrollView, attribute: .trailing, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(trailing)
let top = NSLayoutConstraint(item: stackView, attribute: .top, relatedBy: .equal, toItem: self.scrollView, attribute: .top, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(top)

let bottom = NSLayoutConstraint(item: stackView, attribute: .bottom, relatedBy: .equal, toItem: self.scrollView, attribute: .bottom, multiplier: 1.0, constant: 0)
self.scrollView.addConstraint(bottom)

let equalWidth = NSLayoutConstraint(item: stackView, attribute: .width, relatedBy: .equal, toItem: self.scrollView, attribute: .width, multiplier: 1.0, constant: 0)

self.scrollView.addConstraint(equalWidth)


leading.isActive = true
trailing.isActive = true
top.isActive = true
bottom.isActive = true
equalWidth.isActive = true

希望对您有所帮助。快乐编码:)

【讨论】：

谢谢。好建议。我根本没有想到那个滚动视图。我会试试的。
欢迎。如果它对你有用，请告诉我，请接受答案并投票给我。 ;) 提供更多帮助。

【解决方案2】：

我在我的一个项目中使用此代码：

    let baseFrame = CGRect(origin: .zero, size: CGSize(width: requiredWidth, height: partitionHeight))
    for instrument in instruments {
        let partitionView = PartitionOnDemand(instrument: instrument, mode: playbackMode, frame: baseFrame, referenceView: partitionsAnimator)
        partitionsStackView.addArrangedSubview(partitionView)
        let tab = InstrumentInfoTabContainer.instantiate(with: instrument) {
            self.focus(on: instrument)
        }
        tabsStackView.addArrangedSubview(tab)
    }

【讨论】：

谢谢！但由于我的技能不好，我无法理解你的意思。
它是一个循环，用音乐分区和乐器信息填充两个堆栈视图。重要的部分是 addArrangedSubview
我能够通过使用 addArrangedSubview 将视图动态添加到 StackView - 谢谢。

【解决方案3】：

在尝试回答时，我碰巧找到了解决方法。

class ViewController: UIViewController {

@IBOutlet weak var stack: UIStackView!
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}
@IBAction func onBtn_Create(_ sender: Any) {
    createButton("new button ...")
}
@IBAction func onBtn_Delete(_ sender: Any) {
    if let v = stack.arrangedSubviews.last {
        stack.removeArrangedSubview(v)
        v.removeFromSuperview()
    }

}


func createButton(_ title: String) {
    let button = UIButton()
    button.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
    button.backgroundColor = UIColor.blue
    button.setTitle(title, for: .normal)
    button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)

    stack.addArrangedSubview(button)
}


@objc func buttonAction(sender: UIButton!) {
    print("Button tapped")
}

}

而且，我锚定到 UIStackView，Trailing=0，Leading=0，Top=0，Bottom=8 到 TextView.Top

里面的子视图完好无损，没有任何约束。

谢谢。

【讨论】：