曾经写的(渣)天气预报项目

作者: 芙箩娅 | 来源:发表于2016-05-30 12:49 被阅读82次

曾经写的(渣)天气预报项目
iOS小项目-云知道(天气预报)
天气预报项目
iOS Status Bar 的隐藏
我爱编程，我
写曾经
谁不经历几个渣男（故事篇）
你喜欢什么样的男人？“渣男”
Java基础知识点（六）
下雪啦

整理资料发现自己当初的练手项目，稍微勾起一些并不是很美好的回忆，与项目无关，与自己当时的生活状态有关。万幸现在挺过来了。

项目效果预览.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的设备，无一不是丑到爆炸！
// 先凑合看吧……

先这么多吧，其实我也不知道写这些干嘛……