圖形化使用者介面

本週的教學影片檔：未剪輯，請稍待

了解 Xcode 大概的運作方式後，我們終於可以回頭看看原先「世界＋機器人」組合的專案了，在前三週，我們使用網頁模擬器，完全以print()列印線段和文字的方式，達成使用者介面中視圖角色的製作。

在 Swift Playground 中，我們獲得了增加各式各樣視圖（如按鈕、標籤、圖片）的能力，足以製作圖形化的使用者介面（Graphic User Interface，簡稱GUI），大家已經知道任何視圖要顯示在2D平面上，必然需要一些數值（例如長、寬、中心點座標等）來定義它的所在位置，這些數值在網頁模擬器的程式碼中，其實就已經存在了，以下我們將使用幾乎一樣的Model，搭配上圖形化的View，來重新建構前三週的機器人專案。

在開始撰寫程式碼前，讓我們先確定這個專案需要哪些MVC角色：

世界Model

• 擁有長、寬屬性，並且有等同於長 x 寬大小的陣列，儲存每一格的資訊。
• 擁有Optional的世界視圖變數，用於連結視圖。（為什麼是Optional？）
• 擁有更新世界視圖的權力。

世界View

• 僅負責顯示工作。

世界Controller

• 對應恰一個世界模型，負責接收事件（如滑動）並更新模型內的資料。
• 對應恰一個世界視圖，必要時可對視圖進行操作。

這裡大家會發現構成世界的MVC群組，最終要藉由更新視圖來對使用者傳達資訊，是有非常多種不同的手段的：讓Model持有View並去更新、讓Controller持有View並去更新，或者讓View監聽Model，在發現Controller更新Model後自行重繪，都能達成目標，這些做法會依專案需求不同，各自顯現出其優劣之處，我們會在課程中慢慢發掘它們的特色。

方塊Model

• 擁有位置、標題屬性，用於繪製視圖。
• 擁有Optional的世界模型變數，用於連結世界。（再次的，為什麼是Optional？這次有不同的原因哦！）
• 擁有Optional的方塊視圖變數，用於連結視圖。
• 擁有更新方塊視圖的權力。

方塊View

• 僅負責顯示工作。

方塊Controller

• 暫時不需要。

設計這樣的MVC架構對專案的生命週期是有很多好處的，不只可以協助分工、管理進度，也能把複雜的單一問題切開成大量簡單的問題，逐一以不同的角色去解決，在新增功能和維護上都會直觀許多。