Swift Tutorial(swift 教程) 4:Your First App

经过前面章节的学习，现在可以制作你的第一个iPhone App了！

我们将开发一个名为“Tap Me ”的游戏。主要功能就是看你在30s内能按多少次按钮。

Getting Started

打开 Xcode 选择 Create a new Xcode project.



选择iOS > Application > Single View Application ，点击 Next.

Storyboards

工程创建后，你会发现比之前的命令行工程多出了一些文件。首先我们看下 Main.storyboard.



点击这个文件，会打开一个GUI的界面，模拟运行app的iphone屏幕。



Note: 你可能觉得奇怪为啥这个屏幕像个方形，跟iPhone屏幕的大小有区别。因为，我们在ios开发中，需要设计app以适配不同大小的屏幕尺寸---这个功能叫布局适配。

基本上，你采用“ 放在远离顶端的位置”或是“放在中间”的方式来布局你的用户接口元素，那这样你的app就能适应不同的屏幕尺寸，从iPhone5到iPhone6 plus等等都可以。

现在的app显示的是白板，为了做一个修改，需要确认Utilities Menu 打开了，如下：



选择
Attributes Inspector. 可以查看编辑 View Controller视图控制器的属性.



尝试修改背景颜色为绿色：

.


在最上面的菜单中选择 iPhone
6 Simulator ，然后运行你的app看下效果..

Adding Labels to the Screen

现在屏幕上什么都没有，我们需要添加Utilities Menu菜单的对象库Object Library中的一些对象。首先我们添加一个标签到屏幕上。标签类似于文本。在对象库Object
Library中找到label对象，将其拖到屏幕中，放到顶端的中间。





在
Attributes Inspector 中可以修改label的标题为 “Time: 30”.



这时标签的标题名称没有完全显示出来.点击该标签并选择 Editor\Size to Fit(Command =).再次运行app，就能看下下面的效果。



但是标签并没有显示在屏幕的中间，因为不是所有的ios设备都有相同的分辨率，所以我们需要给这个标签加一些限制，让它能显示在屏幕的中间。点击标签后选择屏幕最下面的对齐按钮（Align button），勾上Horizontal
Center in Container ，然后点击Add
1 Constraint.



上面确定了标签的水平位置，接下来要确定其垂直位置。点击屏幕最下方的Pin button设置，然后点击 Add
1 Constraint:



按上面的方法再创建一个记录分数的标签。其字体的大小设置为40，行数为2，高度为130.并添加相应的限制，让其保持在屏幕下方的中间位置。



设置完成后重新运行app，效果如下：

Add a Button

在Object Library 中找到button 对象，添加一个按钮到屏幕的正中间。



添加相应的限制：



在Attributes
inspector 中修改标题为 “Tap Me!” 并设置背景色为白色.



在 Pin 中修改Width 和 Height.



最后，点击屏幕下方的第三个按钮，选择Update
Frames重新适配对按钮所设置的限制



重新运行app

Linking Views to Code 链接views与代码

目前为止，已经完成了views的布局，现在需要将其与代码进行链接。

ios app的每个屏幕都是有一个叫 View
Controller.的类控制的。xcode已经创建了一个模板 – ViewController.swift.

在文件ViewController.swift:的类

ViewController

中添加两个属性：

@IBOutlet var scoreLabel: UILabel! @IBOutlet var timerLabel: UILabel!

加上

@IBOutlet

，storyboard 编辑器才能识别这两个UILable类型的属性变量。

同样的，在

ViewController

类中定义一个方法，当按下按钮时应该执行的动作：

@IBAction func buttonPressed() { NSLog("Button Pressed") }

接下来，将上面定义的属性和方法同相应的views链接起来。打开Main.storyboard,
展开文件目录。按住ctrl键的同时将 View
Controller 拖拽到time标签上。



这时会出现一个小对话框，选择

timerLabel

.
这个就是之前在 ViewController.swift 文件中创建的 UILabel
对象。



同样的方法，将 View
Controller 拖拽到score 标签上，选择

scoreLabel

.

button按钮和方法

buttonPressed()

,的链接方式正好相反。按住Ctrl的同时，点击button并将其拖拽到View
Controller 上。





重新运行app，点击button按钮几次，在屏幕的下面的终端上会看到一些信息，每点击一个button就会显示

NSLog

语句中的内容。

Manipulating Labels控制labels

button的目的并非只是在终端输出一段字符，而是每按一次button，core label的内容就加1.那么，你首先必须学会怎么操作label上的文本内容。

用下面的语句代替方法

buttonPressed()

中的内容.

scoreLabel.text = "Pressed"

此时，你运行app后按一下button，屏幕下方的文本内容就会变为“Pressed”.

Keep Track of the Score

首先，在类里创建一个用来记录分数的变量创建一个变量

count

。将下面的语句加到以

@IBOutlet

开头的两句声明语句的下面。

var count = 0

在方法

buttonPressed()

函数中，对变量进行++操作：

count++

或者用下面的代替也可以:

count = count + 1

修改

scoreLabel

的文本内容:

scoreLabel.text = "Score \n\(count)"

运行app，再测试下，你会发现按一下按钮button，score label的内容就会加1.

Working with the Timer

接下来，需要给app添加一个计时器。首先需要创建两个变量，一个是记录时间的int类型的

seconds变量，一个是递减时间的[code]NSTimer

类的变量。[/code]
将下面两条语句加到声明count变量的下面：

var seconds = 0 var timer = NSTimer()

为了使用这两个变量，还需要创建两个方法。一个是setupGame() 。将下面的代码加到类体内的最下面：

func setupGame() { seconds = 30 count = 0 timerLabel.text = "Time: \(seconds)" scoreLabel.text = "Score: \(count)" }

上面那段代码是在游戏开始的时候将变量的内容都恢复为初始值。如果不加这段代码，那当seconds递减到0，下一次游戏开始score还是会在原来的基础上继续加1，始终不会重置。

在setupGame()中加入下面的代码，开启计时器：

timer = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: Selector("subtractTime"), userInfo: nil, repeats: true)

在

viewDidLoad()

方法中调用

setupGame()

。将下面的代码加到

viewDidLoad()

函数体中：

setupGame()

另一个方法叫

subtractTime()

. 作用是递减seconds变量，更新timeLabel的文本内容
，当计时器减到0时给出一个告警。

func subtractTime() { seconds-- timerLabel.text = "Time: \(seconds)" if(seconds == 0) { } }

在上面的if语句中加入下面的代码后，当计时器递减到0时，计时器就会停止工作。

timer.invalidate()

运行app后，你会发现时间time的值在递减：

Red Alert!

添加一些告警信息，如下:



首先，创建一个告警控制器UIAlertController，在前面if语句中的

timer.invalidate()后面加入下面的代码：

let alert = UIAlertController(title: "Time is up!", message: "You scored \(count) points", preferredStyle: UIAlertControllerStyle.Alert)

然后，调整button的动作以及显示的内容。在

alert

.声明语句的下面添加下面的代码：

alert.addAction(UIAlertAction(title: "Play Again", style: UIAlertActionStyle.Default, handler: { action in self.setupGame() }))

从上面的代码中，你会发现

title

决定了button的内容，

handler

决定了button被按下后会去调用

setupGame()

方法，然后告警就消失了.

在

alert.addAction(...)

.下面加上下面的代码，执行告警控制器UIAlertController。

presentViewController(alert, animated: true, completion:nil)

运行app，并测试：