零基础学习Swift的第一步开始了。
给自己定的计划是每天学习一点新知识。
原来准备学习的 10个最佳的 Swift 教程实例 感觉比较坑,我决定从《让不懂编程的人爱上iPhone开发》学起。
这本教程第一篇简述了一下Swift的来历以及与其他语言的关系之类的介绍。第二篇开始就是正式实例了。
我个人比较喜欢这种从最终效果来反向整理自己需要的做的事情的方式。
在做任何事情之前,我们首先需要了解的是需要什么,具体如何去实现反而不是那么重要。
这和昨天看的架构方面的文章里面说的道理是一样的,先要了解问题是什么。
做一个产品之前,首先把需要实现的功能详细列出来。做成一个to-du list,有了这个清单,才能把一个产品的设计和功能分解为很多的小模块,从而在具体实现的时候降低了复杂度 。
Bulleyes教程的知识点记录
在Xcode新建项目
首先在欢迎页面 Create a new Xcode project
Step1
选择iOS模版,在Application下面选择Single View App。
选择Single View App是因为这个实例只需要用到这个,其他的模版会把事情搞复杂。
Step2
next以后,会来到新的界面,需要输入和选择一些新的信息。
language一定要选Swift!
- Product Name:这里是项目名称,尽量避免使用空格或者特殊符号。
- Team:如果加入了Apple的开发者计划,这里会显示团队名称。
- Organization Name:团队名称或者自己的名字。
- Organization Identifier:这里是conm.icode,用来识别自己的App,通常是反转域名,只要符合com.xxx.xxx这种明明习惯就行。
- Language:选Swift。
- Use Core Data:先不勾选,Core Data是iOS的一个类库,暂时不涉及。
- Include Unit Tests:不勾选,目前不涉及到单元测试。
- Include UI Tests:不勾选,不涉及到UI测试。
Step3
Next,选择位置保存项目。
在底部有一个提示框询问“Create Git repository on My Mac”。这是用来进行Git版本控制的。可以帮助开发者更好地管理项目源代码。
Step4
点击Create完成创建。
点击Create,Xcode会基于Single View App这个模板创建一个新项目。
在Xcode内完成一个只有一个按钮的应用
Step1 作出list
需要完成的事情:
- 在屏幕上添加一个按钮
- 触碰按钮的时候弹出一个提示信息
Step2 添加按钮
Xcode左侧是所谓的导航区域(Navigator area)。
顶部的小图标决定了那个导航器是可见的。
这里主要是用“项目导航”(Project Navigator)。
在项目导航中找到“Main.storyboard”这个文件,点击选中。
中间的界面就切换到Interface Builder了。
step3 在Object Library中找到按钮控件
在Xcode右侧面板下方可以找到Object Library(对象库)
直接输入“Button”来搜索并找到。
Step4 点击Button,拖曳到屏幕中央
这样就直接添加了新的按钮。
关于可视化编程
可视化编程是随着 向对象编程概念的兴起 变得普及的。
随着面向对象语言的兴起,以及开发工具的进步,各平台的代码编辑器都开始变得智能起来,可以第一时间发现代码的低级语法错误和拼写错误,大大提高了程序猿的效率,也解救了大量的的经常丢三落四宅男的时间。但仅仅对代码级别的敏感还不足够,人们逐渐发现很多的标准控件是没有必要每次都重复去编写的,特别是那些基本的按钮,视图,和用户交互元素都可以直接重用。也因此现在基本上所有的大型编程工具都提供 简单易用的可视化编程环境。
对于非程序员出身的产品和设计人员来说,可视化编程也是非常有利的原型工具。
Step5 双击按钮,编辑内容为“喵”
完成之后,在模拟器中运行,可以看到屏幕中间出现了一个按钮,但是这时候点击它是没有任何反应的。
注意一点,Xcode是会自己自动保存的,但是考虑到不可控因素,最好还是养成随时 Command+S。
要实现交互,就需要在点击按钮的时候让程序作出相应的反应。
所以先来实现一个弹出式对话框。
Step6 视图控制器(View controller)
在Xcode左侧的项目导航(Project Navigator)找到 ViewControlle.swift,点击它。
这时候刚才的界面编辑器(Interface Builder)就切换到了代码编辑界面。
在最后一个 } 前添加以下代码:
@IBAction func showAlert(){
}
这段代码的意思是:
通知Interface Builder(界面编辑器)当前的视图控制器有一个’showAlert’动作,突发这个动作将会显示一个弹出警告框。
这时候ViewController.swift的完整代码是这样的:
//
// ViewController.swift
// BullsEye
//
// Created by ARay on 2018/3/9.
// Copyright © 2018年 ARay. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
@IBAction func showAlert(){
}
}
什么是view controller(视图控制器)
之前打开过Main.storyboard 文件,然后在Xcode内置的Interface Builder里面拖曳 的 式添加了一些控件。
这就算是用户界面了。
然后还在ViewController.swift里面加入了一行代码。
这两个文件,Main.storyboard和ViewController.swift共同组成了一个view controller(视图控制器)的设计和实现。
视图控制器,就是控制一个视图的工具,或者说是管理一个单一界面的工具。
iOS应用开发的一个原则就是,应用中所有的界面都必须要有自己的视图控制器。
简单来说,Main.storyboard文件包含了视图控制器中的界面设计,而ViewController.swift文件则包含了视图控制器的功能,就是让界面工作的逻辑,使用Swift语言来编写。
Step7 创建关联
先前添加到ViewController.swift文件里面的代码
@IBAction func showAlert(){
}
通知了Interface Builder,当前的视图控制器有一个’showAlert’动作,触发该动作会弹出警告框。
现在要把按钮和动作联系在一起。
点击Main.storyboard回到Interface Builder。
点击刚才的按钮‘喵’
按住Ctrl键,从按钮到View Controller上拖出一条线。松开后,在弹出的菜单中选择’showAlert’。
在这个弹出的菜单中包含了两个部分,一个是’Action Segue’,另一个是’Sent Events’
选择以后,Interface Builder将会在界面的按钮和代码
@IbAction func showAlert()
之间创建关联。
这时候只要触碰这个按钮,就会执行showAlert动作。
这就是如何让按钮和其他的控件真正产生交互的方式:
在Interface Builder中通过拖曳和某个控件创建一个关联。
现在可以查看这个关联了,选中按钮,在Xcode右侧Utilities面板的Connections Inspector选项卡下面可以看到:
在Sent Events部分,Touch UP Inside事件和showAlert动作已经关联起来了。
同样,在ViewController.swift里面一样卡一查看这种关联。
在
@IBAction func showAlert(){}
这行代码的左边有一个实心圆。
点击这个实心圆就可以看到代码所关联的动作。
现在已经创建了一个带按钮的界面,并且已经把这个按钮和showAlert这个动作关联起来了。
但是还没有告诉应用,这个动作的具体内容是什么。
接下来是要让按钮知道自己该做什么。
回到ViewController.swift。
在
@IBAction func showAlert(){}
的{}之间添加代码
@IBaction func showAlert(){
let alert = UIAlertController(title:"喵喵喵",
message:"我叫CaCa",
preferredStyle: .alert)
let action = UIAlertAction(title:"喵~~",style: .default,handler:nil)
alert.addAction(action)
present(alert,animated: true, completion: nil)
}
在{}的代码里面,创建了一个提示对话框。
标题(title)是“喵喵喵”
消息体(message)是“我叫CaCa”
然后是一个按钮,内容是“喵~~”
标题和消息体都会显示文本,区别在于标题的字体会大些,并且是粗体显示。
现在可以在模拟器中运行了。
如果一切正确的话,就会出现按钮,并且在点击的时候出现一个警告框。
如果没能成功,反而看到红色的Build Failed提示的话……
- 首先确保没有敲错代码。
- 检查代码的大小写有没有错误。(Swift编程语言对大小写很敏感)
- Xcode告诉你“Parse Lssue”或者是“Expected
”的时候,很可能是忘了在每行代码的最后加上}或者)。
关于错误和提示
Xcode使 红色来标示error(错误),用黄色来标示warning(警告)。错误是致命的,如果出现编译错误,那么应该是无法运行的。警告则是提供了参考信息。Xcode的意思是:“你或许不想这么做,不过如果你实在想要这么做,那就做吧,只是后果自负。”
对待warning的态度应该和error一样严肃。尽量做到让自己的应用实现0 warning,0 error。
即使不能,也要做好备注,提醒自己或别人。warning所在的地方以及可能导致的后果。