编写一个小费计算器App吧~第三章练习Tip Calculator

练习:Tip Calculator 小费计算器

下一个App可以帮助用户计算他们每次去餐厅吃饭时应该付多少钱给服务员吗,用户输入总消费额,然后从3个费率:15%,20%和25%中挑一个费率,用户点击计算按钮,消费数额就会出现在屏幕上。App完成版本的效果图如下(见图3-5):

图3-5 最终App的样子

Exercise: Tip Calculator | Page 71

现在你知道了App有哪些功能,那么打开Xcode吧,点击Dock中的Xcode图标,如果Dock中没有Xcode,那么去Spotlight中搜索一下。

接着会出现熟悉的Xcode欢迎界面。关闭欢迎界面,点击顶部菜单栏的File -> New -> Project(见图3-6)。

图3-6 新工程New project

Page 72 | Chapter 3 : Diving into Swift

从模板中选择Single View Application,点击Next(见图3-7)。

图3-7

Project的一些项目可能已经自动为你填写好了。

Exercise: Tip Calculator | Page 73

在Product Name一栏输入TipCalcualtor,Organization Name和Organization Identifier可以写成你的姓名,之间不要有空格。最后,Language选择Swift,Devices选择iPhone,点击Next(见图3-8)。

图3-8

接下来从左侧选择你要存放的文件夹,点击Create,保存工程(见图3-9)。

图3-9

Page 74 | Chapter 3 : Diving into Swift

出现了工程的详细信息界面(见图3-10)。

图3-10

Exercise: Tip Calculator | Page 75

点击Project Navigator中的Main.storyboard文件(见图3-11)。

图3-11 Main.storyboard

我们这次开发的App仅限于在iPhone上使用,点击Inspector的上方第一个按钮,看起来像是一张纸折了一个角。到中间部分,不勾选Use Auto Layout选项。这时会出现一个对话框,选择iPhone。然后不勾选Disable Size Classes(见图3-12)。这时,Storyboard中的界面形状会改变。我们将会在第七章详细介绍Auto Layout的知识。

图3-12

Page 76 | Chapter 3 : Diving into Swift

确保Inspector在屏幕的右方。如果没有出现在屏幕右方,点击Inspector View Button,就是右上角右边有一条条纹的按钮,这样就可以显示Inspector了。

Inspector下方有个小的工具栏按钮,Object Library图标(圆圈中有个小方块)在图3-13中蓝色高亮了,如果你的Xcode这个图标不是蓝色,点击一下这个图标。

图3-13 Object Library

Exercise: Tip Calculator | Page 77

Object Library的下方有个搜索框,输入Label(见图3-14),Object Library搜索框能够方便地找到我们需要的控件。在使用完毕后记得情况输入框中的文字,不然你就看不到所有的控件了。

图3-14

将一个Label控件拖入到界面中(见图3-15)。借助辅助线让Label水平居中且垂直居中。

图3-15

Page 78 | Chapter 3 : Diving into Swift

看一下Inspector顶部的工具栏按钮,点击Attribute Inspector图标,从左数第四个(见图3-16),看起来像是一个朝下的箭头。

图3-16 Attribute Inspector icon

在text属性中输入为$0.00,点击回车。然后点击center alignment按钮(见图3-17)。

图3-17

再回到Inspector上方的工具栏,点击从右往左第二个外表像是尺子的图标来打开Size Inspector(见图3-18)。Size Inspector可以设置控件具体位置。

图3-18

Exercise: Tip Calculator | Page 79

宽设置为100,X值设置为110,Y值设置为200,这时注意界面中Label的位置已经发生了变化(见图3-19)。点击Attribute Inspector图标。

图3-19

Page 80 | Chapter 3 : Diving into Swift

接下来,我们要往界面上放一个Button。把鼠标光标移动到右下角,在Object Library找到Button控件(见图3-20),把Button控件拖动到界面上。借助辅助线让Button水平居中,放在Label的上方(见图3-21)。

图3-20
图3-21

双击Button,输入Calculate,回车。

Exercise: Tip Calculator | Page 81

接下来我们要添加一个Segmented Control(见图3-22)。Segmented Control有点像是switch不过有更多选择。Segmented Control可以在两个或者更多的segments之前点击切换,一次只能选择一个segment。

图3-22 Object Library中的Segmented Control

在Object Library中找到Segmented Control,然后拖到界面上,把Segmented Control放到Button的上方(见图3-23)。

图3-23

Page 82 | Chapter 3 : Diving into Swift

选中Segmented Control,然后点击Inspector上的Attribute Inspector,把Segments的数字修改为3(见图3-24)。你会看到界面上的Segmented Control已经变成了3个(见图3-25)。

图3-24
图3-25

接着双击Segmented Control上的First单词,修改为15%,回车。双击Second修改为20%,双击第三个Segment,输入25%(见图3-26)。

图3-26

Exercise: Tip Calculator | Page 83

最后需要添加的控件是Text Field,Text Field可以让用户通过敲击键盘输入东西。

