编写一个跑车App吧~第四章练习Race Car

在这个练习中,你将创建race car类,App会提供一辆赛车,点击Honk(按汽车喇叭),就会展示这赛车的详细信息。App的用户界面请见图4-1。

图4-1

Exercise: Race Car | Page 105

界面上有六个Label和一个Button控件,App可以显示赛车的属性,用户可以点击Honk,点击Honk时,不会响起汽车喇叭声,而是会在开发者日志(developer log)中写下一段信息。

你已经知道了App有哪些功能,那么打开Xcode吧,点击顶部菜单栏的File -> New -> Project(见图4-2)。

图4-2 新工程New project

Page 106 | Chapter 4 : Diving Deeper

从模板中选择Single View Application(见图4-3)。

图4-3

点击Next,在Product Name一栏输入RaceCar(见图4-4)

图4-4

Exercise: Race Car | Page 107

Organization Name和Organization Identifier已经自动填写好了,如果没有填写好,输入你的姓名中间不要有空格。最后,Language选择Swift,Devices选择iPhone,点击Next。

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

图4-5

Page 108 | Chapter 4 : Diving Deeper

出现了工程的详细信息界面(见图4-6)。Project Navigator在左边,Standard Editor在中间,Inspector在右边。

图4-6

Exercise: Race Car | Page 109

点击Project Navigator中的Main.storyboard文件,出现一个空白界面(见图4-7)。

图4-7

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

图4-8

Page 110 | Chapter 4 : Diving Deeper

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

图4-9

Inspector下方有个小的工具栏按钮,Object Library图标是从左往右第三个(圆圈中有个小方块)。

打开Object Library后,在搜索输入Label(见图4-10),将三个Label控件拖入到界面中,垂直对齐放在界面的右边(见图4-11)。

图4-10
图4-11

Exercise: Race Car | Page 111

三个Label对齐后,按住鼠标左键然后拖拽,覆盖三个Label,这样三个Label就被选中了(见图4-12),接着,到顶部菜单栏中选择Edit -> Copy或者按Command+C(见图4-13)。

图4-12
图4-13

Page 112 | Chapter 4 : Diving Deeper

接着到顶部菜单栏选择Edit -> Paste或者按Command+V(见图4-14)。

图4-14

Exercise: Race Car | Page 113

这样又添加了三个Label控件,把这三个新的Label选中,然后拖到界面的右边,让Label对齐(见图4-15)。

图4-15

Page 114 | Chapter 4 : Diving Deeper

有时候复制粘贴控件比起从Object Library中拖拽控件会更方便。最后,把Object Library搜索框中的label文字删掉,输入button(见图4-16)。

图4-16

从Object Library中拖一个Button控件,放到两组Label中间(见图4-17)。

图4-17

Exercise: Race Car | Page 115

双击界面左上角的Label,替换文字为Brand,双击左边中间的Label,文字更换为Color,最后双击左边最下方的Label,文字更换为Top Speed(见图4-18)。如有需要,重新调整Label的对齐。

图4-18

Page 116 | Chapter 4 : Diving Deeper

右边Label中展示左边Label的具体值。见表格4-1。

表格4-1 Race Car
品牌 Ferrari
颜色 红色
最高时速 200 mph

双击Storyboard中的右侧的Label,然后问text修改为????(见图4-19)。然后将右侧的Label
宽度拖拽至60pts。

图4-19

Exercise: Race Car | Page 117

最后,双击Button然后输入Honk,接着拖拽Button右上角的小方块,把宽度调整到60pts(见图4-20)。

图4-20

Page 118 | Chapter 4 : Diving Deeper

现在,界面已经布局完成了,接下来需要把界面和controller连接起来。在这里,controller就是ViewController.swift文件。点击屏幕右上角的Assistant Editor按钮,打开Assistant Editor界面(见图4-21)。

图4-21

为了能够有更多空间,我们把Inspector隐藏起来(点击屏幕右上角的Inspector View按钮)。

Assistant Editor会自动打开ViewController.swift文件,可以同上Assistant Editor顶部文件路径确认,就在Automatic这个词后面。

不是所有的控件都要连接到ViewController.swift文件中,如果这个控件是静态的或者无需变化,就没有必要连接。左侧的三个Label一直不变,那么就不需要连接。

选择右侧的Label,按住Control按钮,拖到下面这行代码的下方:

class ViewController: UIViewController {

当出现一条蓝色横线时,松开鼠标(见图4-22);弹出连接对话框窗口(见图4-23)。

图4-22
图4-23

Exercise: Race Car | Page 119

connection选择Outlet,Name输入brandLabel,点击Connect。

之后会自动生成一行代码:

@IBOutlet var brandLabel : UILabel!

第一个关键词@IBOutlet是来表示这是一个oulet连接类型,var表示这是一个变量,brandLabel就是这个变量的名字,冒号后面跟着变量的类型UILabel。brandLabel变量就代表了右侧最上面的Label。

Page 120 | Chapter 4 : Diving Deeper

然后选择界面上右侧中间的Label,同时按住Control键,拖到下面这行代码的下方:

class ViewController: UIViewController {

注意不要在brandLabel的代码上松开鼠标,如果你把鼠标错误的放到了其他的Label代码上方,和出现一个蓝色盒子。一定要在出现一条蓝色横线时,松开鼠标(见图4-24);弹出连接对话框窗口(见图4-25)。

图4-24
图4-25

connection选择Outlet,Name输入colorLabel,点击Connect。

Exercise: Race Car | Page 121

之后会自动生成一行代码。

然后选择界面上右侧底部的Label,同时按住Control键,拖到下面这行代码的下方:

class ViewController: UIViewController {

当出现一条蓝色横线时,松开鼠标(见图4-26);弹出连接对话框窗口(见图4-27)。

图4-26
图4-27

connection选择Outlet,Name输入topSpeedLabel,注意使用驼峰命名法,点击Connect。

会自动生成一行代码。

Page 122 | Chapter 4 : Diving Deeper

最后把Button连接到controller中。当用户点击Button时,Button会在controller中触发一个事件,这种连接模式叫做action。

选中界面中间的Button,同时按住Control键,拖到下面这行代码的下方:

class ViewController: UIViewController {

当出现一条蓝色横线时,松开鼠标(见图4-28);弹出连接对话框窗口(见图4-29)。

图4-28
图4-29

Exercise: Race Car | Page 123

因为这次连接的控件是Button,所以connection选择Action,点击Connection右侧的下拉菜单,选择Action,然后Name输入honkTapped,点击Connect。

会自动生成一行代码,Action连接创建的是方法,Outlet连接创建的是变量。每次用户点击Button时,honkTapped方法就会被调用。看一下Xcode生成的这段代码:

@IBAction func honkTapped(sender : AnyObject) {

}

第一个关键词@IBAction是来表示这是一个action连接类型,func表示这是一个方法,honkTapped就是这个方法的名字,括号内是方法的参数,括号里是参数的名字和类型,冒号后面就是这个参数的类型AnyObject。AnyObject起一个placeholder的作用,可用表示任何类型的对象。sender参数指向触发action的控件,sender参数根据控件的不同可以有很多不同的类型,像是Button,Slider,或者Segmented Control。

现在界面上所有需要连接的控件都已经连接到controller中了,是时候来创建你的race car了。然而,苹果并没有提供一个race car的类,没关系,你可以自己创建一个race car类。

选择File -> New -> File(见图4-30)

图4-30

Page 124 | Chapter 4 : Diving Deeper

接着选择Cocoa Touch Class(见图4-31)。

图4-31

Exercise: Race Car | Page 125

在Class一栏中输入RaceCar(见图4-32),Subclass设置为NSObject,Language选择Swift,点击Next。

图4-32

Xcode接下来会让你选择存储地点,RaceCar工程已经自动选择了,如果没有,选择RaceCar文件夹,点击Create(见图4-33)。

图4-33

Page 126 | Chapter 4 : Diving Deeper

这时在Project Navigator中有了一个新文件RaceCar.swift(见图4-34)。

图4-34

Exercise: Race Car | Page 127

你的这个RaceCar类应该有三个属性和一个方法:brand,color,top speed以及honk方法,当RaceCar honk时,会在调试窗口打印出一行信息。开发者一般在调试窗口调试变量和事件。用户是无法看到developer log,这也是一个调试解决bug的好工具。

给你的RaceCar写下第一个属性:

class RaceCar: NSObject {
    var brand: String = "Ferrari"
}

增加属性看起来像是在创建变量,不过属性是可以让其他对象获取的。var用了创建属性,var后面跟着属性名称,接着冒号后面跟着属性的类型,等号后面是属性的值,字符串用双引号括起来。

接着增加第二个属性:

class RaceCar: NSObject{
    var brand: String = "Ferrari"
    var color: String = "Red"
}

color属性的格式和语法与brand属性相同。属性名字是color,默认值是Red,类型是String,用户双引号将字符串的内容括起来。

最后,增加第三个属性:

class RaceCar: NSObject {
    var brand: String = "Ferrari"
    var color: String = "Red"
    var topSpeed: Int = 200
}

topSpeed的属性多少有些不同了,类型是Int,因为最高时速是一个整型数字,所以默认值设置为200,属性是Int。

现在RaceCar类的属性已经都写完了,从RaceCar类中创建的车都会有brand,color和top speed这三个属性,默认值是"Ferrari","Red"和200。

RaceCar类还需要有一个honk行为,也就是honk方法,那么,我们把honk方法添加到RaceCar类中:

Page 128 | Chapter 4 : Diving Deeper

class RaceCar: NSObject {
    var brand: String = "Ferrari"
    var color: String = "Red"
    var topSpeed: Int = 200

    func honk() {
        print("Honk! Honk!")
    }
}

func关键词用来声明方法,honk是这个方法的名字,括号里是空的表示这个方法没有参数值。

在方法里面,用两个左右大括号包起来,只有一行代码,就是print这行代码,将"Honk! Honk!"打印到Debugger窗口中。

Debug Console或者Debugger(调试窗口),在写代码时候一般是隐藏的,当程序运行时,会出现(见图4-35)。打开Debugger的方法:屏幕右上角中间按钮,方块下方有一条横线的按钮,点击打开,再次点击隐藏。

图4-35

现在RaceCar类已经写完了,那么,现在用RaceCar这个类来创建一辆跑车吧。快捷键Command+S保存刚刚的操作。

Exercise: Race Car | Page 129

点击打开Project Navigator里的ViewController.swift文件,点击右上角Standard Editor按钮来隐藏收起Assistant Editor。

把鼠标光标放到honkTapped方法中,然后添加下面的代码:

@IBAction func honkTapped(sender: AnyObject) {
//Create Car
//Display Car 
//Honk Car
}

把鼠标光标放到//Create Car这行代码后面然后敲击回车,输入下列代码:

var myCar = RaceCar()

var用了创建变量,myCar是变量名,等号表示把等号右边的值复制给等号左边的变量。最后,用RaceCar()创建一个新的RaceCar。

RaceCar()调用RaceCar类的初始化方法,把默认值返回给这个新的RaceCar(也就是myCar)。这初始化方法是Xcode自动生成的。从一个类中创建对象,写下这个类的名字,后面跟上一对括号。在这里的这个例子中,没有参数,所以括号内是空的。

现在这个新的RaceCar赋给了myCar变量。把鼠标光标放到//Display Car后面然后敲击回车,写下下方代码:

brandLabel.text = myCar.brand

这行代码的作用是把myCar这个变量中的brand赋值给界面上brandLabel这个控件中text属性。在这里,brandLabel上显示的文字是"Ferrari",点这个符号可以获取Label的属性和方法,例如此处跟上了text这个属性。

myCar这个变量表示刚刚创建的新的RaceCar,后面的点符号可以获取RaceCar的属性和方法,例如此处获取了brand这个属性,这个属性返回一个string类型的值,和brandLabel的text属性类型对应一致。

在//Display后面敲击回车,输入下方代码:

colorLabel.text = myCar.color
topSpeedLabel.text = "\(myCar.topSpeed)"

你可能会注意到,colorLabel这行代码和上面的brandLabel代码非常相似。这行代码获取了RaceCar的color属性然后赋值给了colorLabel这个控件,默认值是"Red"。

Page 130 | Chapter 4 : Diving Deeper

topSpeed这行代码和前面两行稍微有些不同,topSpeedLabel这个控件应该显示的RaceCar的topSpeed这个属性,Label.text需要的是string类型的值,然后RaceCar的topSpeed这个属性的值是Int类型,类型不一致,需要转换,使用()即可转换。

鼠标光标放到//Honk后面,然后敲击回车,输入下方这行代码:

myCar.honk()

这行代码会触发RaceCar的honk方法(点符号可以获取对象的属性和方法),然后就会在Debugger中看到一行消息。括号里空的表示没有参数。

现在可以运行App看看效果了。点击左上角的Play按钮(或者快捷键Command+R),Xcode会启动模拟器(见图4-36)。

图4-36

Exercise: Race Car | Page 131

App启动后,点击Honk这个按钮(见图4-37)。

图4-37

RaceCar的属性都显示在对应的Label中了,点击Honk按钮后,会调用honk()方法,然后在Debugger中打印一段信息:“Honk! Honk!”

Page 132 | Chapter 4 : Diving Deeper

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

Exercise: Race Car | Page 133

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

推荐阅读更多精彩内容