Xcode的基本操作概念，透過小短片說明。
開發環境
在接觸iOS App開發之前，我最好奇的是畫面是怎麼做出來的？是像網頁設計一行一行用程式碼刻嗎？是否要定義每個邊邊角角、然後仔細地排列素材讓他們不會被擠到跑版，接著儲存後重新整理瀏覽器看畫面呢？
很快的，這個問題得到了解答：Xcode是iOS App的開發環境，關於使用者介面和程式碼是可以分開處理的。
在撰寫任何一行程式碼前，我們就能在Storyboard內建構畫面，以及拉出頁面與頁面間的連接關係，用起來很像簡報軟體，容易上手。
當然，如果介面是中文的會更加親切…(汗)。
為了節省大家時間，接下來我會錄製許多的小短片，分享一些開發概念。
如何顯示圖片
打開Xcode選擇project，Single View Application後，把圖片拖曳到Xcode左方導覽列，讓專案可以使用這個素材：
接著從右下方的元素，選擇放置圖片的Image View，放到畫面中拉出合適的大小：
再到右邊工具列選擇剛剛的圖片，調整呈現模式即可：
做到這個步驟，我很偷懶的想說能不能透過滑鼠點擊，完成圖片裁剪、左右鏡射、上下翻轉等繪圖軟體功能？
答案是：沒有辦法ˊ＿ˋ。
替圖片加上文字
Storyboard的使用，大致就是從右下角拖各種元素放到畫面上，再從右邊的工具列調整相關的參數。
這次我們加上Label標籤，並改變文字顏色和大小：
有沒有很像操作簡報軟體的既視感？
所見即所得，實在開心！
與程式碼的互動
現在把畫面清空，拉Button元素到中間，更改名字為召喚熊熊，點右上角的兩個重疊圈圈的圖案，可以叫出左邊是Storyboard，右邊是ViewController的互動介面，要替他們正式搭起橋樑啦！
我們把召喚熊熊按住control後，直接拖到右邊的程式碼區，選擇動作為Action並命名，相關的程式碼便會自動建立。
而後在兩個大括號間輸入想要執行的動作，來print表情圖案吧。
使用模擬器
Xcode的左上角，有各種尺寸的iPhone模擬器可選擇，馬上來執行看看：
在模擬器點擊按鈕後，在下面的控制台順利印出(￣(エ)￣) 找我有事嗎？：
至此，Storyboard的Button元素，和剛剛在程式碼輸入的print內容，成功結合。
切換畫面的Segue
有了建立畫面、連結程式碼的概念之後，我們繼續來看看如何換頁，以便跨出單一頁面的小框框。
拉出一個新的ViewController，放上與貓咪擊掌的照片，按住control拖曳左邊的按鈕到新畫面選Show，中間會自動出現一條線建立起連結：
執行模擬器，點擊按鈕就可以換到新畫面：
預設為由下而上的轉場特效。
因為目前的新畫面只有表皮而已，記得新增ViewController並綁定，讓我們可以控制畫面：
ViewController就是剛剛示範的，從左邊Storyboard拖曳到的右邊程式碼區。
其他
有時候從Storyboard拉元素到程式區，會忘記下拉選單點Action，而建立成預設的Outlet；直接刪除程式碼、重拉，並不能解決問題，要記得對元素點右鍵觀看錯誤提示，兩邊都清理乾淨才可以。
收放左方導航列的快速鍵是cmd+0，右方的則是cmd+option+0，下方控制台為cmd+shift+y：
想要瞭解更多，可以前往網友分享寫給Storyboard/Xib新手的總結，而內文中的VC，指的是ViewController。
希望這些整理能讓讀者對App開發有多一些體會，就算工作用不到也無妨，光是知道些新東西也很有趣啊！
更何況當我們能講出一個東西的名字，就已經在認識的路上了。
