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

前端之家收集整理的这篇文章主要介绍了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修改WidthHeight.

最后,点击屏幕下方的第三个按钮,选择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!

加上@IBOutlet,storyboard 编辑器才能识别这两个UILable类型的属性变量。

同样的,在ViewController类中定义一个方法,当按下按钮时应该执行的动作:

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

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


这时会出现一个小对话框,选择timerLabel. 这个就是之前在ViewController.swift文件中创建的UILabel 对象。


同样的方法,将拖拽到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++

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

= + 1

修改scoreLabel的文本内容:

scoreLabel.text "score \n\(count)"

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

Working with the Timer

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

seconds变量,一个是递减时间的类的变量。NSTimer
将下面两条语句加到声明count变量的下面:
var seconds 0
var timer = NSTimer)

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

func setupGame{
  seconds 30
  0

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

setupGame()中加入下面的代码,开启计时器:

timer NSTimer.scheduledTimerWithTimeInterval(1.0,target: self,selector: Selector"subtractTime"),userInfonil,repeatstrueviewDidLoad()方法调用setupGame()。将下面的代码加到函数体中:

setupGame 另一个方法subtractTime(). 作用是递减seconds变量,更新timeLabel的文本内容 ,当计时器减到0时给出一个告警。

func subtractTime) {
  seconds--
  timerLabel.text \(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"Play Again",style: UIAlertActionStyle.Default,handler: {
  action in self.setupGame}) 从上面的代码中,你会发现title决定了button的内容handler决定了button被按下后会去调用setupGame()方法,然后告警就消失了.

alert.addAction(...).下面加上下面的代码,执行告警控制器UIAlertController

presentViewController(alert,animatedtrue,completion:nil 运行app,并测试:

猜你在找的Swift相关文章