How can I get images to appear in UI PickerView Component in Swift?

Question

I am trying to use images in a Swift PickerView. I don't know how to get the images to actually appear in the component. I know how to do this using Strings with the titleForRow function but I don't know how to do this using images. Here is my code so far:

import UIKit
class ViewController: UIViewController, UIPickerViewDelegate {

    @IBOutlet weak var pickerView: UIPickerView!


    var imageArray: [UIImage] = [UIImage(named: "washington.jpg")!,
        UIImage(named: "berlin.jpg")!, UIImage(named: "beijing.jpg")!,
        UIImage(named: "tokyo.jpg")!]



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


    // returns the number of 'columns' to display.
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int{

        return 1

    }

    // returns the # of rows in each component..
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {

        return imageArray.count
    }



}// end of app

Answer 1

You will need to implement a couple more the delegate methods for the UIPickerViewDelegate protocol. In particular a rowHeight delegate method and a viewForRow delegate method.

Something like:

// MARK: UIPickerViewDataSource

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

func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return 2
}

 func pickerView(pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
    return 60
}


// MARK: UIPickerViewDelegate

func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView!) -> UIView {

    var myView = UIView(frame: CGRectMake(0, 0, pickerView.bounds.width - 30, 60))

    var myImageView = UIImageView(frame: CGRectMake(0, 0, 50, 50))

    var rowString = String()
    switch row {
    case 0:
        rowString = “Washington”
        myImageView.image = UIImage(named:"washington.jpg")
    case 1:
        rowString = “Beijing”
        myImageView.image = UIImage(named:"beijing.jpg")
    case 2:
        default:
        rowString = "Error: too many rows"
        myImageView.image = nil
    }
    let myLabel = UILabel(frame: CGRectMake(60, 0, pickerView.bounds.width - 90, 60 ))
    myLabel.font = UIFont(name:some font, size: 18)
    myLabel.text = rowString

    myView.addSubview(myLabel)
    myView.addSubview(myImageView)

    return myView
}

func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

   // do something with selected row
}

Note that the label layout etc is just for demonstration, would need to be tweaked, or probably better to use Auto Layout ect.

Answer 2

I had this same question and did some research until I figured it out. Here's an example that works great for me. Just make sure your images in the Assets folder are all named the same as your case strings and you'll be set!

@IBOutlet weak var pickerView: UIPickerView!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    pickerView.delegate = self
}

// MARK: UIPickerViewDataSource

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

func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
    return 11
}

// MARK: UIPickerViewDelegate

func pickerView(pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView?) -> UIView {


    var myImageView = UIImageView()

    switch row {
    case 0:
        myImageView = UIImageView(image: UIImage(named:"airplane"))
    case 1:
        myImageView = UIImageView(image: UIImage(named:"beach"))
    case 2:
        myImageView = UIImageView(image: UIImage(named:"bike"))
    case 3:
        myImageView = UIImageView(image: UIImage(named:"hiking"))
    case 4:
        myImageView = UIImageView(image: UIImage(named:"ironman"))
    case 5:
        myImageView = UIImageView(image: UIImage(named:"moneybag"))
    case 6:
        myImageView = UIImageView(image: UIImage(named:"moneybills"))
    case 7:
        myImageView = UIImageView(image: UIImage(named:"ninjaturtle"))
    case 8:
        myImageView = UIImageView(image: UIImage(named:"running"))
    case 9:
        myImageView = UIImageView(image: UIImage(named:"shoppingcart"))
    case 10:
        myImageView = UIImageView(image: UIImage(named:"workingout"))
    default:
        myImageView.image = nil

        return myImageView
    }
    return myImageView
}

func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {

    // do something with selected row
}