初识 Swift:创建第一个 APP —— 相框(二)

初识 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。

  1. 点击 Navigator area,选中 Assets。
  2. 从 Mac 中拖入一张图片进入编辑区。

差不多是这个样子。

编辑页面

使用 Storyboard 的 Interface Builder 来完成页面显示的编辑。

  1. 还是在 Navigator area,双击打开 Main.storyboard

如图所示:

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

Inspectors 中,高亮选项叫 Attributes inspector ,可以在 Background 属性中调整背景,随意挑选。

运行下看看效果。

添加一个相框

  1. 点击导航栏的 + 图标,打开 Object library
  2. 在搜索框中输入 UIView,快速定位到 View
  1. 拖动它到刚刚的 View Controller 中。会出现一些辅助线,可以帮助我们调整他的位置。释放后,可以拖动边框调整大小。
  2. 设置这个 View 的背景色。跟刚刚的步骤一样。

运行下看看效果。

添加图片

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

同时,可以在 Content Mode 中设置不同的显示方式,自适应铺满、裁剪等等。

搞定了!有点小激动,哈哈。有很多不明白的地方,但还挺有意思。继续加油吧!

相关推荐
人月神话-Lee16 小时前
WWDC26 深度解析:如何在 iOS 27 中打造“秒开”的相机体验
ios·swift·相机·wwdc·用户体验
Tr2e1 天前
🐱 从 0 到 1:用 Swift 手搓一个 macOS 桌面宠物(附源码)
macos·ios·swift
人月神话-Lee2 天前
【WWDC】Core AI:iOS 端侧大模型新纪元
人工智能·ios·ai·swift·wwdc·core ai
2501_916007472 天前
iOS 开发工具选择指南 从编辑器、编译器到自动化构建
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
Fatbobman(东坡肘子)2 天前
WWDC 2026 初印象:符合预期,但更务实 -- 肘子的 Swift 周报 #139
人工智能·macos·ios·swiftui·swift·wwdc
大熊猫侯佩2 天前
WWDC26 全网首发:SwiftUI 8 “可重排序“操作符深度解析
ios·swiftui·swift
人月神话-Lee3 天前
【图像处理】颜色空间——RGB之外的世界
图像处理·人工智能·ios·ai编程·swift·rgb·颜色空间
东坡肘子3 天前
WWDC 2026 初印象:符合预期,但更务实 -- 肘子的 Swift 周报 #139
人工智能·swiftui·swift
大熊猫侯佩3 天前
WWDC26 前瞻:苹果可能放出的“王炸”,不只是 Siri
xcode·swift·wwdc