美女图片采集器 (源码+解析)

前言:

有一段时间没写博客了, "持之以恒"徽章都暗了, 实在不该。 前一段确实比较忙, ...小小地给自己的懒找个借口吧。 大二即将结束, 学习iOS也有一段时间了。今天抽点时间, 开源一个前几天刚上传的App里面的一个功能, RT, 美女图片采集器。 美女.. 相信没有人不喜欢吧, 基于此, 这个小Demo应运而生。

注:

本文正在参加博客大赛。 如果觉得对你有所帮助, 还望帮忙投下票。 多谢。

投票链接:http://vote.blog.csdn.net/Article/Details?articleid=37825177 (投票按钮在最下方)

效果演示:

看到这里, 如果还有兴趣学习的话, 可以先到我的git中下载源码, 然后配合着源码看我下面的解析。相信, 会让你有所收获的。

git下载链接:BeautyPickDemo.git

涉及内容:

1. 百度图片API的使用
2. JSON格式数据解析
3. 图片异步下载 + 离线缓存
4. 图片基本操作(缩放, 删除, 添加, 保存到本地)
5. 下拉刷新, 上提加载
6. 幻灯片放映
7. 自定义后台显示图片

源码解析:

一。百度图片API的使用

首先, 我们知道百度是没有对外开放图片API的, 但是我们可以通过谷歌浏览器来捕捉到访问过程中它调用的API。有兴趣的, 可以了解下谷歌浏览器Network选项的使用, 也可以参考下这篇文章:百度图片api

这里, 我们主要介绍如何使用即可。

1.百度图片通用API:

http://image.baidu.com/i?tn=resultjsonavstar&ie=utf-8&word=刘德华&pn=0&rn=60
说明：
返回格式为json
word为查询的内容
pn为第几页
rn为一页返回的图片数量
用法：大家在浏览器地址栏输入上述地址，回车即可看到返回的图片地址

2.百度图片分类API (我们使用的就是这个)

http://image.baidu.com/channel/listjson?pn=0&rn=30&tag1=美女&tag2=全部&ie=utf8
http://image.baidu.com/channel/listjson?pn=0&rn=30&tag1=美女&tag2=全部&ftags=校花&ie=utf8

至于其他的, 依照这个方法都能获取到. 就不重复说明了。

至于如何调用API, 涉及到网络编程。

开源的ASI类库做的比较好(虽然挺老的一个东西了, 也有一段时间没更新了, 但是能满足我们需求)。

从源码中, 可以找到 网络请求ASI文件夹，里面有需要的文件

1。导入这里的文件

2。导入必须的框架, 包括:

SystemConfiguration.framework
MobileCoreServices.framework
CFNetwork.framework
libz.dylib

3。调用API (参见 主界面-->picVC)

[objc]view plaincopy

1. @property(nonatomic,strong)ASIHTTPRequest*testRequest;

[objc]view plaincopy

