swift學習選pizza項目

原文: https://makeapppie.com/2014/09/18/swift-swift-implementing-picker-views/
效果:

步驟:

新建iOS single view application 名字爲SwiftPickerViewPizzaDemo, 打開main storyboard選中view controoler, 右上角, attribute inspector中simulated metrics 的size 選擇iphone 4.7-inch這樣view controller更像是一個iphone..

而後拖動三個控件到界面上label, label, picker view

最後打開assistant editor, ctrl 拖動第二個label以及picker view控件到viewController.swift中, 會自動生成以下代碼
 

class ViewController: UIViewController {
//MARK -Outlets and Properties
@IBOutlet weak var myLabel: UILabel!
@IBOutlet weak var myPicker: UIPickerView!
 
//MARK - Instance Methods
 
//MARK - Life Cycle
override func viewDidLoad() {
super.viewDidLoad()
 
}
//MARK - Delgates and Data Source
}

在ViewController中新增以下屬性:
 

let pickerData = [
    ["10\"","14\"","18\"","24\""],
    ["Cheese","Pepperoni","Sausage","Veggie","BBQ Chicken"]
]

讓ViewController實現兩個接口.

class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate {

在viewDidLoad中讓ViewController自身成爲picker view的delegate
 

//MARK - Life Cycle
override func viewDidLoad() {
    super.viewDidLoad()
    myPicker.delegate = self
    myPicker.dataSource = self
}

下面實現接口中定義的方法 以解決以下錯誤: Type 'ViewController' does not conform to protocol 'UIPickerViewDataSource'

// 一共有多少列, 這裏有兩列, 一列是size, 一列是topping
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return pickerData.count
    }
    
    // 每列有多少條記錄
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return pickerData[component].count
    }
    
    // 每列中的每行顯示什麼內容
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return pickerData[component][row]
    }
    
    // 選中某行時的回調函數.
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        updateLabel()
    }

這裏能夠利用代碼提示,好比實現最後一個方法只須要輸入pickerViewdid再自動補全就寫好了.
 

完整的代碼以下:

//
//  ViewController.swift
//  SwiftPickerViewPizzaDemo
//
//  Created by cyper on 16/6/3.
//  Copyright © 2016年 Moaz Tech. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {
    
    // 定義要顯示的兩欄數據. 第1欄爲尺寸, 第2欄爲pizza表層的用料
    // 分別是奶酪, 辣肉腸, 香腸, 蔬菜 和 烤雞
    let pickerData = [["10\"","14\"","18\"","24\""],
                      ["Cheese", "Pepperoni", "Sausage", "Veggie", "BBQ Chicken"]]
    enum PickerComponent: Int {
        case size = 0
        case topping = 1
    }
    
    //MARK -Outlets and Properties
    @IBOutlet weak var myLabel: UILabel!
    
    @IBOutlet weak var myPicker: UIPickerView!
    
    
    //MARK - Instance Methods
    func updateLabel(){
        let szComponent = PickerComponent.size.rawValue
        let tpComponent = PickerComponent.topping.rawValue
        
        let size = pickerData[szComponent][myPicker.selectedRowInComponent(szComponent)]
        let topping = pickerData[tpComponent][myPicker.selectedRowInComponent(tpComponent)]
        myLabel.text = "Pizza: \(size) \(topping)"
    }
    
    //MARK - Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        myPicker.delegate = self
        myPicker.dataSource = self
        
        // 默認選中18寸的
        myPicker.selectRow(2, inComponent: PickerComponent.size.rawValue, animated: false)
        updateLabel()
    }
    
    //MARK - Delgates and Data Source
    // 一共有多少列, 這裏有兩列, 一列是size, 一列是topping
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return pickerData.count
    }
    
    // 每列有多少條記錄
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return pickerData[component].count
    }
    
    // 每列中的每行顯示什麼內容
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return pickerData[component][row]
    }
    
    // 選中某行時的回調函數.
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {
        updateLabel()
    }
}

美化應用.

1. 將原文中的背景圖photo-sep-14-7-40-59-pm_small1.jpg另存到本地, 而後拖動到項目根目錄下(project navigator)


2. 這樣在xcode右下角的media library中就能看到這張圖片

3. 從media library把這張圖片手動到view controller裏邊, 圖片會覆蓋整個手機屏幕, 從outline中將這個圖片放到最上面(在outline中越靠近上面的條目用css的術語來講它的z-index值越小)

4. 選中picker view設置它的背景色(從顏色選擇器中選擇crayon 模式 , 顏色選 Snow 透明度 50%)

5. 給兩個label設置透明的背景, 方法是先拖動一個新的空白view到最下面(以下), 如法炮製設置它的背景爲snow 50%,  而後將最上面的兩個label拖動到這個空白view裏邊, 當你把一個view拖進另外一個view的時候, 這個view就會變成subview.

6. 將這個包含了兩個label的view拖回到最上面..

做者一再強調, 儘可能使用table view而不要使用picker view, (使用picker view的場景是顯示的內容相對固定, 不超過3欄, 每欄的內容不超過15條)

期間碰到了一個問題: 背景圖片的高度不夠, 致使屏幕下面多出了一片空白, 解決辦法: 1. 選中View Controller, 在file inspector中反選auto layout和 using size class (後來選中也不影響?  還要繼續學習auto layout的用法) 2. 選中image, 在attribute inspector中設置view mode爲scale to fill