Where am I going wrong adding images to my UIPickerView? - swift

Question

Mine is an educational app, the student is given a word and then is supposed to select the corresponding image (say matching the word banana to the image of one, where the image is in a UIPickerview) However, my following code yields no results:
let possibleAnswers = [UIImage(named: Images.one), UIImage(named: Images.two), UIImage(named: Images.three), UIImage(named: Images.four)]
fileprivate let pickerView: UIPickerView = {
let pv = UIPickerView()
pv.translatesAutoresizingMaskIntoConstraints = false
return pv
}()
override func viewDidLoad() {
pickerView.delegate = self
pickerView.dataSource = self
}
extension ViewController: UIPickerViewDataSource {
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return possibleAnswers.count
}
}
extension ViewController: UIPickerViewDelegate {
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
let myImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 220, height: 61))
myImageView.image = possibleAnswers[row]
return myImageView
}
}
Am I doing something wrong? How can I rectify this?
EDIT 1:
This is what the erroneous view looks like.

Answer 1

Set PickerView row Height to match your image size using rowHeightForComponent function
class ViewController: UIViewController,UITextFieldDelegate{
fileprivate let possibleAnswers:[UIImage] = [UIImage(named: "apple.png")!,UIImage(named: "banana.png")!,UIImage(named: "orange.png")!]
fileprivate var pickerView: UIPickerView?
fileprivate var toolBar:UIToolbar?
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBackground
view.addSubview(btn)
btn.translatesAutoresizingMaskIntoConstraints = false
btn.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
btn.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
btn.addTarget(self, action: #selector(test), for: .touchUpInside)
}
//MARK: Components
let btn :UIButton = {
let btn = UIButton(type: .system)
btn.setTitle("Select Correct Answer", for: .normal)
return btn
}()
}
// MARK: Pickerview Delegate
extension ViewController: UIPickerViewDelegate,UIPickerViewDataSource {
func numberOfComponents(in pickerView: UIPickerView) -> Int {
return 1
}
func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
return possibleAnswers.count
}
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
let myImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
myImageView.image = possibleAnswers[row]
return myImageView
}
func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
return 100
}
}
//MARK: Functions
extension ViewController{
#objc func test(){
pickerView = UIPickerView.init()
pickerView!.delegate = self
pickerView!.backgroundColor = UIColor.white
pickerView!.setValue(UIColor.black, forKey: "textColor")
pickerView!.autoresizingMask = .flexibleWidth
pickerView!.contentMode = .center
pickerView!.frame = CGRect.init(x: 0.0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 300)
self.view.addSubview(pickerView!)
toolBar = UIToolbar.init(frame: CGRect.init(x: 0.0, y: UIScreen.main.bounds.size.height - 300, width: UIScreen.main.bounds.size.width, height: 50))
toolBar!.barStyle = .blackTranslucent
toolBar!.items = [UIBarButtonItem.init(title: "Done", style: .done, target: self, action: nil)]
self.view.addSubview(toolBar!)
}
}