初识 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 中设置不同的显示方式,自适应铺满、裁剪等等。

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

相关推荐
iFlyCai8 小时前
Xcode 16 pod init失败的解决方案
ios·xcode·swift
Hamm18 小时前
先别急着喷,没好用的iOS-Ollama客户端那就自己写个然后开源吧
人工智能·llm·swift
hxx2212 天前
iOS swift开发--- 加载PDF文件并显示内容
ios·pdf·swift
今天也想MK代码3 天前
基于ModelScope打造本地AI模型加速下载方案
ai·语言模型·swift·model·language model
袁代码3 天前
Swift 开发教程系列 - 第11章:内存管理和 ARC(Automatic Reference Counting)
开发语言·ios·swift·ios开发
袁代码4 天前
Swift 开发教程系列 - 第8章:协议与扩展
开发语言·ios·swift·ios开发
袁代码4 天前
Swift 开发教程系列 - 第9章:错误处理
开发语言·ios·swift·ios开发
iFlyCai4 天前
Swift中的Combine
开发语言·ios·swift·combine·swift combine
一丝晨光4 天前
Objective-C 1.0和2.0有什么区别?
java·开发语言·macos·c#·objective-c·swift·apple
新中地GIS开发老师5 天前
【GIS开发小课堂】高德地图+Three.js实现飞线、运动边界和炫酷标牌
开发语言·javascript·arcgis·前端框架·swift