在這個系列里，我們通過從零開始開發(fā)一個完整的天氣App - Sky，來理解并掌握MVVM的編程思想。并且，在這個過程中，我們還會引入RxCocoa、單元測試，以及UI測試等內(nèi)容，盡可能還原一個比較真實的App獨立開發(fā)場景。
作為整個系列的開始，我們先了解一下這個App的大體構成，并用MVC的方式勾勒出一個輪廓。這樣，我們就會很自然的從一些熟悉的場景，過渡到MVVM了。
整理項目目錄
首先，還是創(chuàng)建一個Single View Application，這不過這次，記得把Include Unit Tests和Include UI Tests選上，在稍后的內(nèi)容里，我們會涉及到單元測試以及UI測試的內(nèi)容：
其次，我們把Xcode默認創(chuàng)建的項目目錄結構調(diào)整成下面這個樣子：
它們的含義大多簡單直觀，我們就不再一一說明了。這里，有兩點要說明下：
- 在大家下載下來的項目初始模板里，Assets.xcassets中已經(jīng)包含了項目需要的所有圖片資源；
- 當我們把Info.plist放在了SupportingFiles目錄下之后，如果我們直接編譯項目，就會看到下面這樣的錯誤：
這時，我們就要在TARGETS中選中Sky，然后，在Build Settings里把Info.plist File的設置修改成對應的位置：
這樣，就不會再有錯誤了。
從設計首頁Storyboard開始
接下來，打開Main.storyboard，我們從構建首屏UI開始。在這個界面上，我們先拖兩個Container View進來，其中，上半部分用于顯示當前的天氣信息；下半部分將會設計成一個UITableView，用于顯示天氣預告：
然后，設置上下兩部分容器的位置約束：
完成后，選中上半部分的Container View，按住Ctrl拖拽到下面的Container View上，在彈出的菜單中，選擇Vertical Spacing和Equal Heights
最后，在storyboard中選中Equal Heights約束，在Attribute Inspector中，把Multiplier選項設置成2:3。這樣，上下兩部分在任何屏幕上，就都有固定的比例顯示了。
完成后，我們來處理顯示當前天氣的部分，為了方便整體控制這部分內(nèi)容的加載，我們先拖一個UIView進來作為這部分所有其他元素的容器，并按下圖給它設置約束：
接下來，拖一個UIImageView進來，表示當前天氣的圖片，按照下圖給它添加約束之后，在Attribute Inspector里，把默認的圖片設置成clear-day：
完成后，我們拖兩個UIButton進來，放在這個區(qū)域的左右上角，并按下圖設置它們的屬性和位置約束：
這里，要注意的是，一定要清空這兩個按鈕的默認文字內(nèi)容，否則會影響計算它們的大小。其中，左邊的按鈕用于切換地區(qū)，右邊的按鈕，用于對App的行為進行一些設置，它們都將是我們在稍后的內(nèi)容中實現(xiàn)的部分，現(xiàn)在，只是把它們放在這里就好了。
完成后，我們添加一些UILabel。第一個，表示當前所在城市：
第二個，表示當前天氣的文字描述：
第三個，表示當前時間：
第四個，表示當前溫度：
第五個，表示當前濕度：
這樣，表示當前溫度信息的UI部分就完成了，直接執(zhí)行一下，可以在模擬器里，看到下面這樣的結果：
