界面区域.png 菜单栏.png

界面区域划分

---

当我们使用Xcode打开或新建一个工程后就可以看到以上界面，这就是Xcode的主界面。如图编号所示，Xcode的主界面可以分为4个区域

1. 导航区（Navigator）也可以叫做左边栏。

• 调试区（Debug area）也可以叫做下边栏。
• 实体工具区（Utilities）也可以叫做右边栏。
• 编辑区（Editor）也可以叫做工作区。
• 菜单栏

其中左边栏、下边栏、右边栏分别有三个按钮控制它们的打开与收起，这个按钮位于界面的右上角：

边栏控制按钮.png

1. 导航区

---

导航区记录了工程文件的层次结构

导航区.png

我们来依次简单介绍一下这几个文件

• AppDelegate.swift：App运行的入口
• ViewController.swift：App的控制器，在之后的很长一段学习过程中你的编码工作主要是针对这个文件完成的，在这个文件中你将会告诉你的App应该如何工作。
• Main.storyboard：App的设计界面，绝大多数可视化的组件（像你熟悉的按钮、文本框、图片、滚动列表）都在这个文件中进行设置，有了这个东西你就可以几乎不需要写一行代码就能定义好App的外观。怎么样，很酷吧～
• Asset.xcassets：App的原生图片存储在这里。
• LanuchScreen.storyboard：App登陆界面外观，在你打开一个App的时候经常会看到一些轮播图片或是介绍，那些东西就是在这里进行设置的。
• info.plist：这里存放了App相关的一些重要配置信息，很多无法通过代码设置的信息都是在这里进行设置的。

2.调试区

---

调试区记录了程序运行过程中的相关信息。

调试区.png

• 右侧是控制台（Console）软件运行时的一些输出会在控制台中显示，包括print()函数的输出也会显示在控制台中。
• 左侧是变量区（Variable View）显示了程序运行过程中的在某一阶段的各变量的值。

调试过程中Xcode还提供了十分直观的工具来显示UI层次结构

UI层次结构.png

调试过程中右侧导航栏也有对应的Debug菜单用来查看内存、线程、网络、CPU等控件的当前使用情况。

DebugMemory.png

3.实体工具区

---

通过操作实体工具区我们可以简单的通过拖拽操作向故事板文件（storyboard）中拖拽控件，并且可视化的对控件的属性进行设置。

实体工具区.png

当导航栏选中文件或storyboard中的控件时，上半部分区域在用来设置相关属性，从左到右依次为6个按钮分别对应一下6种菜单

实体工具区按钮.png

• 文件（File）选中文件的基本信息

• 帮助（Help）选中文件快捷帮助文档
• 特性（Identity）Class Identifier等相关信息设置
• 属性（Attribute）控件外观属性设置
• 尺寸（Size）控件尺寸、布局相关的设置
• 连接（Connection）控件与代码链接的设置，storyboard中的可视化组件可以通过与代码链接而形成一一对应的关系。

下半部分包含了所有可视化组建，可以直接向storyboard工作区中拖拽从而完成控件的添加。

实体工具区下部.png

4.编辑区

---

右上角有三个按钮用来控制编辑区的显示形式

工作区按钮.png

从左到右依次为

• 默认编辑模式（Standard editor）：显示一个工作窗口，让你可以专注于代码或设计
• 助理编辑模式（Assistant editor）：将工作空间一分为二，让你可以可以同时对代码和可视化的组件进行操作。
• 版本编辑模式（Version editor）：暂时还没怎么用到过

助理编辑区

选中控件按住ctrl，通过拖拽将stroyboard中的可视化控件加入代码，这样就实现了代码与组件的链接。

拖拽链接.png

编辑区右上侧放置了运行按钮，从左到右依次是

运行按钮.png

• 运行
• 停止
• 选择运行设备

5.菜单栏

---

菜单栏位于整个屏幕的顶部，前4个区域很多不包含的内容都被分类集成在顶部的菜单栏当中。

菜单栏.png