How can I get images to appear in UI PickerView Component in Swift?
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
}
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.