Hello World!第一个Swift APP

2017-10-25 19:41:04
admin
571
最后编辑:admin 于 2017-10-25 20:22:39
预览.png

"Hello,World"已经成为编程世界里开始的惯例。

开始:先动起来,忘记代码

  1. 打开Xcode,选择"Create a new Xcode project"
Xcode - Welcome Dialog.png
  1. 选择 iOS > Single View Application and click Next
Xcode Project Template Selection.png
  1. 填写项目的一些选项:
Options for your new project.png
  • Product Name: HelloWorld - app的名字
  • Team - Apple ID
  • Organization Name: andyron - 这一般是组织的名字,或个人用户的名字;尽量保持不与别人重复
  • Organization Identifier: cn.andyron
  • Bundle Identifier: com.andyron.HelloWorld - 根据Organization IdentifierProduct Name自动组合而成
  • Language: Swift
  • Devices: iPhone
  • Use Core Data: [unchecked]
  • Include Unit Tests: [unchecked]
  • Include UI Tests: [unchecked]
    1. 选择一个项目保持位置,然后生成项目

熟悉Xcode界面

Xcode Help中详细介绍了Xcode,主界面如下:

Xcode主界面

主要分六个区域:

  1. Toolbar(工具栏)
  1. Tab bar(便签页栏):类似浏览器的标签页,快捷键也和大部分软件的相同(⌘+T新建,⌘+W关闭),单个标签页时是隐藏的
  2. Navigator area(导航区域) 这个区域最上面有八个图标(快捷键分别对应⌘+1 ~ ⌘+8):
    • project navigator(源代码文件、图片文件、数据模型、属性列表等)
    • symbol navigator(编译器能识别的:OC类、枚举类型、结构体、全局变量)
    • find navigator
    • issues navigator
    • test navigator
    • debug navigator
    • breakpoint navigator
    • log navigator
  3. Editor area(编辑区) 这个区域最上面是jump bar(跳转栏)
  4. Debug area
  5. Utilities area(实用工具面板)
    分上下两块:
    • Inspector pane(检查器):选择不同文件会有不同个数的检查器,最多六个(快捷键分别对应⌘+option+1 ~ ⌘+option+6)。
    • Library pane(库面版, 快捷键分别对应⌘+option+control+1 ~ ⌘+option+control+4)
      • 文件库模板(File Template Library) : 管理文件模板, 可以快速创建指定类型文件, 可以直接拖入项目中;
      • 代码片段库(Code Snippet Library) : 管理各种代码片段, 可以直接拖入源代码中;
      • 对象库(Object Library) : 界面组件, 可以直接拖入 故事板中;
      • 媒体库(Media Library) : 管理各种 图片, 音频 等多媒体资源;

第一次运行App

Run和Stop分别对应 ⌘+R⌘+.,Simulator用于选择模拟器或真实设备

Run and Stop Buttons

快速了解Interface Builder(IB)

project navigator中选择main.storyboard

The Interface Builder Editor.png

The Interface Builder editor为创造和设计app的UI提高了一个可视化的方法。在这里既可以设计单个页面,也可以设计多个页面。可以直接从右下角Object library拖动可用对象到IB中。 当开始新建项目,选择了Single View Application模板时,Xcode默认在storyboard中生成一个view controller scene,对应一个view controller通常app的每一个screen代表一个view controller。 The Document Outline view在选择storyboard特定对象时特别有用。

设计UI

  • 拖动一个Button到IB中
    Drag the Button to the View.png
  • 双击Button或在属性检查器中修改name为"Hello World**
  • 根据蓝色虚线辅助线可以把Button拖到中心位置

写代码

  • 选择main.storyboard,点击工具栏右侧的Assistant editor(option+⌘+return),编辑区出现两部分,Ctrl拖动按钮到右侧ViewController类中:

然后写下如下代码:

@IBAction func showMessage() {
    let alertController = UIAlertController(title: "Welcome to My First App",
message: "Hello World", preferredStyle: UIAlertControllerStyle.alert)
    alertController.addAction(UIAlertAction(title: "OK", style:
UIAlertActionStyle.default, handler: nil))
    present(alertController, animated: true, completion: nil)
}

上面的方法是先连接关系,然后写代码;也可以先写好代码,然后建立关系:



@IBAction表示一个Action的标识符,没有特殊意义,当建立好关系后,@IBAction右侧会出现一个实心的点,点击会出现会出现以个弹框表示连接的地方:


  • 修改按钮的颜色。选中按钮,在属性检查器中修改对应属性

测试应用

选择特定的模拟器或设备,⌘+R

Hello world 应用中事件流


Event flow.png

更近一步

  • 同上的方法添加几个按钮,并修改button的name为一些emoji表情(control+⌘+space
  • 添加@IBAction方法代码
  • 通过先写好代码然后建立关系的方法,把几个button都与同一个@IBAction方法建立关系



  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227