swift学习选fruit项目

新建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", "Apples", "Oranges", "Lemons", "Limes", "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 ..)

3. 上一篇博客有提到两栏picker view的用法, 能够对比看.