小而美的Swift&iOS教程-Xcode界面简介

界面区域.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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容