Master MVVM in Swift<1>

不管你基於MVC的模式寫過什麼，都應該對view controller的身量記憶深入。甚至能夠說，一個真正有用的App，它的view controllers有很大機率充斥着各類既不適合放在model也不適合放在view裏的代碼。若是你也發現了這個問題，卻沒有更好的辦法，你能夠持續關注一下咱們的內容。

咱們會從零開始編寫一個質量達到生產環境級別的天氣應用 - Sky。在這個過程裏，咱們經過「自定義table」、「controllers過渡」、「定義model」、「保存配置」、「網絡通訊」等幾乎必定會在App開發中用到的場景，和你們分享RxSwift/RxCocoa在App開發中的應用、TDD的實踐，以及MVVM是如何從機制上改進MVC設計模式的。

泊學4K視頻

首先了解Sky的項目結構和UI構成

咱們經過從零開始開發一個完整的天氣App - Sky，來理解並掌握MVVM的編程思想。而且，在這個過程當中，咱們還會引入RxCocoa、單元測試，以及UI測試等內容，儘量還原一個比較真實的App獨立開發場景。

做爲整個系列的開始，咱們先了解一下這個App的大致構成，並用MVC的方式勾勒出一個輪廓。這樣，咱們就會很天然的從一些熟悉的場景，過渡到MVVM了。

整理項目目錄

首先，仍是建立一個Single View Application，這不過此次，記得把Include Unit Tests和Include UI Tests選上，在稍後的內容裏，咱們會涉及到單元測試以及UI測試的內容：

frame-the-app-in-mvc-1@2x.png

其次，咱們把Xcode默認建立的項目目錄結構調整成下面這個樣子：

frame-the-app-in-mvc-2@2x.png

它們的含義大多簡單直觀，咱們就再也不一一說明了。這裏，有兩點要說明下：

• 在你們下載下來的項目初始模板裏，Assets.xcassets中已經包含了項目須要的全部圖片資源；
• 當咱們把Info.plist放在了SupportingFiles目錄下以後，若是咱們直接編譯項目，就會看到下面這樣的錯誤：
  

  

  frame-the-app-in-mvc-3@2x.png

這時，咱們就要在TARGETS中選中Sky，而後，在Build Settings裏把Info.plist File的設置修改爲對應的位置：

frame-the-app-in-mvc-4@2x.png

這樣，就不會再有錯誤了。

從設計首頁Storyboard開始

接下來，打開Main.storyboard，咱們從構建首屏UI開始。在這個界面上，咱們先拖兩個Container View進來，其中，上半部分用於顯示當前的天氣信息；下半部分將會設計成一個UITableView，用於顯示天氣預告：

frame-the-app-in-mvc-5@2x.png

而後，設置上下兩部分容器的位置約束：

frame-the-app-in-mvc-6@2x.png

完成後，選中上半部分的Container View，按住Ctrl拖拽到下面的Container View上，在彈出的菜單中，選擇Vertical Spacing和Equal Heights

frame-the-app-in-mvc-7-fix@2x.png

最後，在storyboard中選中Equal Heights約束，在Attribute Inspector中，把Multiplier選項設置成2:3。這樣，上下兩部分在任何屏幕上，就都有固定的比例顯示了。

frame-the-app-in-mvc-8@2x.png

完成後，咱們來處理顯示當前天氣的部分，爲了方便總體控制這部份內容的加載，咱們先拖一個UIView進來做爲這部分全部其餘元素的容器，並按下圖給它設置約束：

frame-the-app-in-mvc-9@2x.png

接下來，拖一個UIImageView進來，表示當前天氣的圖片，按照下圖給它添加約束以後，在Attribute Inspector裏，把默認的圖片設置成clear-day：

frame-the-app-in-mvc-10@2x.png

完成後，咱們拖兩個UIButton進來，放在這個區域的左右上角，並按下圖設置它們的屬性和位置約束：

frame-the-app-in-mvc-11@2x.png

這裏，要注意的是，必定要清空這兩個按鈕的默認文字內容，不然會影響計算它們的大小。其中，左邊的按鈕用於切換地區，右邊的按鈕，用於對App的行爲進行一些設置，它們都將是咱們在稍後的內容中實現的部分，如今，只是把它們放在這裏就行了。

完成後，咱們添加一些UILabel。第一個，表示當前所在城市：

frame-the-app-in-mvc-12@2x.png

第二個，表示當前天氣的文字描述：

frame-the-app-in-mvc-13@2x.png

第三個，表示當前時間：

frame-the-app-in-mvc-14@2x.png

第四個，表示當前溫度：

frame-the-app-in-mvc-15@2x.png

第五個，表示當前溼度：

frame-the-app-in-mvc-16@2x.png

這樣，表示當前溫度信息的UI部分就完成了，直接執行一下，能夠在模擬器裏，看到下面這樣的結果：

frame-the-app-in-mvc-17@2x.png

What's next?

至此，咱們UI的構建工做就能夠告一個段落了。由於這些UI以及咱們對App整個結構的描述，已經足夠開始探索一些MVC的問題，以及MVVM對應的解決方法了。在下一節裏，咱們將瞭解一個能夠訪問到天氣的API服務，並以此設計Sky用到的model。