首先要下載安裝及開啟Xcode

1.打開Apple store，在右上角搜尋Xcode

2.Xcode下載頁面(因為我的電腦已經安裝了，所以是顯示「開啟」)

開啟Xcode

1.開啟Xcode，並創建一個project

2.選擇”Single View App”

3.設定專案名稱

Product Name就是檔案名稱，Organization Name跟Organization Identifier可自行設定，會依據你的設定自動創建一個Bundle Identifier，這是App上架apple store後唯一專屬的識別名稱。最後請記得選擇Swift做為開法語言。

4.創建完成後，點選Main .storyboard檔案後，版面配置如下

• 檔案樹狀圖：是實際會產生的檔案，基本上有三種檔案種類和一個資料夾
  1. .swift檔案：主要撰寫code的地方
  2. .storyboard檔案：設計文件，可將視覺元件放入這裡，方便設計版面
  3. Assets.xcassets資料夾：放置圖檔的地方，包含icon和App中使用到的圖片
  4. info.plist檔案：App的屬性設定，另如相關權限的請求 （EX：相機取用）
• storyboard：因為開發App時需要放入很多元件，這裡可以查看元件清單，以及其主從狀態
• 主要編輯區：在storyboard檔案下會出現設計頁面，swift檔案下會出現code編輯器
• 屬性設定區：可以設定相關元件屬性
• 元件選單區：控制元件或視覺元件都可以從這裡拉取

5.輔助編輯器的開啟

點選版面右上方的”Show the Assistant editor”按鈕

點選後會另外出現一個副編輯區，設計者可自行設定顯示畫面。通常會一邊看設計版面，一邊看code。

當然版面如果太擠，可以點選”Show the Assistant editor”按鈕的下拉選單

選擇副編輯器在下方，版面就變清爽了

6.版本控制頁面

點選版面右上方的”Show the Version editor”按鈕

畫面會像下方這樣，基本上這是App上架之後才要考慮的，這裡我們先跳過

最後，版面右上方還有三個按鈕，是用來開啟/關閉：

• 左：檔案樹狀圖區
• 下：debug區域，App執行模擬時這裡會提供一些資訊，供設計者debug
• 右：屬性設定區

把三個都關掉之後，畫面變得很乾淨啊，可以好好在storyboard上好好排版了。

Xcode功能簡介

1.為你的App加入圖片！

老實說我第一次用Xcode的時候，就卡在不知道怎麼加入圖片...對於一個新手而言，怎麼加入圖片很重要啊～～～

好了，言歸正傳。切換至Assets.xcassets檔案位置，再把想要加入的圖片拖曳進去，就完成了

加入後，就會像這樣。其實也可以直接丟到整個project的資料夾裡，只是要使用圖片的時候就連副檔名也要加上，但是只要丟到assets.xcassets檔案位置裡，之後要使用圖片的時候只要呼叫圖片檔名就可以了，整個方便很多啊～～

PS:assets.xcassets裡面本來就有一個AppIcon的資料夾，裡面是用來存放App的Icon的，如果未來大家要上架App，記得幫你的App加上漂亮的封面啊～～

2.加入元件

新創建的檔案裡，本來就附帶一個Main.storyboard，而這個storyboard本身就放了一個View Control，而這個View Control裡也免費送你一個View。

如果要新增元件，可以在右下方的元件選單區拖曳一個你要的元件進View裡面就可以了。

元件選單最下方可以搜尋

範例中拖曳了一個Label進View。請特別注意反藍區域的右下角，有出現View字樣！！這很重要，因為隨著元件越來越多，我們放置的元件會互相重疊，所以越後期要越注意放進去的元件是否放對地方，否則執行之後，可能會被覆蓋掉！！

3.選擇你要的手機大小

在主編輯器下方，『View as: 』的地方點選一下

就可以出現很多裝置給你選擇，從SE到i Pad pro都有～直放、橫放也可以選擇

4.開啟模擬器

版面的左上方有一個開啟模擬器按鈕

點選後也是眾多手機任君選擇啊～～如果電腦連結手機，也可以透過連線直接在實體手機上進行測試！！

除此之外，Xcode 9還支援模擬器多開，而且模擬器還有Home鍵、音源鍵、電源鍵可以測試。而且模擬器還可調整視窗大小，非常方便啊。

iPhone 8 Plus 跟 iPhone 8雙開就是爽~!

程式碼的遊樂園-Playground

從Xcode 6 開始，Apple 導入一個稱作「Playgrounds 」的新功能。開發者能夠用實驗Swift 程式語言，並且能夠讓你即時知道程式碼運行的結果。這種所見即所得的互動模式，當真是遊樂園啊～～

左邊的程式碼會立即顯示在右邊，真的是好棒棒啊～

除此之外，Xcode 的編輯器有自動完成（Auto-Complete）的功能。當你輸入部分關鍵字「locat 」，你會見到一個補齊視窗，列出一些你所輸入的字的建議。也因為我只打了「locat 」，而實際變數名稱是「location」，Xcode很即時的反應錯誤『Use of unresolved identifier ‘locat’』，真的是太強大啦～～