1. 前言
今年团队在拉平大前端能力,需要学习原生 App 开发,先来写一个 HelloWorld iOS 页面。
2. 创建项目
2.1 安装 Xcode
xcode 如何下载安装,可以到 AppStore 搜索 Xcode 下载或者到 Xcode 官网
建议到官网,因为 AppStore 下载会经常遇到网络阻断、一直 loading 的问题。
环境:Xcode 14.2 版本,系统:macOS Monterey
2.2 新建 Xcode 项目
1.选择 iOS 目标与 App 应用模版
2.填写信息,界面 Interface 选择 Storyboard,使用语言 Objective-C。
3.确定后,Xcode 默认会自动打开这个项目
通过文件夹查看,根目录下默认就是一个项目名 .xcodeproj 和一个项目名文件夹, 可以双击 HelloWorld.xcodeproj 文件,就是打开的上述界面。
3. 项目目录简介
3.1 .xcodeproj 文件夹
.xcodeproj 文件并不是一个文件,而是一个文件夹。在终端查看包含以下文件夹:
- project.pbxproj 文件本质是一个 ASCII text 文件,存储着 Xcode 工程的各项配置参数。本质上是一个旧风格的 Property List 文件
- project.xcworkspace 工作空间
- xcuserdata 一般是跟用户相关的一些设置
以上文件可大概了解,现在不需要详细学习。
3.2 项目名文件夹
双击 HelloWorld.xcodeproj
在 Xcode 中打开文件目录如下
- Main.stroyboard 故事板文件
- LaunchScreen 应用启动故事版文件
- Assets.xcassets 资源目录,可以用来管理图片
现在只需要了解 Main.stroyboard 就可以实现在界面上显示 Helloworld 文本。
4. 添加 Label 控件
4.1 Main.stroyboard
故事板可以用来构建界面,它本质上是一个 XML 文件,可以用来描述应用中有哪些界面、界面有哪些视图元素,它们的布局、事件处理,以及界面之间是如何导航的。
在这里,我选中故事板下的 view 视图,并点击右上角的加号,在这里选中一个 Label UI,添加到页面中,此时启动应用即可看到 Jecyu 文本。
这里的 View Controller Scene 是视图控制场景,View Controller 是视图控制器,最后才是视图控制器管理的视图。
一个场景中包含一个视图控制器,视图控制器通过管理视图来显示界面,视图控制器有一个 view 属性,该属性可用于获得它所管理的视图。多个场景通过“过渡”连接,过渡定义了场景之间的导航方式。
4.2 Info.plist
这个文件的作用就是提供应用在运行期的一些配置,可以看到程序实际执行的路径,故事板使用 Main.stroyBoard ,故事板使用的场景执行文件为 SceneDelegate 。
5. 启动程序,在模拟器中运行
点击左上角构建图标,点击运行
6. 总结
如何快速实现一个 Hello world iOS App。
- 新建一个 Xcode 项目,选择 iOS 目标。
- 根目录下默认就是一个项目名 .xcodeproj 和一个项目名文件夹。
- 项目名文件夹下选择 Main.storyboard 故事板,选择 View 属性,搜索添加 Label 控件,输入 HelloWorld
- 启动程序,即可在模拟器中运行
下一篇,我会先简单了解 Objective-C 的类知识,再介绍剩下项目名文件夹下的 .h 和 .m等文件的作用,然后通过代码绘制 Hello World。
参考资料
- 《iOS 开发指南从 HelloWorld 到 App Store 上架》作者关东升