快捷導(dǎo)航

iOS畢業(yè)設(shè)計之天氣預(yù)報App

更新時間：2016年10月12日 14:30:37 作者：tutu的dudu

這篇文章主要為大家詳細介紹了iOS畢業(yè)設(shè)計之天氣預(yù)報App,具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

第二步，找解析JSON的第三方框架
各種百度之后也找到了大家推薦的一些，如：JSONKit、Mantle、AFNetworking、SBJSON、MJExtension等等等等。。。最后參考一篇教程，還是選擇了Mantle，當然不是說其他不好用，個人喜好而已。
Mantle的使用也很簡單。
1、新建一個繼承自MTLModel的類，并讓他遵循<MTLJSONSerializing>協(xié)議，注意這里還要#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; // 空氣質(zhì)量


@end

3、在.m文件中實現(xiàn)類方法，實現(xiàn)JSON數(shù)據(jù)到模型的映射

+ (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數(shù)據(jù)要調(diào)用下面的方法，并且傳入帶有你要的數(shù)據(jù)的字典

//創(chuàng)建NSDictionary
NSData *JSONData = ...//接口的響應(yīng)數(shù)據(jù)
NSDictionary *JSONDict = [NSJSONSerialization JSONObjectWithData: JSONData options: 0 error: nil];

//使用MTLJSONSerialization創(chuàng)建模型對象
CATProfile *profile = [MTLJSONAdapter modelOfClass: CATProfile.class fromJSONDictionary: JSONDict error: NULL];

經(jīng)過重復(fù)的練習(xí)，熟悉了用Mantle把JSON數(shù)據(jù)轉(zhuǎn)模型之后，我就開始搭建App的UI了

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

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

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

對界面進行了調(diào)整，繼續(xù)ing。。。

第四步，創(chuàng)建UIpagecontrol

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

@property(nonatomic,strong) NSMutableArray *viewControllerArr;  // 存放視圖的數(shù)組
@property(nonatomic,assign) NSInteger curPage ;      // 記錄當前
@property(nonatomic,assign) NSInteger totalPages ;     // 記錄總頁數(shù)

// ***翻頁方法
// 往后翻
-(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

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

第六步，添加第三方側(cè)欄LLSlideMenu

我想使用這個側(cè)欄管理天氣頁面，因為我是用一個數(shù)組存儲城市名字去加載天氣頁面的，所以我的思路是，在側(cè)欄里面添加一個tableview，然后把數(shù)組的每一個元素顯示上去，然后實驗tableviewcell的編輯方法，達到移除相應(yīng)的cell，即刪除相應(yīng)的城市名字和城市頁面。