到Object Library中找到Text Field(见图3-27)。把Text Field拖到界面上,放到Segmented Control的上方(见图3-28)。

图3-27
图3-28

Page 84 | Chapter 3 : Diving into Swift

点击Attribute Inspector,找到Placeholder属性,从上往下第五行。输入Total Bill $(见图3-29)。placeholder的文案有点像是向导,指导你在Text Field中输入什么文字。

图3-29

当用户点击Text Field时,placeholder中的文字会消失不见,然后键盘出现在屏幕上。

Exercise: Tip Calculator | Page 85

接下来在Inspector中找到Keyboard Type属性,点击Default右边下拉按钮,选择Decimal Pad(见图3-30)。这样,弹出的键盘就只有数字了,用户不需要在这里输入字母。

图3-30

现在界面已经搭建完毕了,那么接下来需要我们把界面view和conroller(就是swift文件)连起来了。和上一章节中的练习一样,我们会用到Assistant Editor,来连接view和controller。

在屏幕的右上角,点击Assistant Editor按钮(见图3-31)。打开Assistant Editor后,点击Inspector View按钮,让Editor的空间更大一些(见图3-32)。

图3-31 Assistant Editor按钮
图3-32 隐藏Inspector

Page 86 | Chapter 3 : Diving into Swift

�Assistant Editor会自动打开ViewController.swift文件,Assistant Editor上方在“Automatic”右边会有文件名称,核对一下是否是ViewController.swift。

选中界面上的Text Field控件,同时按住Control键,将Text Field控件拖到右边ViewController.swift文件中下面这行代码的下方:

