Is it possible to load UIStackView arrangedSubviews after init - ios

Question

I have a View which contains a UIStackView, this UIStackView arrangedSubviews is an array of UIButtons. What happens is that when I'm on ViewDidLoad of my ViewController, I set an array of UIButtons like this:
let buttons = [button1, button2, button3, button4]
The number of buttons can vary from 1 to 4.
On the View file I have a variable with didSet, on that didSet I set an array in the view to have the contents of the buttons array.
The problem is that the didSet happens after the View's init(), so when I setup the UIStackView, the array is an empty array.
Is there a way to make the view to set the UIStackView again after the didSet, so I will have the array I need?
This is my View with the didSet and the array:
class ProductDetailView: UIView {
var productViewModel: ProductDetailViewModel? {
didSet {
self.quantityButtons = self.productViewModel?.quantityOptions ?? [] <--- This is where I set the buttons array.
}
}
//MARK: - Properties
var quantityButtons: [UIButton] = [] //TODO: This should be a custom button.
}
This is my UIStackView:
private lazy var quantitiesStack: UIStackView = {
let stack = UIStackView(arrangedSubviews: self.quantityButtons)
stack.translatesAutoresizingMaskIntoConstraints = false
stack.axis = .horizontal
stack.distribution = .fillEqually
stack.spacing = 2.0
return stack
}()
If it is not possible, how should I approach this issue? how can I have the populated array when I need it?
EDIT: I also tried this approach:
var quantityButtons: [UIButton] {
return productViewModel?.quantityOptions ?? []
}
still got an empty array.

Answer 1

I'm still kinda confused by what exactly you're doing, but I think I know what you want to do. You can copy paste the code into a new Xcode project and after a few second you'll see the buttons appear.
class ProductDetailView: UIView {
// The StackView for the buttons should be in this view.
private lazy var quantitiesStack: UIStackView = {
let stack = UIStackView(arrangedSubviews: self.quantityButtons)
stack.translatesAutoresizingMaskIntoConstraints = false
stack.axis = .horizontal
stack.distribution = .fillEqually
stack.spacing = 2.0
return stack
}()
//MARK: - Properties
var quantityButtons: [UIButton] = [] {
didSet {
guard !quantityButtons.isEmpty else { return }
// Might need to modify this if you update the buttons more than once.
guard quantitiesStack.arrangedSubviews.isEmpty else { return }
for button in quantityButtons {
// Adding these subviews will cause the stackview to be redraw with these buttons.
quantitiesStack.addArrangedSubview(button)
}
}
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
private func commonInit() {
// layout - this view is basically just a stackview.
addSubview(quantitiesStack)
quantitiesStack.translatesAutoresizingMaskIntoConstraints = false
quantitiesStack.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
quantitiesStack.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
quantitiesStack.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
quantitiesStack.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
}
}
class ViewController: UIViewController {
let productDetailView = ProductDetailView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(productDetailView)
productDetailView.backgroundColor = .lightGray
productDetailView.translatesAutoresizingMaskIntoConstraints = false
productDetailView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
productDetailView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16).isActive = true
productDetailView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16).isActive = true
// Simulate delay loading data.
DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(3), execute: {
var buttons: [UIButton] = []
for i in 0..<4 {
let button = UIButton(type: .custom)
button.setTitle("Button \(i)", for: .normal)
button.titleLabel?.textColor = .black
buttons.append(button)
}
// This will trigger the buttons to be added to the stackView and then they will appear in the UI.
self.productDetailView.quantityButtons = buttons
})
}
}
Screenshot: