整理资料发现自己当初的练手项目，稍微勾起一些并不是很美好的回忆，与项目无关，与自己当时的生活状态有关。万幸现在挺过来了。
项目效果预览.gif
运行后的效果是上图这样的……
一口老血.jpg
老实说回头再看这个效果图总觉得自己该吃药了或者药吃多了…….
嗯，我知道配色和图片什么的都丑到爆
当初就就是报着练练手的心态去写的。
一位前辈跟我说过：“如果自己想写点什么，但是又没有什么好点子，就去写个天气吧 ”
但不知道为什么，做到后来就慢慢发展为我个人的恶趣味了……
页面逻辑很简单，图标素材基本都是从http://www.easyicon.net/
上挖下来的，
比如：
WeatherIcon_duoyunzhuanqing.png
觉得这种类似白底素描的风格非常合我口味，所以直接拿来用了。
我们暂时先不讨论我就这么直接下载下来用是不是侵权了吧……
简单的介绍一下项目吧。
业务逻辑:
1. 程序启动后自动加载上一次选择的城市，如果没有，默认城市为北京。
2. 屏幕左上方俩按钮
<1> 上方的显示当前城市的空气质量，按钮背景固定，前景图片可更换。
如果当前城市空气质量为 "优" 或 "良" 显示为绿色树叶，
非这两种状态（污染较严重）显示枯黄色树叶。
点击后push一个空气质量的详情界面，显示 "PM25"、"空调"、"运动"、"紫外线"四项指标。（UIView）
//是的，找不到理想中的扁平化“紫外线”图标，用的工业UV警示牌来凑数的
//写完上面这句我发现紫外线跟空气质量好像也没什么关系.....
附带对应的生活建议 ，其中PM25的图片会根据实际情况改变
//这几个图标颜色(黑色)和文字颜色(白色)根本不搭的问题我真的努力过的去解决了！
//但后来发现根本找不到现成的白色图标后，我就自暴自弃了……
下方4个按钮是常规的风向风力温度湿度，再加一个醒目的大号温度显示
<2> 下方一个“7”的日历按钮，点击后push至 "未来6天"天气预报 (UITableView)。
固定的6行Cell 每行Cell代表1天,Cell的高度我采用了简单粗暴的 height / 6（其实如果固定Cell高度，再给tableViewHeader footer 添点什么东西似乎会好看很多）
左侧：日期 + 周几 + 天气图标
中段：最低气温到最高气温 (实际是夜间的平均气温到白天的平均气温)。
右侧：显示风力、风向。
cell的背景会根据预报中的天气进行更换。
默认cell的文字颜色颜色为白色 ，但是实际模拟 "阴天"、"大雪"等几种天气时，由于背景图片偏白，
会导致文字看不清，增加了一层判断，当处于这几种天气时，字体颜色改为黑色。
3. 屏幕右下方黄色刷新按钮
// 就是刷新按钮……点击后重新发送请求，获取新的天气情况（如果有更新的话）
// 做好之后才想起似乎应该做成下拉刷新，懒的改了……
4. 底部tabbar中部的定位按钮
点击后modal出一个城市选择控制器 （UICollectionView）
注册了自定义的Cell Header Footer 用来对应不同的功能模块
Cell: 流水布局部分热门(省会)城市
Header: 1> 返回按钮: 用来dismiss控制器，
2> searchBar: 手动输入搜索城市
3> 2个Label，一个作为cell的标题部分,显示"热门城市"。另一个没什么卵用……
PS: 是的，Header的背景图片由原本的某比较好看的矢量天气图片被我换成了"守望先锋"....label内的文字也是，单纯的恶趣味
Footer：本来是打算集成 “换一批” 按钮用来切换Items的，
static NSString * const reuseIdentifier = @"Cell";
static NSString * const header = @"header";
static NSString * const footer = @"footer";
// 贴个注册用的代码意思一下……
UINib *cellXib = [UINib nibWithNibName:@"CityCell" bundle:nil];
[self.collectionView registerNib:cellXib forCellWithReuseIdentifier:reuseIdentifier];
[self.collectionView registerClass:[ChooseHeader class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:header];
[self.collectionView registerClass:[ChooseFooter class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footer];
5. tabbar右侧的设置按钮
偷懒，就放了俩按钮，链接简书和GitHub。
// 本来想做成设置的，但是想来想去没觉得有什么好设置的……
// 因为首页的图标是黑色的(没找到白色的)，找跟这个主题搭配的背景图片相当蛋疼……
项目尝试使用的新的三方库及一点感受
1. YYModel
// 1. 很好很强大，之前一直用MJExtension，用来这个库之后的确像是打开了新世界的大门！
// 2. 使用自定义属性名映射JSON中的原属性真的很好用
// 3. 继续摸索中，尝试在一个model文件中把JSON全部解析完。
// 4. 一开始的时候多模型嵌套嵌套的想死……
2. SVProgressHUD
// 1. 使用单例模式进行提示的显示，从使用的角度来说感觉是比之前用的MBProgressHUD要好一些
// 2. 自定义提示动画学习中.....
3. Masonry
// 1. 好评！
// 2. 写各种mas_equalTo语句的时候如行云流水一般，唰唰唰的就下来了！
// 3. 然后回头看的时候就在想"之前写的都什么狗屁玩意".......
4. 一些辅助的扩展类，计算宽高 NSString处理之类，没什么好说的
遇到的坑
1. 导航栏的背景图片
// 获取一张重新绘制的可调整透明度的图片
UIImage *image = [UIImage imageNamed:@"navi_bg"];
UIImage *newImage = [image imageByApplyingAlpha:1];
// 设置其位navigationBar的背景图片
[self.navigationController.navigationBar setBackgroundImage:newImage forBarMetrics:UIBarMetricsDefault];
关键在于，一旦设置了导航条的背景图片
控制器的所有子控件计算位置方法发生改变
原屏幕顶部为视图top -> 添加导航条背景图片后 -> 导航条底部变为视图的顶部
---> 所有子控件布局时的位置需要上移一个导航条宽度（64）
UIImage + Extension 内的扩展方法 --> 绘制新的透明度可调的图片
- (UIImage *)imageByApplyingAlpha:(CGFloat)alpha {
UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f);
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect area = CGRectMake(0, 0, self.size.width, self.size.height);
CGContextScaleCTM(ctx, 1, -1);
CGContextTranslateCTM(ctx, 0, -area.size.height);
CGContextSetBlendMode(ctx, kCGBlendModeMultiply);
CGContextSetAlpha(ctx, alpha);
CGContextDrawImage(ctx, area, self.CGImage);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
2. 中文字符转UTF-8
向服务器发送请求时要求将"城市名"转为UTF-8格式。
开始的时候各种抓瞎……
查了好久才找到解决办法
WeatherRequestURL = @"http://op.juhe.cn/onebox/weather/query?cityname=%@&key=%@"
NSString *requestStr = [NSString stringWithFormat:WeatherRequestURL,cityName,juheAppKey];
// !!!: 使用NSCharacterSet进行转码
NSString *request =
[requestStr stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet URLQueryAllowedCharacterSet]];
3. 布局方面
未来6天的天气(UITableView)界面，因为只有6个cell，
想当然的在设置时将cell高度设置为 cellHeight =（屏幕高度 - 64）/ 6 ;
发现6S上简直丑到爆炸……同理还有首页的视图位置，因为设置的都是相对位置，
切换设备时， 屏幕宽度为320时还能凑合看，一旦超过320的设备，无一不是丑到爆炸！
// 先凑合看吧……
先这么多吧，其实我也不知道写这些干嘛……