class ViewController: UIViewController {

当你看到一条蓝色的横线时,然后松开鼠标(见图3-33),接着出现一个弹出框(见图3-34)。

图3-33
图3-34

Exercise: Tip Calculator | Page 87

因为你要获取Text Field中用户输入的数值,所以我们使用Outlet连接类型。在Name一栏中输入billTextField作为变量名,其余不变,点击Connect完成连接。

当你点击Connect后会产生一行代码(见图3-35)。看一下这行代码:

@IBOutlet var billTextField : UITextField!
图3-35

Page 88 | Chapter 3 : Diving into Swift

我们先跳过第一个单词,过会再来讨论它。先看一下var这个单词,var用来声明变量,billTextField是这个变量的名字,冒号用来声明这个变量的类型,UITextField就是这个变量的类型。最后,@IBOutlet这个次用来表示这是view和controller之间的一个outlet连接。billTextField这个变量在代码就代表界面上的这个Text Field控件。

选中Segmented Control控件,同时按住Control键,然后拖到右边ViewController.swift文件中下面这行代码的下方:

class ViewController: UIViewController {

当你看到一条蓝色的横线时,然后松开鼠标(见图3-36),接着出现一个弹出框(见图3-37)。

图3-36
图3-37

Exercise: Tip Calculator | Page 89

将Connection设置为Outlet,Name是tipRateSegmentedControl。剩下的选项不变,然后点击Connect。

接下来选中界面上的Label控件,同时按住Control键,然后拖到右边ViewController.swift文件中下面这行代码的下方:

class ViewController: UIViewController {

当你看到一条蓝色的横线时,然后松开鼠标(见图3-38),接着出现一个弹出框(见图3-39)。

图3-38
图3-39

Page 90 | Chapter 3 : Diving into Swift

将Connection设置为Outlet,Name是tipLabel,剩下的选项不变,然后点击Connect。

最后,选中界面上的Button控件,同时按住Control键,然后拖到右边ViewController.swift文件中下面这行代码的下方:

class ViewController: UIViewController {

当你看到一条蓝色的横线时,然后松开鼠标(见图3-40),接着出现一个弹出框(见图3-41)。

图3-40
图3-41

Exercise: Tip Calculator | Page 91

将Connection设置为Action,Name是calculateTapped。剩下的选项不变,然后点击Connect。

你添加到ViewController.swift中的代码会是下面这个样子:

@IBOutlet var tipLabel : UILabel!
@IBOutlet var tipRateSegmentedControl : UISegmentedControl!
@IBOutlet var billTextField : UITextField!

@IBAction func calculateTapped(sender : AnyObject) {

}

Page 92 | Chapter 3 : Diving into Swift

calculateTapped action会自动添加一个方法,每次用户点击Button时,这个方法都会被调用。把你的鼠标光标放到这个方法的两个大括号之间。

按照最佳实践原则,我们需要写注释,说明你在接下来的代码中将要完成哪些事情。这个过程,就做pseudocoding(伪代码),能够让你在写一个方法之前有一个大概的轮廓。你可以直接在Xcode中写注释,注释还可以帮助其他程序员看懂你的代码。当运行App或者编译代码时,我们是看不到注释的。

前面先写两个斜杠,后面的文字就是注释了。例如:

@IBAction func calculateTapped(sender : AnyObject) {
    //This code is run each time the Calculate Button is tapped.

}

在calculateTapped方法中添加下面的注释:

@IBAction func calculateTapped(sender : AnyObject) {
    //1. 获取账单的总金额
    //2. 确定小费费率
    //3. 计算小费金额
    //4. 将消费金额呈现给用户

}

接下来,需要确定费率:15%,20%或25%。确定下费率后,总金额乘以费率,就是小费金额,然后将消费金额呈现给用户。

现在你已经给方法大体规划了计划,那么我们需要为每一步编写代码了。

想要获得总金额,使用要使用Text Field控件变量billTextField的text属性。把鼠标光标放到第一行注释的后面,按回车。接着输入下面的代码:

var userInput = billTextField!.text

(注意,作者写这本书的时候swift2.0还没有出来,现在NSString和String合二为一了,苹果官方推荐使用String,不再推荐使用NSString了)

你可以注意到了,在你输入代码的时候,Xcode会提供一些单词来帮助你写代码,例如,从billTextField中删除“.text”,然后只输入“.”。

这种预测输入系统叫做Autocomplete(自动补全)。自动补全极大的提高了开发者的体验,自动补全弹出框会显示此变量所有可用的属性和方法。

Exercise: Tip Calculator | Page 93

在billTextField.后面在输入te两个字母,自动补全就会更新可用属性,甚至会显示text属性返回一个字符串,点击Tab键接受自动补全。

现在你已经获取了Text Field控件中的text,然而,text是一个字符串格式,不是数值,无法进行数学计算,我们需要把text的字符串类型转换为Float类型。Float是带有小数点的数字,Float类型特别适合处理货币计算。转换类型的代码如下:

var totalBill: Float = userInput.floatValue

这行代码创建了一个新的变量totalBill,然后设置类型为float。同时,把用户输入的字符串转换为浮点型然后赋值给了totalBill变量,使用的floatValue方法。第一步完成了。

接下来是确定小费费率,要检测用户选择的segments三个选项中哪一个,这样就确定了费率。Segmented Control有个属性是selectedSegmentIndex,这个属性能够告诉你用户现在选中的是哪个segment。在第二个注释后面按回车然后添加下列代码:

var index: Int = tipRateSegmentedControl.selectedSegmentIndex

这行代码创建了一个叫做index的新变量,同时把tipRateSegmentedControl选中的那个segment的值赋值给了index变量。index以零开头,index 0就是15%,index 1就是20%,index 2就是25%.

现在你已经知道了选中了哪个segment,你需要根据选中的segment得到对应的费率,这个地方适合用if条件句,在你写if条件句之前,先创建一个变量存储当前的费率:

var tipRate: Float = 0.15

这行代码创建一个浮点型变量tipRate。tipRate的默认值为0.15,tipRate会根据不同的segment转换不同的费率。在代码中写下下面的if语句:

var tipRate: Float = 0.15
if  index==0  {
     tipRate = 0.15
}

Page 94 | Chapter 3 : Diving into Swift

if条件句用if开头,接下来跟着条件。在这里,条件就是检查index的值是否是0,如果是0,那么返回true,如果不是0,返回false。如果条件为true,那么两个大括号直接的代码就会被执行,否则会跳过大括号里的代码,执行下一个条件。给if语句增加else if:

var tipRate: Float = 0.15

if index==0 {
    tipRate = 0.15
} else if index==1 {
    tipRate = 0.20
}

else if检查另外的条件,如果index是0,那么else if语句就不会执行,else if检查index的值是不是1,如果是1则为true,就会把0.20赋值给tipRate。增加if语句最后一部分:

var tipRate: Float = 0.15

if index==0 {
    tipRate = 0.15
} else if index==1 {
    tipRate = 0.20
} else {
    tipRate = 0.25
}

最后这部分,你添加了else语句,如果前两个if条件都不符合,那么就会触发else语句。在这里,index的值只有三种可能:0,1,2。else处理的是如果index为2的条件。

现在你已经有了总金额和小费费率,可以进行计算了。把你的鼠标光标放到第三行注释后面按回车,写下下列代码:

var tip: Float = totalBill * tipRate

这行代码创建了名为tip的浮点型变量,totalBill乘以tipRate后的值赋值给tip。这样,我们就完成了第三步。

把鼠标光标放到第四行注释后面按回车,然后输入下方的代码:

tipLabel.text = "$\\(tip)"

这行代码设置了tipLabel的text属性,我们用双引号来创建新的字符串,在字符串里面,先放一个美元的货币符合,然后\()这部分是起着占位符的作用,可以存放任何变量,在这里,占位符中是tip变量。

这时点击Xcode的Play按钮(或者Command+R),iOS模拟器就会启动然后运行程序,App启动后,点击Text Field,输入一个数字,然后选择一个费率,点击Calculate按钮,Label中就会出现你需要付出的小费金额。

Exercise: Tip Calculator | Page 95

如果App没有按照你想要的结果运行,或者程序有了错误或警告,不要太担心,学习的最佳方式就是试错,熟能生巧,到我们的网站上下载示例代码,对比一下代码,多试几次,直到搞定这个程序为止。

Page 96 | Chapter 3 : Diving into Swift

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容