服务器之家

服务器之家 > 正文

iOS毕业设计之天气预报App

时间:2021-02-04 15:21     来源/作者:tutu的dudu

9月中旬,开始动手做我的毕业设计了,之前一直在纠结做啥,后来想想,既然是做毕业设计,那就大胆地做点自己没接触过的东西吧。然后网上查找资料得知做天气预报需要用到开放的api,而且要用那种现在还在维护的,而且又免费的(对于我们学生党来说,这个是挺好的)。天气预报app的核心是从天气api请求数据,请求得到的一般是json数据(这个json数据之前都没接触过),然后把json数据解析,然后在视图上显示出来。总得来说,这里应该涉及到“网络请求”,“json解析”这两个大块吧,正好用来学习新的东西,并且练练手,于是就决定做个天气预报的app了。

第一步,找天气api
各种百度,然后找到了比较新的网站,分别是“心知天气”和“和风天气”。都需要注册,注册之后会得到一个key,用来进行数据请求的。两个网站都有付费和免费的两种选择,如图,比较完之后,二话不说,选择了和风天气的api。

iOS毕业设计之天气预报App

iOS毕业设计之天气预报App

第二步,找解析json的第三方框架
各种百度之后也找到了大家推荐的一些,如:jsonkit、mantle、afnetworking、sbjson、mjextension等等等等。。。最后参考一篇教程,还是选择了mantle,当然不是说其他不好用,个人喜好而已。
mantle的使用也很简单。
1、新建一个继承自mtlmodel的类,并让他遵循<mtljsonserializing>协议,注意这里还要#import <mtlmodel.h>
2、在.h文件定义你的模型,如:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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数据到模型的映射

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
+ (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数据要调用下面的方法,并且传入带有你要的数据的字典

?
1
2
3
4
5
6
//创建nsdictionary
nsdata *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了

第三步,建立天气预报页面(展示天气页面)

iOS毕业设计之天气预报App

iOS毕业设计之天气预报App

iOS毕业设计之天气预报App

这里主要懒加载了一个backgroundview作为背景图片,一个tableview以及多个xib文件做成的cell组成,我参考手机上自带的天气app做了一点美化,就是添加一个tableheaderview,然后在上面添加一个scrollview,在scrollview上显示城市和日期,达到它一直悬浮在最上层的效果,下面的cell都在它底下滑过。(后来发现其实这里可以不添加tableheaderview,把tableview的位置下移就好了。。。)

=====================10.12日编辑==============================

对界面进行了调整,继续ing。。。 

第四步,创建uipagecontrol

基本定好天气预报信息如何展示之后,就要想,怎么展示多个天气页面呢?为了实现这个需求,我想到了用uipagecontrol
这里主要用到一下属性和方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@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的页面添加和翻页逻辑问题,经过一段时间努力还是解决了。

iOS毕业设计之天气预报App

iOS毕业设计之天气预报App

第六步,添加第三方侧栏llslidemenu

我想使用这个侧栏管理天气页面,因为我是用一个数组存储城市名字去加载天气页面的,所以我的思路是,在侧栏里面添加一个tableview,然后把数组的每一个元素显示上去,然后实验tableviewcell的编辑方法,达到移除相应的cell,即删除相应的城市名字和城市页面。

iOS毕业设计之天气预报App

iOS毕业设计之天气预报App

未完待续,不要错过。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部