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的用法, 能夠對比看.