Swift - creating a UIPickerView within a UIStackView PROGRAMMATICALLY

Question

I'm a complete beginner to swift & iOS dev in general, so be easy on me :)
In my app, I have a horizontal StackView.
Within that StackView - I have a label and a button , and now I would like to add a PickerView that would be populated from some list of options .
I've been googling and reading threads, but the closest I've gotten was getting the PickerView to show its position (using some background color) but with no actual values inside .
This is the code where I create and customize my StackView's components:

class SingleReportInputStackView: UIStackView {
    ...  // creating and customizing my StackView


    private func getObjects() -> (UILabel, UIButton, UIPickerView) {
        let myLabel: UILabel = {
            ...  // creating UILabel
        }()
        
        let myButton: UIButton = {
            ... // creating UIButton
        }()
        
        class MyPicker: NSObject, UIPickerViewDelegate, UIPickerViewDataSource {
            let dataArray = ["English", "Maths", "History", "German", "Science"]
            let UIPicker: UIPickerView = UIPickerView()
            
            override init() {
                super.init()
                self.UIPicker.delegate = self
                self.UIPicker.dataSource = self
                self.UIPicker.backgroundColor = UIColor.white
            }
            
            func numberOfComponents(in pickerView: UIPickerView) -> Int {
                return 1
            }
            
            func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
                return dataArray.count
            }
            
            func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
                let row = dataArray[row]
                return row
            }
        }
        
        let myPicker = MyPicker()
        return (myLabel, myButton, myPicker.UIPicker)
    }
    ...
}

Then, I add those components to my Horizontal StackView by calling setupSingleInput() :

class SingleReportInputStackView: UIStackView {
    ...
    private func setupSingleInput() {
        let (myLabel, myButton, myPicker) = getObjects()
        self.addArrangedSubview(myLabel)
        self.addArrangedSubview(myButton)
        self.addArrangedSubview(myPicker)
        self.translatesAutoresizingMaskIntoConstraints = false
    }
    ...
}

As I've said, I can see the label, the button and the PickerView's white background (looks like an empty, white rectangle).

BTW, I don't have a storyboard (if that wasn't obvious already) - I'm creating the UI programatically.

Can someone help me out? Why is my PickerView not being properly populated by my dataArray?

Answer 1

I'm a complete beginner to swift & iOS dev in general ...

I'd recommend starting a bit simpler... embedding a class inside a func is almost certainly not the way to go here.

The biggest problem is that you create an instance of MyPicker inside your getObjects() func, but then you return a UI element from that class, and the class instance goes away -- it goes out of scope :

private func getObjects() -> (UILabel, UIButton, UIPickerView) {
    // ... all the stuff you're doing in here

    let myPicker = MyPicker()

    // as soon as you return, myPicker no longer exists!!!

    return (myLabel, myButton, myPicker.UIPicker)
}

So, you have returned a UIPickerView , but it no longer has any code (its Delegate and DataSource) backing it.

Here's a quick modification:

class SingleReportInputStackView: UIStackView {
    
    private var myPicker: MyPicker!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSingleInput()
    }
    required init(coder: NSCoder) {
        super.init(coder: coder)
        setupSingleInput()
    }
    private func setupSingleInput() {
        let (myLabel, myButton) = getObjects()
        myPicker = MyPicker()
        self.addArrangedSubview(myLabel)
        self.addArrangedSubview(myButton)
        self.addArrangedSubview(myPicker.UIPicker)
        self.translatesAutoresizingMaskIntoConstraints = false
    }
    
    private func getObjects() -> (UILabel, UIButton) {
        let myLabel: UILabel = {
            let v = UILabel()
            v.text = "The Label"
            return v
        }()
        
        let myButton: UIButton = {
            let v = UIButton(type: .system)
            v.setTitle("The Button", for: [])
            return v
        }()
        
        return (myLabel, myButton)
    }
    
    private class MyPicker: NSObject, UIPickerViewDelegate, UIPickerViewDataSource {
        let dataArray = ["English", "Maths", "History", "German", "Science"]
        let UIPicker: UIPickerView = UIPickerView()
        
        override init() {
            super.init()
            self.UIPicker.delegate = self
            self.UIPicker.dataSource = self
            self.UIPicker.backgroundColor = UIColor.white
        }
        
        func numberOfComponents(in pickerView: UIPickerView) -> Int {
            return 1
        }
        
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            return dataArray.count
        }
        
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            let row = dataArray[row]
            return row
        }
    }
    
}

and a sample view controller to try it:

class UriYakirViewController: UIViewController {
    
    let singleReportStack = SingleReportInputStackView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // a yellow-ish background so we can see the white picker view frame
        view.backgroundColor = UIColor(red: 1.0, green: 0.8, blue: 0.5, alpha: 1)
        
        view.addSubview(singleReportStack)
        
        singleReportStack.axis = .vertical
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            singleReportStack.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            singleReportStack.centerYAnchor.constraint(equalTo: g.centerYAnchor),
        ])
        
    }
    
}

That code will give you this result: