上一篇中的Hello World
应不存在任何难度,文科生都能顺利完成。但这个App似乎过于简单了,不是么?好歹应该能跟用户互动一下,不是么?Okay,我们接着来做一个升级版本。
你肯定已经关闭了你的Xcode,现在重现运行起来,在之前选择Create a new Xcode project
的启动窗口右边是最近你打开过的Xcode项目列表,这个列表中应该有你的Hello World
,点击打开这个项目。
当然,你也可以在macOS的Finder应用中找到你之前保存你的Hello World
工程的文件夹然后双击HelloWorld.xcodeproj
这个文件(其实它不是个文件,也是个文件夹,在macOS中叫做一个bundle,这个后面再详细说)。
刚才说了,我们希望至少这个iOS app是能跟用户互动起来的,要做到这一点,我们接下来做三件事。这三件事以后会反复做,这是让你成为一个能写iOS App的高手的第一招,所以你要学会。
- 在界面上添加能引起互动的元素
- 写一点代码告诉系统互动的内容
- 连接界面元素和代码建立互动关系
当然,现在直接说要做这三件事你可能并不明白其中的含义。我们一件件来。
在界面上添加能引起互动的元素
打开工程后,跟上次添加那个文字标签(Label
)很类似,先用鼠标在左边1
所示选中那个Main.storyboard
,然后点击2
所示的那个如同铜钱一般的按钮,再在下面的列表中选中3
所示的Button
(这个列表其实很长,你需要滚动找到这个Button
)。然后如第4步所示,选中后请直接用你的鼠标或者Trackpad拖动这个Button
,放置到窗口中间那个矩形区域中。
点击那个显示图标 ▶ 的运行按钮,你会看到模拟器启动,看到你的App又一次运行起来,屏幕上显示出Hello World
,文字下面有个Button
字样的按钮。这个按钮你可以用鼠标或Trackpad去点击,但没有任何反应。这不奇怪,因为你还没告诉iOS,这个按钮点了有导致什么后果😨。
写一点代码告诉系统互动的内容
在Xcode左侧选中1
所示那个ViewController.swift
文件,在Xcode中间区域(编辑区)的2
所示位置敲入代码(恭喜你第一次真正在写iOS App代码)。如下图所示。
我知道你可能从未写过代码,也看不懂这些天书的意思,没关系,照着抄就行。也许你视力不好看不清图片上的文字,没关系,我把文字放在下面,直接复制粘贴也行。
1 | func showAlert(){ |
看,代码多美。编程多美。
简单解释一下这些天书:
连接界面元素和代码建立互动关系
在Xcode的右上角有个“双环”按钮,如下图中1
所示,点击后你原来的编辑器会裂变为两个编辑区。我们一般把右边那个新出来的叫”辅助编辑器”。副主编辑器和原来那个(称为主编辑器)可以分别显示两个文件的内容。
点击2
位置的另一个双环图标,会出来一个选择列表,按下图所示一路选择
再按下图所示一路选择,直至最终选择到Main.storyboard(Base)
这个文件。
这时你的副主编辑器会变了模样,看到那个B
图标后面跟着(Button
)字样的那个,选中它(不要双击,单击即可),然后按住键盘上的Control
键,将它拖动到左边主编辑器(这时应该显示的是那个ViewController.swift
文件的内容)的那块你刚才敲入的新代码区域。如下图所示。
这时候你会看到整个新敲入的那块代码会被加亮,屏幕上会显示Connect Action
整个标签。Okay,如果这样,你可以松开键盘和鼠标。
好了,我们再点击 ▶ 按钮。运行结果应该是这样的:
模拟器里显示Hello World
,文字下面有个Button
,你点击一下它试试,是不是看到这样?
如果是的话,那就是你的App对你的动作有了回应了。
再回顾一下
我们做了三件事:
- 在界面上添加能引起互动的元素
- 写一点代码告诉系统互动的内容
- 连接界面元素和代码建立互动关系
这三件事实际上做了什么呢?看一下下面的解释。你能理解么?
🎉🎉🎉
这时你可以再次把你的iPhone接上,让你的新版Hello World运行在它上面。