SwiftのUI PickerViewコンポーネントに画像を表示させるにはどうすればよいですか？

Question

Swift PickerViewで画像を使用しようとしています。イメージを実際にコンポーネントに表示させる方法はわかりません。私はtitleForRow関数で文字列を使ってこれを行う方法を知っていますが、画像を使ってこれを行う方法はわかりません。あなたがUIPickerView（そしておそらくとにかくサブクラス化するために賢明なビューではありません実際には）をサブクラス化する必要はありません

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プロトコルのデリゲートメソッドをさらに2つ実装する必要があります。具体的には、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

：ここでは、これまでに私のコードです。代わりに、UIPickerViewDelegateプロトコルを実装するオブジェクトが必要です。このオブジェクト内では、メソッドを実装します

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

このメソッドは、個々のコンポーネントのビューを提供します。そのメソッド内で、イメージ配列から適切な値を返します。

Answer 3

私はこの同じ質問をして、私がそれを理解するまで研究しました。ここで私にとって素晴らしい作品です。 Assetsフォルダ内の画像がすべてあなたのケース文字列と同じ名前になっていることを確認してください！

@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文を作成するのは面倒なことがあります。我々は複数のpickerviewsを持っている場合ではないすべてのpickerviewのテキストを持つ唯一のいくつかと、他のいくつかである通常のpickerviewsをイメージを持っていますので、問題は、viewForRowで来るがあるかもしれないより

代わりに、この

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

}