UIPickerView text plus image

Question

is it possible to create UIPickerView where there will be text and image in one row?

I know how to create it with text only:

class FirstViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {

    var currArray = ["USD","GBP"] 
    var flags = ["USD.jpg", "GBP.jpg"]
    var picker = UIPickerView()

    @IBOutlet weak var currencySelectorLabel: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()

        picker.delegate = self
        picker.dataSource = self

        currencySelectorLabel.inputView = picker

    }


    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        self.view.endEditing(true)
    }


    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return currArray.count
    }

    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        currencySelectorLabel.text = currArray[row]
    }

    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return currArray[row]
    }
}

But I would like to have something like this:

Obviously instead of image files' names should be real images.

And I want to assign label text from UIPickerView as it is right now.

With help of this post How can I get images to appear in UI PickerView Component in Swift? everything seems to work!

See http://stackoverflow.com/questions/10706459/iphone-uipickerview-image-and-text — rmaddy, Mar 09 '16 at 20:05
@rmaddy Thanks but it is in obj-C which I don't know how to convert into Swift2 — Almazini, Mar 09 '16 at 20:07
Look at the method used in the answer. That points you in the right direction. — rmaddy, Mar 09 '16 at 20:07

score 0 · Answer 1 · answered May 25 '21 at 12:29

Try this to implement title and image in PickerView

@IBOutlet weak var pickerView: UIPickerView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        picker.delegate = self
        picker.dataSource = self

        currencySelectorLabel.inputView = picker
    }
    
    // MARK: UIPickerViewDataSource
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
            return 1
        }
        
        func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
            return currArray.count
        }
        
        func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
            return currArray[row] as? String
        }
    // MARK: UIPickerViewDelegate
    
    func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView?) -> UIView {
     
            let myView = UIView(frame: CGRect(x: 0, y: 0, width: pickerView.bounds.width - 50, height: 40))
    
            let myImageView = UIImageView(frame: CGRect(x: 60, y: 0, width: 30, height: 30))
    
            let countryLabel = UILabel(frame: CGRect(x: 110, y: 0, width: pickerView.bounds.width - 90, height: 40 ))
    
            myImageView.image = flags[row]
            countryLabel.font = UIFont.boldSystemFont(ofSize: 16.0)
            countryLabel.textColor = UIColor.white
            countryLabel.text = currArray[row] as? String
            myView.addSubview(countryLabel)
            myView.addSubview(myImageView)
    
            return myView
    
    }
    
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
    
        // do something with selected row
    }

UIPickerView text plus image

1 Answers1