web-dev-qa-db-ja.com

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

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
iosswiftuipickerview
12
Susan Starkman

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
}

ラベルレイアウトなどはデモンストレーション用であり、微調整する必要があるか、自動レイアウトなどを使用する方がよいことに注意してください。

17
Norman G

多くのものを扱うとき、switchステートメントを作成するのは面倒かもしれません。

代わりに、このようなforループを使用してください

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

}
2
Cyril Ivar Garcia

私はこれと同じ質問をし、それを理解するまでいくつかの調査を行いました。これが私にとってうまくいく例です。 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
}
2
Daniel

UIPickerViewをサブクラス化する必要はありません（実際、それはおそらくサブクラス化するための賢明な見方ではありません）。代わりに、UIPickerViewDelegateプロトコルを実装するオブジェクトが必要です。このオブジェクト内で、メソッドを実装します

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

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

0
Andrew Monshizadeh