界面區(qū)域.png
菜單欄.png
界面區(qū)域劃分
當(dāng)我們使用Xcode打開或新建一個工程后就可以看到以上界面，這就是Xcode的主界面。如圖編號所示，Xcode的主界面可以分為4個區(qū)域
- 導(dǎo)航區(qū)（Navigator）也可以叫做左邊欄。
- 調(diào)試區(qū)（Debug area）也可以叫做下邊欄。
- 實體工具區(qū)（Utilities）也可以叫做右邊欄。
- 編輯區(qū)（Editor）也可以叫做工作區(qū)。
- 菜單欄
其中左邊欄、下邊欄、右邊欄分別有三個按鈕控制它們的打開與收起，這個按鈕位于界面的右上角：
邊欄控制按鈕.png
1. 導(dǎo)航區(qū)
導(dǎo)航區(qū)記錄了工程文件的層次結(jié)構(gòu)
導(dǎo)航區(qū).png
我們來依次簡單介紹一下這幾個文件
- AppDelegate.swift：App運(yùn)行的入口
- ViewController.swift：App的控制器，在之后的很長一段學(xué)習(xí)過程中你的編碼工作主要是針對這個文件完成的，在這個文件中你將會告訴你的App應(yīng)該如何工作。
- Main.storyboard：App的設(shè)計界面，絕大多數(shù)可視化的組件（像你熟悉的按鈕、文本框、圖片、滾動列表）都在這個文件中進(jìn)行設(shè)置，有了這個東西你就可以幾乎不需要寫一行代碼就能定義好App的外觀。怎么樣，很酷吧～
- Asset.xcassets：App的原生圖片存儲在這里。
- LanuchScreen.storyboard：App登陸界面外觀，在你打開一個App的時候經(jīng)常會看到一些輪播圖片或是介紹，那些東西就是在這里進(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è)是控制臺（Console）軟件運(yùn)行時的一些輸出會在控制臺中顯示，包括print()函數(shù)的輸出也會顯示在控制臺中。
- 左側(cè)是變量區(qū)（Variable View）顯示了程序運(yùn)行過程中的在某一階段的各變量的值。
調(diào)試過程中Xcode還提供了十分直觀的工具來顯示UI層次結(jié)構(gòu)
UI層次結(jié)構(gòu).png
調(diào)試過程中右側(cè)導(dǎo)航欄也有對應(yīng)的Debug菜單用來查看內(nèi)存、線程、網(wǎng)絡(luò)、CPU等控件的當(dāng)前使用情況。
DebugMemory.png
3.實體工具區(qū)
通過操作實體工具區(qū)我們可以簡單的通過拖拽操作向故事板文件（storyboard）中拖拽控件，并且可視化的對控件的屬性進(jìn)行設(shè)置。
實體工具區(qū).png
當(dāng)導(dǎo)航欄選中文件或storyboard中的控件時，上半部分區(qū)域在用來設(shè)置相關(guān)屬性，從左到右依次為6個按鈕分別對應(yīng)一下6種菜單
實體工具區(qū)按鈕.png
- 文件（File）選中文件的基本信息
- 幫助（Help）選中文件快捷幫助文檔
- 特性（Identity）Class Identifier等相關(guān)信息設(shè)置
- 屬性（Attribute）控件外觀屬性設(shè)置
- 尺寸（Size）控件尺寸、布局相關(guān)的設(shè)置
- 連接（Connection）控件與代碼鏈接的設(shè)置，storyboard中的可視化組件可以通過與代碼鏈接而形成一一對應(yīng)的關(guān)系。
下半部分包含了所有可視化組建，可以直接向storyboard工作區(qū)中拖拽從而完成控件的添加。
實體工具區(qū)下部.png
4.編輯區(qū)
右上角有三個按鈕用來控制編輯區(qū)的顯示形式
工作區(qū)按鈕.png
從左到右依次為
- 默認(rèn)編輯模式（Standard editor）：顯示一個工作窗口，讓你可以專注于代碼或設(shè)計
- 助理編輯模式（Assistant editor）：將工作空間一分為二，讓你可以可以同時對代碼和可視化的組件進(jìn)行操作。
- 版本編輯模式（Version editor）：暫時還沒怎么用到過
助理編輯區(qū)
選中控件按住ctrl，通過拖拽將stroyboard中的可視化控件加入代碼，這樣就實現(xiàn)了代碼與組件的鏈接。
拖拽鏈接.png
編輯區(qū)右上側(cè)放置了運(yùn)行按鈕，從左到右依次是
運(yùn)行按鈕.png
- 運(yùn)行
- 停止
- 選擇運(yùn)行設(shè)備
5.菜單欄
菜單欄位于整個屏幕的頂部，前4個區(qū)域很多不包含的內(nèi)容都被分類集成在頂部的菜單欄當(dāng)中。
菜單欄.png
