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

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

相关推荐
席子哥哥的代码库18 小时前
自制简单的图片查看器(python)
开发语言·python·swift
打工人你好1 天前
Swift 的 KeyPath 是什么?
swift
struggle20252 天前
Ollmao (OH-luh-毛程序包及源码) 是一款原生 SwiftUI 应用程序,它与 Ollama 集成,可在 Mac 上本地运行强大的 AI 模型
ios·swiftui·swift
神仙别闹4 天前
基于Swift实现拼图游戏
开发语言·搜索引擎·swift
神仙别闹5 天前
基于Swift实现仿IOS闹钟
ios·cocoa·swift
ctf_02269 天前
echarts 3d中国地图飞行线
3d·echarts·swift
没头脑的ht9 天前
UITableView的复用原理
ios·swift
自不量力的A同学12 天前
苹果公司宣布正式开源 Xcode 引擎 Swift Build145
swift
SchneeDuan12 天前
iOS--SDWebImage源码解析
ios·缓存·swift·第三方库·sdwebimage
leluckys13 天前
swift 专题三 swift 规范一
开发语言·ios·swift