1. NSString*urlString=[NSStringstringWithFormat:@"http://image.baidu.com/channel/listjson?pn=%d&rn=10&tag1=美女&tag2=%@",nowPage,[chooseArrobjectAtIndex:nowChoose]];
3. urlString=[urlStringstringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
4. NSURL*url=[NSURLURLWithString:urlString];
5. testRequest=[ASIHTTPRequestrequestWithURL:url];
6. [testRequestsetDelegate:self];
7. [testRequeststartAsynchronous];

即可正常调用API。至于如何处理返回的数据, 下面再详细讲。

二。JSON格式数据解析

一般的数据格式有XML和JSON, 这里因为调用百度图片API返回的数据格式是JSON, 所以我们只要解析JSON即可。

调用API成功后, 它会自动执行这个函数

[objc]view plaincopy

1. #pragmamark-加载数据完毕
2. -(void)requestFinished:(ASIHTTPRequest*)request

我们只需要在这里解析数据, 使用数据即可。

这个方法返回的数据是二进制格式的NSData, 我们需要手动转为UTF8编码。可以这样获取:

[objc]view plaincopy

1. //当以二进制读取返回内容时用这个方法
2. NSData*responseData=[requestresponseData];
3. NSString*responseString=[[NSStringalloc]initWithData:responseDataencoding:NSUTF8StringEncoding];

接下去就是神奇的时候了, 对于这样的一个字符串, 如果直接打印, 你可能会看得云里雾里的, json格式并且没有重新排列。

但是我们可以使用JsonKit来直接解析。(文件在json解析文件夹中)

只需这样一条语句即可:

[objc]view plaincopy

1. self.testDic=[responseStringobjectFromJSONString];

打印解析后的数据如下:

至于需要哪些, 直接取就好了。比如. 我们这里需要获取到图片的标题. url, 宽度, 高度

[objc]view plaincopy

1. NSMutableDictionary*nowDic=[[NSMutableDictionaryalloc]init];
2. [nowDicsetObject:[[arrayobjectAtIndex:i]objectForKey:@"image_url"]forKey:@"image_url"];
3. [nowDicsetObject:[[arrayobjectAtIndex:i]objectForKey:@"image_width"]forKey:@"image_width"];
4. [nowDicsetObject:[[arrayobjectAtIndex:i]objectForKey:@"image_height"]forKey:@"image_height"];
5. [nowDicsetObject:[[arrayobjectAtIndex:i]objectForKey:@"desc"]forKey:@"desc"];
7. [picArrayaddObject:nowDic];

三。图片异步下载+离线缓存

这里提一下SDWebImage, 我们将会使用它来实现。 具体使用参见:SDWebImage 笔记

在解析完json数据后, 我们会获取到图片对应的url。

我们可以通过访问url获取图片。

[objc]view plaincopy

1. -(void)setImageWithURL:(NSURL*)urlplaceholderImage:(UIImage*)placeholder;

这是SDWebImage给我们提供的一个函数. 通过调用它, 我们可以实现异步下载和离线缓存。

使用方法:

[objc]view plaincopy

1. UIImageView*imageView=[[UIImageViewalloc]initWithFrame:CGRectMake(SPACE/2,SPACE/2,width,height)];
2. NSURL*url=[NSURLURLWithString:imageInfo.thumbURL];
3. [imageViewsetImageWithURL:urlplaceholderImage:nil];
4. imageView.backgroundColor=[UIColorpalePurpleColor];
5. [selfaddSubview:imageView];

异步下载,离线缓存效果:(离线缓存可以到应用沙盒中查看)

四。图片基本操作(缩放, 删除, 添加, 保存到本地)

这里涉及的主要是一些常规操作, 包括缩放, 删除, 添加, 保存到本地等。

至于删除, 一般是长按删除, 只要在图片上加上长按手势响应即可。然后弹出一个对话框, 提示用户是否删除。确定删除后, 从沙盒中清除缓存即可。

添加手势方法:

[objc]view plaincopy

1. //长按
2. UILongPressGestureRecognizer*longRecognizer;
3. longRecognizer=[[UILongPressGestureRecognizeralloc]initWithTarget:selfaction:@selector(handleSingleLongFrom:)];
4. [selfaddGestureRecognizer:longRecognizer];

从视图和沙盒中删除

[objc]view plaincopy

1. //从当前视图中删除
2. [testArrremoveObject:data];
3. //刷新数据
4. __weakpicVC*blockSelf=self;
5. [blockSelf.waterViewrefreshView:testArr];
6. [blockSelf.waterView.infiniteScrollingViewstopAnimating];
8. //从沙盒中删除
9. //打开沙盒
10. NSArray*paths=NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES);
11. NSString*documentsDirectory=[pathsobjectAtIndex:0];
12. NSString*namePath=[documentsDirectorystringByAppendingPathComponent:[NSStringstringWithFormat:@"savedPicInfo_%d.plist",nowChoose]];
13. NSMutableArray*picArray=[[NSMutableArrayalloc]initWithContentsOfFile:namePath];
15. for(inti=0;i<[picArraycount];i++)
16. {
17. if([[[picArrayobjectAtIndex:i]objectForKey:@"image_url"]isEqualToString:data.thumbURL])
18. {
19. [picArrayremoveObjectAtIndex:i];
20. break;
21. }
22. }
23. [picArraywriteToFile:namePathatomically:YES];

至于缩放, 首先要弹出一个全屏显示的视图。

像这样:

[objc]view plaincopy

1. //单击,显示大图
2. -(void)showImage:(ImageInfo*)data
3. {
4. NSURL*url=[NSURLURLWithString:data.thumbURL];
5. [clickImagesetImageWithURL:urlplaceholderImage:nil];
6. TGRImageViewController*viewController=[[TGRImageViewControlleralloc]initWithImage:clickImage.imagesetImageInfo:data];
7. viewController.transitioningDelegate=self;
8. [selfpresentViewController:viewControlleranimated:YEScompletion:nil];
9. }

