如何让图像出现在 Swift 的 UI PickerView 组件中?
How can I get images to appear in UI PickerView Component in Swift?
我正在尝试在 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
您不需要子类化 UIPickerView
(事实上,无论如何子类化可能都不是一个明智的观点)。相反,您需要有一个实现 UIPickerViewDelegate
协议的对象。在此对象中,您将实现方法
optional func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView!) -> UIView
此方法提供各个组件的视图。在该方法中,您将从图像数组中 return 适当的值。
您将需要为 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
}
请注意,标签布局等仅用于演示,需要进行调整,或者最好使用自动布局等。
我也有同样的问题,并做了一些研究,直到我弄明白了。这是一个对我很有用的例子。只需确保 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
}
处理很多东西时,制作 switch 语句可能会很乏味。
相反,使用这样的 for 循环
for _ in 1..<imageArray.count {
myImageView.image = UIImage(named: imageArray[row])
}
var pickerDataSource = [UIImage(named:"house-7"),UIImage(named:"house-7"),UIImage(named:"house-7"),UIImage(named:"house-7"),UIImage(named:"house-7")]
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
let myImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 61))
myImageView.image = pickerDataSource[row]
return myImageView
}
我正在尝试在 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
您不需要子类化 UIPickerView
(事实上,无论如何子类化可能都不是一个明智的观点)。相反,您需要有一个实现 UIPickerViewDelegate
协议的对象。在此对象中,您将实现方法
optional func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusingView view: UIView!) -> UIView
此方法提供各个组件的视图。在该方法中,您将从图像数组中 return 适当的值。
您将需要为 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
}
请注意,标签布局等仅用于演示,需要进行调整,或者最好使用自动布局等。
我也有同样的问题,并做了一些研究,直到我弄明白了。这是一个对我很有用的例子。只需确保 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
}
处理很多东西时,制作 switch 语句可能会很乏味。
相反,使用这样的 for 循环
for _ in 1..<imageArray.count {
myImageView.image = UIImage(named: imageArray[row])
}
var pickerDataSource = [UIImage(named:"house-7"),UIImage(named:"house-7"),UIImage(named:"house-7"),UIImage(named:"house-7"),UIImage(named:"house-7")]
func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
let myImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 61))
myImageView.image = pickerDataSource[row]
return myImageView
}