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

界面區(qū)域.png

菜單欄.png

界面區(qū)域劃分

當(dāng)我們使用Xcode打開或新建一個(gè)工程后就可以看到以上界面，這就是Xcode的主界面。如圖編號(hào)所示注益，Xcode的主界面可以分為4個(gè)區(qū)域

導(dǎo)航區(qū)（Navigator）也可以叫做左邊欄。

調(diào)試區(qū)（Debug area）也可以叫做下邊欄。
實(shí)體工具區(qū)（Utilities）也可以叫做右邊欄挑秉。
編輯區(qū)（Editor）也可以叫做工作區(qū)。
菜單欄

其中左邊欄苔货、下邊欄犀概、右邊欄分別有三個(gè)按鈕控制它們的打開與收起，這個(gè)按鈕位于界面的右上角：

邊欄控制按鈕.png

1. 導(dǎo)航區(qū)

導(dǎo)航區(qū)記錄了工程文件的層次結(jié)構(gòu)

導(dǎo)航區(qū).png

我們來依次簡單介紹一下這幾個(gè)文件

AppDelegate.swift：App運(yùn)行的入口
ViewController.swift：App的控制器夜惭，在之后的很長一段學(xué)習(xí)過程中你的編碼工作主要是針對(duì)這個(gè)文件完成的姻灶，在這個(gè)文件中你將會(huì)告訴你的App應(yīng)該如何工作。
Main.storyboard：App的設(shè)計(jì)界面诈茧，絕大多數(shù)可視化的組件（像你熟悉的按鈕产喉、文本框、圖片敢会、滾動(dòng)列表）都在這個(gè)文件中進(jìn)行設(shè)置曾沈，有了這個(gè)東西你就可以幾乎不需要寫一行代碼就能定義好App的外觀。怎么樣鸥昏，很酷吧～
Asset.xcassets：App的原生圖片存儲(chǔ)在這里塞俱。
LanuchScreen.storyboard：App登陸界面外觀，在你打開一個(gè)App的時(shí)候經(jīng)常會(huì)看到一些輪播圖片或是介紹互广，那些東西就是在這里進(jìn)行設(shè)置的敛腌。
info.plist：這里存放了App相關(guān)的一些重要配置信息，很多無法通過代碼設(shè)置的信息都是在這里進(jìn)行設(shè)置的惫皱。

2.調(diào)試區(qū)

調(diào)試區(qū)記錄了程序運(yùn)行過程中的相關(guān)信息像樊。

調(diào)試區(qū).png

右側(cè)是控制臺(tái)（Console）軟件運(yùn)行時(shí)的一些輸出會(huì)在控制臺(tái)中顯示，包括print()函數(shù)的輸出也會(huì)顯示在控制臺(tái)中旅敷。
左側(cè)是變量區(qū)（Variable View）顯示了程序運(yùn)行過程中的在某一階段的各變量的值生棍。

調(diào)試過程中Xcode還提供了十分直觀的工具來顯示UI層次結(jié)構(gòu)

UI層次結(jié)構(gòu).png

調(diào)試過程中右側(cè)導(dǎo)航欄也有對(duì)應(yīng)的Debug菜單用來查看內(nèi)存、線程媳谁、網(wǎng)絡(luò)涂滴、CPU等控件的當(dāng)前使用情況友酱。

DebugMemory.png

3.實(shí)體工具區(qū)

通過操作實(shí)體工具區(qū)我們可以簡單的通過拖拽操作向故事板文件（storyboard）中拖拽控件，并且可視化的對(duì)控件的屬性進(jìn)行設(shè)置柔纵。

實(shí)體工具區(qū).png

當(dāng)導(dǎo)航欄選中文件或storyboard中的控件時(shí)缔杉，上半部分區(qū)域在用來設(shè)置相關(guān)屬性，從左到右依次為6個(gè)按鈕分別對(duì)應(yīng)一下6種菜單

實(shí)體工具區(qū)按鈕.png

文件（File）選中文件的基本信息

幫助（Help）選中文件快捷幫助文檔
特性（Identity）Class Identifier等相關(guān)信息設(shè)置
屬性（Attribute）控件外觀屬性設(shè)置
尺寸（Size）控件尺寸搁料、布局相關(guān)的設(shè)置
連接（Connection）控件與代碼鏈接的設(shè)置或详，storyboard中的可視化組件可以通過與代碼鏈接而形成一一對(duì)應(yīng)的關(guān)系。

下半部分包含了所有可視化組建郭计，可以直接向storyboard工作區(qū)中拖拽從而完成控件的添加霸琴。

實(shí)體工具區(qū)下部.png

4.編輯區(qū)

右上角有三個(gè)按鈕用來控制編輯區(qū)的顯示形式

工作區(qū)按鈕.png

從左到右依次為

默認(rèn)編輯模式（Standard editor）：顯示一個(gè)工作窗口，讓你可以專注于代碼或設(shè)計(jì)
助理編輯模式（Assistant editor）：將工作空間一分為二昭伸，讓你可以可以同時(shí)對(duì)代碼和可視化的組件進(jìn)行操作梧乘。
版本編輯模式（Version editor）：暫時(shí)還沒怎么用到過

助理編輯區(qū)

選中控件按住ctrl，通過拖拽將stroyboard中的可視化控件加入代碼庐杨，這樣就實(shí)現(xiàn)了代碼與組件的鏈接选调。

拖拽鏈接.png

編輯區(qū)右上側(cè)放置了運(yùn)行按鈕，從左到右依次是

運(yùn)行按鈕.png

運(yùn)行
停止
選擇運(yùn)行設(shè)備

5.菜單欄

菜單欄位于整個(gè)屏幕的頂部辑莫，前4個(gè)區(qū)域很多不包含的內(nèi)容都被分類集成在頂部的菜單欄當(dāng)中学歧。