想学习 iOS 开发?从 HelloWorld 页面开始

语言: CN / TW / HK

1. 前言

今年团队在拉平大前端能力,需要学习原生 App 开发,先来写一个 HelloWorld iOS 页面。

2. 创建项目

2.1 安装 Xcode

xcode 如何下载安装,可以到 AppStore 搜索 Xcode 下载或者到 Xcode 官网

建议到官网,因为 AppStore 下载会经常遇到网络阻断、一直 loading 的问题。

环境:Xcode 14.2 版本,系统:macOS Monterey

65066030-257C-425D-B2BA-923A5954D21E.png

2.2 新建 Xcode 项目

1.选择 iOS 目标与 App 应用模版

98D1CD94-47E2-4562-B623-8F7F3A442FF7.png

2.填写信息,界面 Interface 选择 Storyboard,使用语言 Objective-C。

45386964-8896-4CF9-8962-8C8D813F9262.png

3.确定后,Xcode 默认会自动打开这个项目

9725997B-0AB9-476F-9F4F-7E724B667ADC.png 通过文件夹查看,根目录下默认就是一个项目名 .xcodeproj 和一个项目名文件夹, 可以双击 HelloWorld.xcodeproj 文件,就是打开的上述界面。

DAD1EDAF-B824-4626-A837-8EE835AADC4F.png

3. 项目目录简介

3.1 .xcodeproj 文件夹

.xcodeproj 文件并不是一个文件,而是一个文件夹。在终端查看包含以下文件夹:

  • project.pbxproj 文件本质是一个 ASCII text 文件,存储着 Xcode 工程的各项配置参数。本质上是一个旧风格的 Property List 文件
  • project.xcworkspace 工作空间
  • xcuserdata 一般是跟用户相关的一些设置

以上文件可大概了解,现在不需要详细学习。

3.2 项目名文件夹

双击 HelloWorld.xcodeproj 在 Xcode 中打开文件目录如下

063D0689-1777-479F-A4B2-C510669C1067.png - Main.stroyboard 故事板文件 - LaunchScreen 应用启动故事版文件 - Assets.xcassets 资源目录,可以用来管理图片

现在只需要了解 Main.stroyboard 就可以实现在界面上显示 Helloworld 文本。

4. 添加 Label 控件

4.1 Main.stroyboard

故事板可以用来构建界面,它本质上是一个 XML 文件,可以用来描述应用中有哪些界面、界面有哪些视图元素,它们的布局、事件处理,以及界面之间是如何导航的。

在这里,我选中故事板下的 view 视图,并点击右上角的加号,在这里选中一个 Label UI,添加到页面中,此时启动应用即可看到 Jecyu 文本。

711A8E5E-1051-4879-A098-5E66FB520EBE.png

这里的 View Controller Scene 是视图控制场景,View Controller 是视图控制器,最后才是视图控制器管理的视图。

一个场景中包含一个视图控制器,视图控制器通过管理视图来显示界面,视图控制器有一个 view 属性,该属性可用于获得它所管理的视图。多个场景通过“过渡”连接,过渡定义了场景之间的导航方式。

4.2 Info.plist

这个文件的作用就是提供应用在运行期的一些配置,可以看到程序实际执行的路径,故事板使用 Main.stroyBoard ,故事板使用的场景执行文件为 SceneDelegate 。

711A8E5E-1051-4879-A098-5E66FB520EBE.png

9BE2C2FC-C232-474F-AB06-7E1897EC5C88.png

5. 启动程序,在模拟器中运行

点击左上角构建图标,点击运行

D3F7FE89-B6AE-41C0-BA09-1EA3CD37BEFC.png

6. 总结

如何快速实现一个 Hello world iOS App。

  • 新建一个 Xcode 项目,选择 iOS 目标。
  • 根目录下默认就是一个项目名 .xcodeproj 和一个项目名文件夹。
  • 项目名文件夹下选择 Main.storyboard 故事板,选择 View 属性,搜索添加 Label 控件,输入 HelloWorld
  • 启动程序,即可在模拟器中运行

下一篇,我会先简单了解 Objective-C 的类知识,再介绍剩下项目名文件夹下的 .h.m等文件的作用,然后通过代码绘制 Hello World。

参考资料

  • 《iOS 开发指南从 HelloWorld 到 App Store 上架》作者关东升