初识 Swift:创建第一个 APP ------ 相框(一)介绍了通过 Xcode 来创建一个项目,并编译运行它。今天继续,熟悉 Xcode 界面,熟悉Swift、Storyboard、Assets、Info、Project file 这几种文件类型的作用。最后通过简单代码及素材完成整个相册 APP 的功能。
Xcode 界面

主界面的上方是工具栏(Toolbar ),左侧是导航栏(Navigators ),右侧是 Inspectors(不知道咋翻译,反正后面在 Xcode 中也不会看到中文,别管了),差不多就是选中的东西的一些扩展。

通过这个小图标,可以打开和关闭相关区域。左侧对应 Toolbar,右侧对应 Inspectors。当然也可以通过菜单去操作。比如:View > Navigators > Hide Navigator。
Xcode 文件
Xcode 中不仅可以写代码,还能做页面、交互。Xcode 中很多文件类型
- Swift:基本上所有的业务逻辑代码都在这里。
- Storyboard:这个是个页面及交互编辑区域。这个编辑环境叫做:Interface Builder,可以通过拖拉拽的方式去操作,还是蛮方便的。
- Assets:放图片的地方
- Info:各种配置
- Project file:项目文件,这里都是关于这个项目的所有信息(下图所示)。

我一开始也完全不明白,什么 Interface Builder 之类的,没关系,后面慢慢就熟悉了。
添加照片
照着做就行了,主要目的还是为了熟悉 Xcode。
- 点击 Navigator area,选中 Assets。
- 从 Mac 中拖入一张图片进入编辑区。

差不多是这个样子。
编辑页面
使用 Storyboard 的 Interface Builder 来完成页面显示的编辑。
- 还是在 Navigator area,双击打开 Main.storyboard。

如图所示:
- 红色区域是 Storyboard 的文件大纲(Document Outline)。这里的 View Controller Scene 包含了很多东西,View、Image、Button 等等。可以同时在大纲和中间的预览区看到。
- 在 iPhone 15 Pro 那个区域,可以设置使用不同的设备
- 调整背景。在 Document Outline 中选中 View,可以看到上文提到的 Inspectors 的变化。

在 Inspectors 中,高亮选项叫 Attributes inspector ,可以在 Background 属性中调整背景,随意挑选。
运行下看看效果。
添加一个相框
- 点击导航栏的 + 图标,打开 Object library
- 在搜索框中输入 UIView,快速定位到 View

- 拖动它到刚刚的 View Controller 中。会出现一些辅助线,可以帮助我们调整他的位置。释放后,可以拖动边框调整大小。
- 设置这个 View 的背景色。跟刚刚的步骤一样。

运行下看看效果。
添加图片
- 刚上一个步骤类似,这次要添加的是一个 Image View library。将 Image View 拖动到 View Controller 中,这时候会发现,拖动到不同的区域,对应的区域会高亮,这高亮的区域表示:这个 Image View 将包含在那里。在大纲的层次结构中也能体现出来。
- 调整 Image View 的尺寸。
- 选中 Image View ,右侧的 Inspectors 也会变成相应的 Image View 的 Inspectors 。在 Attributes inspector 选项卡中,为 Image 属性设置为刚刚添加到 Assets 的图片。

同时,可以在 Content Mode 中设置不同的显示方式,自适应铺满、裁剪等等。
搞定了!有点小激动,哈哈。有很多不明白的地方,但还挺有意思。继续加油吧!