美文网首页
三. 让Hello World动起来

三. 让Hello World动起来

作者: 老曹同学 | 来源:发表于2018-08-13 16:55 被阅读0次

上一篇中的Hello World应不存在任何难度,文科生都能顺利完成。但这个App似乎过于简单了,不是么?好歹应该能跟用户互动一下,不是么?Okay,我们接着来做一个升级版本。

你肯定已经关闭了你的Xcode,现在重现运行起来,在之前选择Create a new Xcode project的启动窗口右边是最近你打开过的Xcode项目列表,这个列表中应该有你的Hello World,点击打开这个项目。

打开

当然,你也可以在macOS的Finder应用中找到你之前保存你的Hello World工程的文件夹然后双击HelloWorld.xcodeproj这个文件(其实它不是个文件,也是个文件夹,在macOS中叫做一个bundle,这个后面再详细说)。

finder

刚才说了,我们希望至少这个iOS app是能跟用户互动起来的,要做到这一点,我们接下来做三件事。这三件事以后会反复做,这是让你成为一个能写iOS App的高手的第一招,所以你要学会。

  1. 在界面上添加能引起互动的元素
  2. 写一点代码告诉系统互动的内容
  3. 连接界面元素和代码建立互动关系

当然,现在直接说要做这三件事你可能并不明白其中的含义。我们一件件来。

在界面上添加能引起互动的元素

打开工程后,跟上次添加那个文字标签(Label)很类似,先用鼠标在左边1所示选中那个Main.storyboard,然后点击2所示的那个如同铜钱一般的按钮,再在下面的列表中选中3所示的Button(这个列表其实很长,你需要滚动找到这个Button)。然后如第4步所示,选中后请直接用你的鼠标或者Trackpad拖动这个Button,放置到窗口中间那个矩形区域中。

添加一个按钮g

点击那个显示图标 ▶ 的运行按钮,你会看到模拟器启动,看到你的App又一次运行起来,屏幕上显示出Hello World,文字下面有个Button字样的按钮。这个按钮你可以用鼠标或Trackpad去点击,但没有任何反应。这不奇怪,因为你还没告诉iOS,这个按钮点了有导致什么后果😨。

写一点代码告诉系统互动的内容

在Xcode左侧选中1所示那个ViewController.swift文件,在Xcode中间区域(编辑区)的2所示位置敲入代码(恭喜你第一次真正在写iOS App代码)。如下图所示。

敲代码

我知道你可能从未写过代码,也看不懂这些天书的意思,没关系,照着抄就行。也许你视力不好看不清图片上的文字,没关系,我把文字放在下面,直接复制粘贴也行。

    @IBAction func showAlert(){
        let alert = UIAlertController(title: "警告", message: "⚠️皇上,您的按钮被点啦!", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "朕知道了", style: .default, handler: nil))
        self.present(alert, animated: true, completion: nil)
    }

看,代码多美。编程多美。

简单解释一下这些天书:

天书奇谈
连接界面元素和代码建立互动关系

在Xcode的右上角有个“双环”按钮,如下图中1所示,点击后你原来的编辑器会裂变为两个编辑区。我们一般把右边那个新出来的叫"辅助编辑器"。副主编辑器和原来那个(称为主编辑器)可以分别显示两个文件的内容。

副主编辑器

点击2位置的另一个双环图标,会出来一个选择列表,按下图所示一路选择

选择storyboard文件

再按下图所示一路选择,直至最终选择到Main.storyboard(Base)这个文件。

继续选择storyboard文件

这时你的副主编辑器会变了模样,看到那个B图标后面跟着(Button)字样的那个,选中它(不要双击,单击即可),然后按住键盘上的Control键,将它拖动到左边主编辑器(这时应该显示的是那个ViewController.swift文件的内容)的那块你刚才敲入的新代码区域。如下图所示。

建立Connection

这时候你会看到整个新敲入的那块代码会被加亮,屏幕上会显示Connect Action整个标签。Okay,如果这样,你可以松开键盘和鼠标。

好了,我们再点击 ▶ 按钮。运行结果应该是这样的:

运行

模拟器里显示Hello World,文字下面有个Button,你点击一下它试试,是不是看到这样?

运行

如果是的话,那就是你的App对你的动作有了回应了。

再回顾一下

我们做了三件事:

  1. 在界面上添加能引起互动的元素
  2. 写一点代码告诉系统互动的内容
  3. 连接界面元素和代码建立互动关系

这三件事实际上做了什么呢?看一下下面的解释。你能理解么?

运行原理解释

🎉🎉🎉

这时你可以再次把你的iPhone接上,让你的新版Hello World运行在它上面。

相关文章

  • 三. 让Hello World动起来

    上一篇中的Hello World应不存在任何难度,文科生都能顺利完成。但这个App似乎过于简单了,不是么?好歹应该...

  • 常用markdown语法

    Hello World! Hello World! Hello World! Hello World! Hello...

  • hello

    hello, world hello, world hello, world hello, world

  • Markdown

    标题: hello world hello world hello world hello world hello...

  • 2018-06-11

    markdown hello world hello world hello world hello world ...

  • day1测试

    Markdown 标题 二级标题 三级标题 字体 Hello World Hello World Hello Wo...

  • Hello World

    Hello World 1 Hello World 2## Hello World 3 Hello World 4...

  • 如何用markdown在简书上写文章?

    1 标题 Hello World! #Hello World! Hello World! ## Hello Wor...

  • ruby helloworld

    在Linux上:vim hello-world.rbputs 'Hello world' 让后执行ruby hel...

  • Markdown 学习

    二级标题 三级标题 四级标题 字体 Hello, World! Hello, World! Hello, Worl...

网友评论

      本文标题:三. 让Hello World动起来

      本文链接:https://www.haomeiwen.com/subject/sxmubftx.html