2019獨角獸企業(yè)重金招聘Python工程師標準>>>

原文:?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實現(xiàn)兩個接口.

class ViewController: UIViewController,UIPickerViewDataSource,UIPickerViewDelegate {

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

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

下面實現(xiàn)接口中定義的方法 以解決如下錯誤:?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}// 每列中的每行顯示什么內(nèi)容func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {return pickerData[component][row]}// 選中某行時的回調(diào)函數(shù).func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {updateLabel()}

這里可以利用代碼提示,比如實現(xiàn)最后一個方法只需要輸入pickerViewdid再自動補全就寫好了.
?

完整的代碼如下:

// // ViewController.swift // SwiftPickerViewPizzaDemo // // Created by cyper on 16/6/3. // Copyright ? 2016年 Moaz Tech. All rights reserved. //import UIKitclass ViewController: UIViewController, UIPickerViewDataSource, UIPickerViewDelegate {// 定義要顯示的兩欄數(shù)據(jù). 第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}// 每列中的每行顯示什么內(nèi)容func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {return pickerData[component][row]}// 選中某行時的回調(diào)函數(shù).func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int) {updateLabel()} }

美化應(yīng)用.

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


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

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

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

5. 給兩個label設(shè)置透明的背景, 方法是先拖動一個新的空白view到最下面(如下), 如法炮制設(shè)置它的背景為snow 50%,??然后將最上面的兩個label拖動到這個空白view里邊, 當你把一個view拖進另一個view的時候, 這個view就會變成subview.

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

作者一再強調(diào), 盡量使用table view而不要使用picker view,?(使用picker view的場景是顯示的內(nèi)容相對固定, 不超過3欄, 每欄的內(nèi)容不超過15條)

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

?

轉(zhuǎn)載于:https://my.oschina.net/uniquejava/blog/686626

總結(jié)

以上是生活随笔為你收集整理的swift学习选pizza项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。