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

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 上架》作者关东升

猜你喜欢

转载自juejin.im/post/7214110277121589306