iOS畢業設計之天氣預報App

2020-07-26 03:08:56

字體：大中小

來源：轉載

供稿：網友

9月中旬，開始動手做我的畢業設計了，之前一直在糾結做啥，后來想想，既然是做畢業設計，那就大膽地做點自己沒接觸過的東西吧。然后網上查找資料得知做天氣預報需要用到開放的API，而且要用那種現在還在維護的，而且又免費的（對于我們學生黨來說，這個是挺好的）。天氣預報App的核心是從天氣API請求數據，請求得到的一般是JSON數據（這個JSON數據之前都沒接觸過），然后把JSON數據解析，然后在視圖上顯示出來?？偟脕碚f，這里應該涉及到“網絡請求”，“JSON解析”這兩個大塊吧，正好用來學習新的東西，并且練練手，于是就決定做個天氣預報的App了。

第一步，找天氣API
各種百度，然后找到了比較新的網站，分別是“心知天氣”和“和風天氣”。都需要注冊，注冊之后會得到一個key，用來進行數據請求的。兩個網站都有付費和免費的兩種選擇，如圖，比較完之后，二話不說，選擇了和風天氣的API。

第二步，找解析JSON的第三方框架
各種百度之后也找到了大家推薦的一些，如：JSONKit、Mantle、AFNetworking、SBJSON、MJExtension等等等等。。。最后參考一篇教程，還是選擇了Mantle，當然不是說其他不好用，個人喜好而已。
Mantle的使用也很簡單。
1、新建一個繼承自MTLModel的類，并讓他遵循<MTLJSONSerializing>協議，注意這里還要#import <MTLModel.h>
2、在.h文件定義你的模型，如：

#import <Mantle/Mantle.h>#import <MTLModel.h>@interface TSCondition : MTLModel<MTLJSONSerializing>@property (nonatomic, strong) NSString *cityName;  // 城市名字@property (nonatomic, strong) NSString *nowCond;  // 當前天氣狀況@property (nonatomic, strong) NSString *nowTmp;   // 當前溫度@property (nonatomic, strong) NSString *winddir;  // 風向@property (nonatomic, strong) NSString *windsc;   // 風力@property (nonatomic, strong) NSString *date;   // 日期@property (nonatomic, strong) NSString *maxTmp;   // 最高溫度@property (nonatomic, strong) NSString *minTmp;   // 最低溫度@property (nonatomic, strong) NSString *weatherqlty; // 空氣質量@end

3、在.m文件中實現類方法，實現JSON數據到模型的映射

+ (NSDictionary *)JSONKeyPathsByPropertyKey{ return @{    @"cityName": @"basic.city",    @"nowCond": @"now.cond.txt",    @"nowTmp": @"now.tmp",    @"winddir": @"now.wind.dir",    @"windsc": @"now.wind.sc",    @"date": @"basic.update.loc",    @"maxTmp": @"daily_forecast.tmp.max",    @"minTmp": @"daily_forecast.tmp.min",    @"weatherqlty": @"aqi.city.qlty"    };}

4、當然要接受到JSON數據要調用下面的方法，并且傳入帶有你要的數據的字典

//創建NSDictionaryNSData *JSONData = ...//接口的響應數據NSDictionary *JSONDict = [NSJSONSerialization JSONObjectWithData: JSONData options: 0 error: nil];//使用MTLJSONSerialization創建模型對象CATProfile *profile = [MTLJSONAdapter modelOfClass: CATProfile.class fromJSONDictionary: JSONDict error: NULL];

經過重復的練習，熟悉了用Mantle把JSON數據轉模型之后，我就開始搭建App的UI了

第三步，建立天氣預報頁面（展示天氣頁面）

這里主要懶加載了一個backgroundView作為背景圖片，一個tableView以及多個XIB文件做成的Cell組成，我參考手機上自帶的天氣App做了一點美化，就是添加一個tableHeaderView，然后在上面添加一個ScrollView,在ScrollView上顯示城市和日期，達到它一直懸浮在最上層的效果，下面的cell都在它底下滑過。（后來發現其實這里可以不添加tableHeaderView，把tableView的位置下移就好了。。。）

=====================10.12日編輯==============================

對界面進行了調整，繼續ing。。。

第四步，創建UIpagecontrol

基本定好天氣預報信息如何展示之后，就要想，怎么展示多個天氣頁面呢？為了實現這個需求，我想到了用UIpagecontrol
這里主要用到一下屬性和方法

@property(nonatomic,strong) NSMutableArray *viewControllerArr;  // 存放視圖的數組@property(nonatomic,assign) NSInteger curPage ;      // 記錄當前@property(nonatomic,assign) NSInteger totalPages ;     // 記錄總頁數// ***翻頁方法// 往后翻-(UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController{ self.curPage = ((ViewController *)viewController).page; UIImage *bgImg = [self createImageWithColor:((ViewController *)viewController).view.backgroundColor]; [self.navigationController.navigationBar setBackgroundImage:bgImg forBarMetrics:UIBarMetricsDefault]; self.pageControl.currentPage = self.curPage; if (self.curPage < self.totalPages - 1 && self.curPage != self.totalPages) {  return self.viewControllerArr[self.curPage + 1]; }else{  return nil; }}// 往前翻-(UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController{ self.curPage = ((ViewController *)viewController).page; UIImage *bgImg = [self createImageWithColor:((ViewController *)viewController).view.backgroundColor]; [self.navigationController.navigationBar setBackgroundImage:bgImg forBarMetrics:UIBarMetricsDefault]; self.pageControl.currentPage = self.curPage; if (self.curPage > 0 && self.curPage != self.totalPages) {  return self.viewControllerArr[self.curPage - 1]; }else{  return nil; }}

第五步，添加城市，使用searchBar

實現這個需求，我選擇在navigationBar 上添加一個按鈕，跳轉到一個帶搜索欄的視圖，實現輸入城市名字，添加天氣頁面的功能
這里的難點是，添加視圖后，UIpagecontrol的頁面添加和翻頁邏輯問題，經過一段時間努力還是解決了。