swift学习选pizza项目

概述原文: https://makeapppie.com/2014/09/18/swift-swift-implementing-picker-views/ 效果: 步骤: 新建iOS single view application 名字为SwiftPickerViewPizzaDemo, 打开main storyboard选中view controoler, 右上角, attribute inspe

原文: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 CycleoverrIDe 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 CycleoverrIDe 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 UIKitclass VIEwController: UIVIEwController,UIPickerVIEwDelegate {        // 定义要显示的两栏数据. 第1栏为尺寸,第2栏为pizza表层的用料    // 分别是奶酪,辣肉肠,香肠,蔬菜 和 烤鸡    let pickerData = [["10\"","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    // 一共有多少列,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

总结

以上是内存溢出为你收集整理的swift学习选pizza项目全部内容，希望文章能够帮你解决swift学习选pizza项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。