本质就是调用presentViewController:viewController。

当然，我们可以给新视图的显示加上动画效果, 如下:

[objc]view plaincopy

1. #pragmamark-UIViewControllerTransitioningDelegatemethods
2. -(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController*)presentedpresentingController:(UIViewController*)presentingsourceController:(UIViewController*)source
3. {
4. if([presentedisKindOfClass:TGRImageViewController.class]){
5. return[[TGRImageZoomAnimationControlleralloc]initWithReferenceImageView:clickImage];
6. }
7. returnnil;
8. }
10. -(id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController*)dismissed{
11. if([dismissedisKindOfClass:TGRImageViewController.class]){
12. return[[TGRImageZoomAnimationControlleralloc]initWithReferenceImageView:clickImage];
13. }
14. returnnil;
15. }

然后, 在新视图中, 添加点击移除, 长按弹出新操作, 双指移动缩放手势即可。

具体实现如下:

[objc]view plaincopy

1. #pragmamark-Privatemethods
3. -(void)longPress:(UITapGestureRecognizer*)tapGestureRecognizer
4. {
6. if(tapGestureRecognizer.state==UIGestureRecognizerStateBegan)
7. {
8. [selfpopupActionSheet];
9. }
10. }
12. -(IBAction)handleSingleTap:(UITapGestureRecognizer*)tapGestureRecognizer{
13. [selfdismissViewControllerAnimated:YEScompletion:nil];
14. }
16. -(IBAction)handleDoubleTap:(UITapGestureRecognizer*)tapGestureRecognizer{
17. if(self.scrollView.zoomScale==self.scrollView.minimumZoomScale){
18. //Zoomin
19. CGPointcenter=[tapGestureRecognizerlocationInView:self.scrollView];
20. CGSizesize=CGSizeMake(self.scrollView.bounds.size.width/self.scrollView.maximumZoomScale,
21. self.scrollView.bounds.size.height/self.scrollView.maximumZoomScale);
22. CGRectrect=CGRectMake(center.x-(size.width/2.0),center.y-(size.height/2.0),size.width,size.height);
23. [self.scrollViewzoomToRect:rectanimated:YES];
24. }
25. else{
26. //Zoomout
27. [self.scrollViewzoomToRect:self.scrollView.boundsanimated:YES];
28. }
29. }

五。下拉刷新, 上提加载

这个功能具体在浏览图片的时候使用。 代码在picVC中。

但是因为我之前专门写过一篇这样的博客。 就不再重复了。

详细可以看这里:iOS开发-ios7下拉刷新,上提加载快速集成

六。幻灯片放映

顾名思义, 就是能够自动播放收藏过的美女图片..

这里的原理是利用UIView的动画, 不断切换显示图片和显示效果。

切换效果如下:

[objc]view plaincopy

1. _transitionOptions=@[[NSNumbernumberWithInteger:UIViewAnimationOptionTransitionFlipFromLeft],
2. [NSNumbernumberWithInteger:UIViewAnimationOptionTransitionFlipFromRight],
3. [NSNumbernumberWithInteger:UIViewAnimationOptionTransitionCurlUp],
4. [NSNumbernumberWithInteger:UIViewAnimationOptionTransitionCurlDown],
5. [NSNumbernumberWithInteger:UIViewAnimationOptionTransitionCrossDissolve],
6. [NSNumbernumberWithInteger:UIViewAnimationOptionTransitionFlipFromTop],
7. [NSNumbernumberWithInteger:UIViewAnimationCurveEaseIn],
8. [NSNumbernumberWithInteger:UIViewAnimationCurveEaseOut],
9. [NSNumbernumberWithInteger:UIViewAnimationCurveLinear],
10. [NSNumbernumberWithInteger:UIViewAnimationOptionAllowAnimatedContent],
11. [NSNumbernumberWithInteger:UIViewAnimationOptionOverrideInheritedCurve],
12. [NSNumbernumberWithInteger:UIViewAnimationOptionTransitionFlipFromTop],
13. [NSNumbernumberWithInteger:UIViewAnimationOptionTransitionFlipFromBottom]];

然后切换图片的时候, 实现如下代码即可。 (具体参见PhotoStackView)

[objc]view plaincopy

