如何讓圖像出現在Swift中的UI PickerView組件中？

Question

我想在Swift PickerView中使用圖像。我不知道如何讓圖像真正出現在組件中。我知道如何使用帶有titleForRow函數的字符串來完成此操作，但我不知道如何使用圖像來執行此操作。這是我到目前爲止的代碼：

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

您需要爲UIPickerViewDelegate協議實現更多的委託方法。特別是一個rowHeight委託方法和一個viewForRow委託方法。

喜歡的東西：

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

注意標籤佈局等只是用於演示，需要進行調整，或可能更好地使用自動佈局等。

Answer 2

你並不需要繼承UIPickerView（事實上這可能是不是無論如何繼承一個明智的觀點）。相反，您需要有一個實現UIPickerViewDelegate協議的對象。在此對象內，您將執行方法

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

此方法提供各個組件的視圖。在該方法中，您將從圖像數組中返回適當的值。

Answer 3

我有同樣的問題，並做了一些研究，直到我明白了。這是一個對我很好的例子。只要確保資產文件夾中的圖像全部與您的案例字符串命名相同，即可設置！

@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

在處理很多事情時，製作switch語句可能很乏味。

相反，使用一個for循環這樣

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

}