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

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

相关推荐
Swift社区20 小时前
Swift 解 LeetCode 250:搞懂同值子树,用递归写出权限系统检查器
开发语言·leetcode·swift
大熊猫侯佩21 小时前
“群芳争艳”:CoreData 4 种方法计算最大值的效率比较(上)
swift·排序·sort·array·coredata·nsarray·最大值 max
东坡肘子1 天前
切勿将辅助驾驶宣传成智能驾驶 | 肘子的 Swift 周报 #078
人工智能·swiftui·swift
一牛2 天前
Metal 进阶:读取可绘制对象的像素
ios·swift·计算机图形学
Andy_shenzl3 天前
16、Swift框架微调实战(1)-自我认知数据LORA微调
lora·微调·swift
Swift社区6 天前
Swift LeetCode 246 题解:中心对称数(Strobogrammatic Number)
开发语言·leetcode·swift
Lexiaoyao206 天前
SwiftUI 字体系统详解
swiftui·swift
YungFan6 天前
Swift 6.1 新特性
swift
Invisible_He8 天前
iOS自定义collection view的page size(width/height)分页效果
ui·ios·swift·collection
无知的前端8 天前
iOS性能优化:OC和Swift实战指南
ios·性能优化·swift