1. -(void)reloadData{
3. if(!self.dataSource){
4. //exitifdatasourcehasnotbeensetupyet
5. self.photoViews=nil;
6. return;
7. }
9. NSIntegernumberOfPhotos=[self.dataSourcenumberOfPhotosInPhotoStackView:self];
10. NSIntegertopPhotoIndex=[selfindexOfTopPhoto];//Keepingtrackofcurrentphoto'stopindexsothatitremainsontopifnewphotosareadded
12. if(numberOfPhotos>0){
14. NSMutableArray*photoViewsMutable=[[NSMutableArrayalloc]initWithCapacity:numberOfPhotos];
15. UIImage*borderImage=[self.borderImageresizableImageWithCapInsets:UIEdgeInsetsMake(self.borderWidth,self.borderWidth,self.borderWidth,self.borderWidth)];
17. for(NSUIntegerindex=0;index<numberOfPhotos;index++){
19. UIImage*image=[self.dataSourcephotoStackView:selfphotoForIndex:index];
20. CGSizeimageSize=image.size;
21. if([self.dataSourcerespondsToSelector:@selector(photoStackView:photoSizeForIndex:)]){
22. imageSize=[self.dataSourcephotoStackView:selfphotoSizeForIndex:index];
23. }
24. UIImageView*photoImageView=[[UIImageViewalloc]initWithFrame:(CGRect){CGPointZero,imageSize}];
25. photoImageView.image=image;
26. UIView*view=[[UIViewalloc]initWithFrame:photoImageView.frame];
27. view.layer.rasterizationScale=[[UIScreenmainScreen]scale];
28. view.layer.shouldRasterize=YES;//rasterizetheviewforfasterdrawingandsmoothedges
30. if(self.showBorder){
32. //Addthebackgroundimage
33. if(borderImage){
34. //Ifthereisaborderimage,weneedtoaddabackgroundimageview,andaddsomepaddingaroundthephotofortheborder
36. CGRectphotoFrame=photoImageView.frame;
37. photoFrame.origin=CGPointMake(self.borderWidth,self.borderWidth);
38. photoImageView.frame=photoFrame;
40. view.frame=CGRectMake(0,0,photoImageView.frame.size.width+(self.borderWidth*2),photoImageView.frame.size.height+(self.borderWidth*2));
41. UIImageView*backgroundImageView=[[UIImageViewalloc]initWithFrame:view.frame];
42. backgroundImageView.image=borderImage;
44. [viewaddSubview:backgroundImageView];
45. }else{
46. //ifthereisnoboarderimagedrawonewiththeCALayer
47. view.layer.borderWidth=self.borderWidth;
48. view.layer.borderColor=[[UIColorwhiteColor]CGColor];
49. view.layer.shadowOffset=CGSizeMake(0,0);
50. view.layer.shadowOpacity=0.5;
51. }
52. }
54. [viewaddSubview:photoImageView];
56. view.tag=index;
57. view.center=CGPointMake(CGRectGetMidX(self.bounds),CGRectGetMidY(self.bounds));
59. [photoViewsMutableaddObject:view];
61. }
63. //PhotoviewsareaddedtosubviewinthephotoViewsetter
64. self.photoViews=photoViewsMutable;photoViewsMutable=nil;
65. [selfgoToPhotoAtIndex:topPhotoIndex];
67. }
69. }

七。自定义后台显示图片

这个功能就是演示效果里面, 当应用切换到后台后， 我们双击home键后显示后台程序时候, 该应用的显示效果。

比如.. 有时候我们浏览的图片尺度比较大.. 然后切到后台的时候, 就希望把它隐藏起来..

这就涉及到了Background Fetch的应用。

之前也写过一篇博客专门介绍。 这里就不重复了。

具体参见:iOS开发-自定义后台显示图片(iOS7-Background Fetch的应用)

好了。 到这里终于是介绍的差不多了。

当然。 我这里的解析都比较概括， 列举的都是几个关键代码段。

更加详细的还是需要自己去看代码。 注释也写了, 估计没什么问题。 如果有问题, 欢迎联系我。

一口气写了3个小时的博客... 累的够呛的。也希望, 能对你有所帮助。

本文正在参加博客大赛。 如果觉得对你有所帮助, 还望帮忙投下票。 多谢。

投票链接:http://vote.blog.csdn.net/Article/Details?articleid=37825177 (投票按钮在最下方)