新建iOS single view application 名字为PickAFruit,打开main storyboard选中view controoler,右上角,attribute inspector中simulated metrics 的size 选择iphone 4.7-inch这样view controller更像是一个iphone..
然后拖动4个控件到界面上label,image view,label,picker view
最后打开assistant editor,ctrl 拖动后3个控件到viewController.swift中,会自动生成如下代码
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var infoLabel: UILabel!
@IBOutlet weak var pickerView: UIPickerView!
在ViewController中新增如下属性:
let fruits = ["Pick a Fruit","Apples","Oranges","Lemons","Limes","Blueberries"]
让ViewController实现两个接口.
class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate {
在viewDidLoad中让ViewController自身成为picker view的delegate
//MARK - Life Cycle override func viewDidLoad() { super.viewDidLoad() pickerView.delegate = self pickerView.dataSource = self }
下面实现接口中定义的方法 以解决如下错误:Type 'ViewController' does not conform to protocol 'UIPickerViewDataSource'
完整代码如下:
// // ViewController.swift // PickAFruit // // Created by cyper on 16/6/3. // Copyright © 2016年 Moaz Tech. All rights reserved. // import UIKit class ViewController: UIViewController,UIPickerViewDelegate,UIPickerViewDataSource { let fruits = ["Pick a Fruit","Blueberries"] @IBOutlet weak var imageView: UIImageView! @IBOutlet weak var infoLabel: UILabel! @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 pickerView.dataSource = self // 程序启动时,给image view设置一张默认的图片. imageView.image = UIImage(named: "fruits.jpg") } // picker view有多少个组件(多少列),比如date picker可能有三列,分别是月,日,年,这里只有一列,所以返回1. func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int { return 1 } // picker view有多少行(多少条记录),这里就是fruits数组的大小 func pickerView(pickerView: UIPickerView,numberOfRowsInComponent component: Int) -> Int { return fruits.count } // 每行显示什么内容,row是行号,这里直接根据行号从数组中取出要显示的内容 func pickerView(pickerView: UIPickerView,titleForRow row: Int,forComponent component: Int) -> String? { return fruits[row] } // 当用户选择某项时的回调函数,row是用户选择的行号 // 这里根据用户的选择显示不同的image和说明文字 func pickerView(pickerView: UIPickerView,didSelectRow row: Int,inComponent component: Int) { let fruitSelected = fruits[row] switch fruitSelected { case "Apples": imageView.image = UIImage(named: "apples.jpg") infoLabel.text = "These apples are red." case "Oranges": imageView.image = UIImage(named: "oranges") infoLabel.text = "These oranges are orange." case "Lemons": imageView.image = UIImage(named: "lemons.jpg") infoLabel.text = "These lemons are yellow." case "Limes": imageView.image = UIImage(named: "limes") infoLabel.text = "These limes are green." case "Blueberries": imageView.image = UIImage(named: "blueberries.jpg") infoLabel.text = "These blueberries are blue." default: imageView.image = UIImage(named: "fruits.jpg") infoLabel.text = "Please enjoy some fruit." } } }
准备6张jpg水果图片,打开Assets.xcassets,将图片拖动到AppIcon下面(见下图)
选择iphone6s,运行..
知识点:
1. 使用imageView.image = UIImage(named: "apples.jpg")设置图片
2. picker view的用法(实现2两个接口,设置viewController自身做为picker view的delegate,实现接口中的4个方法numberOf..,pickerView ..)