Wie kann ich Bilder in UI PickerView Component in Swift anzeigen lassen?

Question

Ich versuche, Bilder in einem Swift PickerView zu verwenden. Ich weiß nicht, wie die Bilder tatsächlich in der Komponente erscheinen. Ich weiß, wie man dies mit Strings mit der titleForRow-Funktion macht, aber ich weiß nicht, wie man das mit Bildern macht. Hier ist mein Code so weit:

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

Sie müssen ein paar mehr die Delegate-Methoden für das UIPickerViewDelegate-Protokoll implementieren. Insbesondere eine rowHeight-Delegate-Methode und eine viewForRow-Delegate-Methode.

Etwas wie:

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

Beachten Sie, dass das Etikettenlayout usw. nur für die Demonstration ist, müßte optimiert werden, oder wahrscheinlich besser Auto Layout ect zu verwenden.

Answer 2

Sie brauchen nicht UIPickerView (und in der Tat, die wahrscheinlich nicht eine kluge Ansicht ist jedenfalls zu Unterklasse), Unterklasse. Stattdessen benötigen Sie ein Objekt, das das Protokoll UIPickerViewDelegate implementiert. In diesem Objekt implementieren Sie die Methode

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

Diese Methode bietet die Ansichten der einzelnen Komponenten. Innerhalb dieser Methode würden Sie den entsprechenden Wert aus Ihrem Bild-Array zurückgeben.

Answer 3

Ich hatte die gleiche Frage und recherchierte, bis ich herausgefunden hatte. Hier ist ein Beispiel, das gut für mich funktioniert. Stellen Sie nur sicher, dass Ihre Bilder im Assets-Ordner alle dieselben Namen haben wie Ihre Fallstrings und Sie werden festgelegt!

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

Answer 4

Die Erstellung von Switch-Anweisungen kann im Umgang mit vielen Dingen mühsam sein.

Verwenden Sie stattdessen eine for-Schleife wie diese

for _ in 1..<imageArray.count { 
myImageView.image = UIImage(named: imageArray[row]) 

}