原文:?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 = selfmyPicker.dataSource = self
}

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

    // 一共有多少列, 這里有兩列, 一列是size, 一列是toppingfunc 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 UIKitclass ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {// 定義要顯示的兩欄數據. 第1欄為尺寸, 第2欄為pizza表層的用料// 分別是奶酪, 辣肉腸, 香腸, 蔬菜 和 烤雞let pickerData = [["10\"","14\"","18\"","24\""],["Cheese", "Pepperoni", "Sausage", "Veggie", "BBQ Chicken"]]enum PickerComponent: Int {case size = 0case topping = 1}//MARK -Outlets and Properties@IBOutlet weak var myLabel: UILabel!@IBOutlet weak var myPicker: UIPickerView!//MARK - Instance Methodsfunc updateLabel(){let szComponent = PickerComponent.size.rawValuelet tpComponent = PickerComponent.topping.rawValuelet size = pickerData[szComponent][myPicker.selectedRowInComponent(szComponent)]let topping = pickerData[tpComponent][myPicker.selectedRowInComponent(tpComponent)]myLabel.text = "Pizza: \(size) \(topping)"}//MARK - Life Cycleoverride func viewDidLoad() {super.viewDidLoad()// Do any additional setup after loading the view, typically from a nib.myPicker.delegate = selfmyPicker.dataSource = self// 默認選中18寸的myPicker.selectRow(2, inComponent: PickerComponent.size.rawValue, animated: false)updateLabel()}//MARK - Delgates and Data Source// 一共有多少列, 這里有兩列, 一列是size, 一列是toppingfunc 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

?