iOS仿照Yahoo天氣：油條天氣

JatenLv發表於2017-12-21
原文網址 : https://juejin.im/post/5a30d8456fb9a0451a765fad
iOS

Where?

  專案地址：Github：YTWeather

Why do this?

  距離畢業也有三、四個月的時間了，除了工作上的內容，改一改舊的Bug，做一做新的內容，還一直想著要做一個自己獨立完成的應用。做即時通訊吧沒有伺服器，做音樂播放器吧沒有資料庫，所以就從最簡單的只需要一個介面就能搞定的天氣應用開始嘍。這不，一款亂七八糟、隨心所欲的Weather Application就出來了。感謝小夥伴Chaylau的協作完成。

What's this？

  “油條天氣”是一款基於iOS平臺的天氣應用。YT能夠做到顯示基本的天氣資訊，包括城市、當前時間、實時天氣情況、七天天氣預報、當天24小時天氣預報，也能夠自由新增國內城市，只需要輸入城市名即可。

油條天氣APP圖示

What're the features?

  油條天氣涵蓋了城市資訊、當前時間、七天天氣預報、一天內24小時天氣預報、廣告位、當前詳細天氣資訊、降水量資訊、太陽和風速資訊等基礎天氣諮詢。還具有自定義新增國內城市、多城市切換的功能。一些介面截圖如下：

APP螢幕截圖

What're the techniques?

  • 介面

  獲取資料的介面選取的是 和風天氣 ，針對普通開發者可以免費獲取7天/24小時的天氣預報，每天能夠連線介面大約15000次。

  只需要登入 和風天氣 官網註冊成為開發者並稍作認證，即可獲得Key在應用內使用，在官網控制檯內還能檢視每日介面被獲取的詳細數量。

  當然，免費的介面只能獲取一部分天氣資訊，並且只能支援國內的城市。想要體驗更多的天氣資訊，則必須購買相應功能的介面。

和風天氣控制檯

  • UI設計

  程式設計師的工作是安安心心的寫程式碼，總不能指望我們Sketch、Axure、PhotoShop樣樣精通吧......但是一款好看的App又很依賴於UI設計，所以我們偷懶將 Yahoo天氣 進行了解包，調取了他們的UI切圖啥了的，介面設計也仿照了 Yahoo天氣 。所以UI方面的工作就比較輕鬆，直接拖入Assets包裡就行。(不作商業用途，此處如被認定有侵權，將會立刻刪除。)

  解包操作：下載PP助手（之前可以直接在iTunes中下載ipa包的，但是蘋果關閉了這項功能，所以用PP助手），在PP助手上將Yahoo天氣的ipa包下載到mac中，再用 Github：Cartool 進行獲取Assets操作，具體操作可參考 提取assets.car中的圖片 .car檔案的解壓 。

獲取的UI檔案

  • 框架搭建

  開始動手碼程式碼之前當然是對程式的框架進行搭建，參考公司其他專案的結構，選用了傳統的MVC框架，思維導圖如下：

框架思維腦圖.png

  APP複雜度並不高，也不依賴於NavigationController和TabBarController，所以一個主控制器負責所有介面的展示、子控制器的跳轉。將檢視的展示集合到MainView裡，MainController只負責邏輯部分，減輕M-V-C中C的負擔。

  MainView從底往上依次是：LeftSlideView-MaskView-ScrollView-TableView-CustomNavigationBar。在處理ScrollView時花了不少功夫，既要保證當前城市所在View的滑動，還要保證其他View跟隨滑動，在切換或搜尋城市過後還要新增相應的索引。

  • 專案中遇到的其他問題

  1. Q：Cell如何實現懸浮效果？
    A：將Cell背景設為透明色，在每個Cell的上先加入一層BackgroudView，到左右兩邊同時設定約束，加圓角，改變BackgroundView的顏色和透明度，實現懸浮效果。
  1. Q：WeatherCode和CityCode都是以.txt形式給出，如何轉為.plist？ A：在網上看了許多部落格和教程，最後決定用笨辦法轉換，由於不同txt中內容格式不固定，所以手動貼上了txt檔案中的項。今後準備將轉換方法實現自動化，自動去判別txt中的內容，並根據內容完成轉換，以下是轉換方法的程式碼。
- (void)txtConvertToPlist
{
    // 將txt檔案新增進專案檔案中
    // 獲取txt檔案的路徑
    NSString *plistPath = [[NSBundle mainBundle] pathForResource:@"condition-code" ofType:@"txt"];
    // 將txt檔案轉換為String型別
    NSString *pathString = [[NSString alloc] initWithContentsOfFile:plistPath encoding:NSUTF8StringEncoding error:nil];

    // 將每行拆分，存入陣列
    NSArray *bigArray = [pathString componentsSeparatedByString:@"\n"];

    NSMutableArray *resultArray = [NSMutableArray array];
    for (int i=1; i<ary.count-1; i++) {
        // 根據空格拆分每列，存入字典
        NSArray *smallAry = [bigArray[i] componentsSeparatedByString:@"    "];
        NSMutableDictionary *dic = [NSMutableDictionary dictionary];
        [dic setObject:smallAry[0] forKey:@"cityCode"];
        [dic setObject:smallAry[1] forKey:@"cityEnglishName"];
        [dic setObject:smallAry[2] forKey:@"cityChineseName"];
        [resultArray addObject:dic];
    }
    
    // 存入.plist
    NSString *plistPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES) objectAtIndex:0];
    NSString *fileName = [plistPath stringByAppendingPathComponent:@"cityCode.plist"];
    NSFileManager *fm = [NSFileManager defaultManager];
    if ([fm createFileAtPath:fileName contents:nil attributes:nil] ==YES) {
        [resultAry writeToFile:fileName atomically:YES];
        NSLog(@"檔案寫入完成");
    }
}
複製程式碼
  1. Q：Cell如何實現懸浮效果？
    A：一個Controller中置入多個頁面的時候，必定要考慮清楚其之間的層級關係。LeftSlideView在最底層，能夠讓使用者在點選選單欄按鈕時將ScrollView整體右移；MaskView是為了處理互動，在選單欄未彈出時透明度為1，看上去ScrollView就像是最底層了，選單欄彈出時，將透明度慢慢更改為0，使LeftSlideView浮現出來；ScrollView上的每個View表現形式都相同（今後會考慮View的複用問題），下圖為層級關係示意圖。
    層級關係.png
  1. Q：Cell如何實現懸浮效果？
    A：AFNetworking → 處理網路請求，資料獲取；   SDWebImage → 快取天氣圖示；   YYKit → 將JSON轉為模型，比MJExtension更輕量級；   MJRefresh → 下拉重新整理的首選，在此基礎上自定義了Gif方式的重新整理。

What will we do next?

  “開發是小頭、維護是大頭”，來自一名弱雞開發的真實感受，雖然在專案開始前已經搭建了大致的框架，想好了編碼的思路，但是越往後越發現很多東西都可以用另一種更好的方法實現，所以作為一枚新手iOS，覆盤+優化+重構的總結之路還有好長要走，接下來總結一下專案裡能夠優化、能夠略去以及能夠還存在Bug的地方吧~

未完待續

  • 2018.1.24 發現clone很慢，刪除了assets中很多無用的圖片，重整了一下專案結構。
  • 2018.3.10 適配iPhone X。
  • 2018.3.15 新增定位功能，優化太陽和風速cell的動畫效果。

相關文章