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

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

相关推荐
m0_748238928 小时前
webgis入门实战案例——智慧校园
开发语言·ios·swift
Swift社区1 天前
Excel 列名称转换问题 Swift 解答
开发语言·excel·swift
东坡肘子2 天前
肘子的 Swift 周报 #063|异种肾脏移植取得突破
swiftui·swift·apple
威化饼的一隅3 天前
【多模态】swift-3框架使用
人工智能·深度学习·大模型·swift·多模态
opentogether5 天前
Swift 的动态性
开发语言·ssh·swift
苍墨穹天5 天前
SWIFT基本使用
linux·swift
SchneeDuan6 天前
从源码分析swift GCD_DispatchGroup
ios·swift·源码分析·gcd
请叫我飞哥@8 天前
iOS在项目中设置 Dev、Staging 和 Prod 三个不同的环境
ios·xcode·swift
Cedric_Anik10 天前
iOS渲染概述
ui·ios·swift
hxx22110 天前
iOS swift开发系列--如何给swiftui内容视图添加背景图片显示
ios·swiftui·swift