2、跑马灯效果－获取网络图片并缓存到本地

之前跑马灯效果里面的图片都是直接用本地的，但是我们的大Boss想把它做成图片可以替换的效果。这真是个不幸的消息，我只想说，亲爱滴大BOSS你可知道就因为你这一句话，我就要把之前的代码全部给扔掉，然后重新写。或许你觉得不就是把本地图片换成网络的么！有什么难的噻。不过我也没说实现不了，只是有点小麻烦，因为项目急，害的我因为这个东东周末还加了一下午班。好吧，我们进入正题，一起来分析怎么来实现这个纠结的需求吧～～～

一、需求

1、实现跑马灯图片＋文字的效果；

2、图片从网络取，要求缓存到本地；(每次从网络取，加载太慢，影响用户体验)

3、当网络图片没有加载时、显示一张默认的图片；

4、当网络图片缓存完毕后，及时刷新界面；

二、功能实现

1、分析思路

     整个过程的难点在于将网络图片缓存和及时刷新界面，我采取的方案是把网络图片缓存在本地的plist文件中，写了一个通知，当网络图片下载完之后，通知刷新界面。虽然说起来挺简单的，但是敲起代码来，还是要费点神滴。好吧，我知道你已经迫不及待想看源码了，那我就把代码都贴出来，一起来分享，呵呵～～～

2、头文件(.h)中是这样滴：

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UIScrollViewDelegate>

@property (nonatomic, retain) NSMutableArray *arrDownNesImage;
@property (retain, nonatomic) NSMutableArray *arrTitle;
@property (retain, nonatomic) NSMutableArray *arrImage;
@property (retain, nonatomic) NSMutableArray *arrImageUrl;

@property (retain, nonatomic) UIScrollView *scr;
@property (retain, nonatomic) UIPageControl *pageControl;
@property (retain, nonatomic) UITableView *tableView;
@property (nonatomic, assign) NSInteger downCount;

</pre><p><span style="font-size:14px">3、源文件(.m)中是这样滴：</span></p><p><span style="font-size:14px"></span></p><pre name="code" class="objc">#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
@synthesize scr;
@synthesize pageControl;
@synthesize arrTitle,arrImage;
@synthesize tableView;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(didFinishGetNewsImage:) name:@"ReflushHomeView" object:nil]; //网络图片下载完之后，刷新
    
    [NSTimer scheduledTimerWithTimeInterval:5.0f target:self selector:@selector(timeTurnPage) userInfo:nil repeats:YES]; //启用定时器
    
    arrTitle = [[NSMutableArray alloc]initWithObjects:@"这是第1张图片",@"这是第2张图片",@"这是第3张图片", nil];
    arrImage = [[NSMutableArray alloc]initWithObjects:@"http://rogers.stag.informx.ca/images/201502020006507977.png",@"http://rogers.stag.informx.ca/images/201502020106389384.png",@"http://rogers.stag.informx.ca/images/201502020206257354.png", nil];
    
    [self initScrollViewAndPageControl];
}

-(void)initScrollViewAndPageControl {
    
    //初始化一个 scrollview
    scr = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 250)];
    scr.delegate = self;
    scr.showsHorizontalScrollIndicator = NO;
    scr.showsVerticalScrollIndicator = NO;
    scr.pagingEnabled = YES;
    scr.backgroundColor = [UIColor clearColor];
    [self.view addSubview:scr];
    
    //初始化一个 pageControl
    pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(self.view.frame.size.width-100, scr.frame.size.height-20, 100, 20)];
    pageControl.currentPage = 0;
    pageControl.numberOfPages = arrImage.count;
    pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
    pageControl.pageIndicatorTintColor = [UIColor grayColor];
    [self.view addSubview:pageControl];
    
    [self paoMaDeng]; //调用实现跑马等的方法
}


//实现跑马灯的方法
- (void)paoMaDeng {
    
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString * path = [paths objectAtIndex:0];
    NSString *Files = @"HomeNewsImages";
    NSFileManager * fm = [NSFileManager defaultManager];
    NSString *filePath =[NSString stringWithFormat:@"%@/%@",path,Files];
    NSArray *arr = [fm subpathsAtPath:filePath];
    
    //如果网络图片还没有下载到本地，则显示一张默认的图片
    if (arr.count ==0) {
        UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 20, scr.frame.size.width, scr.frame.size.height)];
        imgView.image = [UIImage imageNamed:@"home_news_default.jpg"];
        [scr addSubview:imgView];
    }

    for (int i=0; i<arrImage.count; i++) {
        
        UIView *view = [[UIView alloc] initWithFrame:CGRectMake(scr.frame.size.width*(i+1), 0, scr.frame.size.width, scr.frame.size.height)];
        [scr addSubview:view];
        
        UIImageView *titleBg = [[UIImageView alloc]initWithFrame:CGRectMake(0, scr.frame.size.height-20, scr.frame.size.width, 20)];
        titleBg.backgroundColor = [UIColor colorWithRed:77/255.0 green:77/255.0 blue:77/255.0 alpha:0.5];
        [view addSubview:titleBg];
        
        UILabel *title = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, scr.frame.size.width, 20)];
        title.text = [arrTitle objectAtIndex:i];
        title.textColor = [UIColor whiteColor];
        title.textAlignment = NSTextAlignmentLeft;
        [titleBg addSubview:title];

        UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 10, scr.frame.size.width, scr.frame.size.height-30)];
        NSString *strUrl = [arrImage objectAtIndex:i];
        UIImage *picImage = [self saveImageToPlist:strUrl];
        imgView.image = picImage;
        [view addSubview:imgView];
    }
    
    //创建序号为0的view 取数组第一张图片
    
    UIView *viewFirst = [[UIView alloc]initWithFrame:CGRectMake(0, 0, scr.frame.size.width, scr.frame.size.height)];
    [scr addSubview:viewFirst];
    
    UIImageView *titleBg = [[UIImageView alloc]initWithFrame:CGRectMake(0, scr.frame.size.height-20, scr.frame.size.width, 20)];
    titleBg.backgroundColor = [UIColor colorWithRed:77/255.0 green:77/255.0 blue:77/255.0 alpha:0.5];
    
    [viewFirst addSubview:titleBg];
    
    UILabel *title = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, scr.frame.size.width, 20)];
    title.text = [arrTitle objectAtIndex:0];
    title.textAlignment = NSTextAlignmentLeft;
    title.textColor = [UIColor whiteColor];
    [titleBg addSubview:title];

    
    UIImageView *imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 10, scr.frame.size.width, scr.frame.size.height-30)];
    NSString *strUrl = [arrImage objectAtIndex:0];
    UIImage *picImage = [self saveImageToPlist:strUrl];
    imgView.image = picImage;
    [viewFirst addSubview:imgView];
    
    
    //创建序号为 数组＋1 的view 取数组最后一张图片
    
    UIView *viewEnd = [[UIView alloc]initWithFrame:CGRectMake((arrImage.count+1)*scr.frame.size.width, 0, scr.frame.size.width, scr.frame.size.height)];
    
    [scr addSubview:viewEnd];
    
    UIImageView *titleBgEnd = [[UIImageView alloc]initWithFrame:CGRectMake(0, scr.frame.size.height-20, scr.frame.size.width, 20)];
    titleBgEnd.backgroundColor = [UIColor colorWithRed:77/255.0 green:77/255.0 blue:77/255.0 alpha:0.5];
    [viewEnd addSubview:titleBgEnd];
    
    UILabel *titleEnd = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, scr.frame.size.width, 20)];
    titleEnd.text = [arrTitle objectAtIndex:arrTitle.count-1];
    titleEnd.textColor = [UIColor whiteColor];
    titleEnd.textAlignment = NSTextAlignmentLeft;
    [titleBgEnd addSubview:titleEnd];
    
    UIImageView *imgViewEnd = [[UIImageView alloc]initWithFrame:CGRectMake(0, 10, scr.frame.size.width, scr.frame.size.height-30)];
    NSString *strUrlEnd = [arrImage objectAtIndex:arrImage.count-1];
    UIImage *picImageEnd = [self saveImageToPlist:strUrlEnd];
    imgViewEnd.image = picImageEnd;
    [viewEnd addSubview:imgViewEnd];

    
    [scr setContentSize:CGSizeMake(scr.frame.size.width*([arrImage count]+2), scr.frame.size.height)];
    [scr scrollRectToVisible:CGRectMake(scr.frame.size.width, 0, scr.frame.size.width, scr.frame.size.height) animated:YES];
}

// scrollview 委托函数
- (void)scrollViewDidScroll:(UIScrollView *)sender
{
    int page = scr.contentOffset.x/scr.frame.size.width;
    
    page --;  // 默认从第二页开始
    pageControl.currentPage = page;
}

// scrollview 委托函数
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    int currentPage = scr.contentOffset.x/scr.frame.size.width;
    
    if (currentPage==0)
    {
        [scr scrollRectToVisible:CGRectMake(scr.frame.size.width * [arrImage count],0,scr.frame.size.width,scr.frame.size.height) animated:NO]; // 序号0 最后1页
        
    }
    else if (currentPage==([arrImage count]+1))
        
    {
        // 最后+1,循环第1页
        [scr scrollRectToVisible:CGRectMake(scr.frame.size.width,0,scr.frame.size.width,scr.frame.size.height) animated:NO];
        
        
    }
}


//将图片存入plist文件中
- (UIImage*)saveImageToPlist:(NSString*)strImgUrl {
    
    //将图片路径转化为数组
    NSArray *imageArr = [strImgUrl componentsSeparatedByString:@"/"];
    NSString *strImgName = [imageArr objectAtIndex:imageArr.count-1];
    
    NSLog(@"%@",strImgName);
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
    NSString * path = [paths objectAtIndex:0];
    NSString *Files = @"HomeNewsImages";
    NSFileManager * fm = [NSFileManager defaultManager];
    NSString *filePath =[NSString stringWithFormat:@"%@/%@",path,Files];
    
    if (![fm fileExistsAtPath:filePath]) {
        [fm createDirectoryAtPath:filePath withIntermediateDirectories:YES attributes:nil error:nil];
    }
    NSString *docDir = [filePath stringByAppendingPathComponent:strImgName];
    
    //判断图片是否已缓存
    if (![fm fileExistsAtPath:docDir]) {
        if (_arrDownNesImage==nil) {
            [self setArrDownNesImage:[NSMutableArray array]];
        }
        BOOL isExist = NO;
        for (NSString *downUrl in _arrDownNesImage) {
            if ([downUrl isEqualToString:strImgUrl]) {
                isExist = YES;
            }
        }
        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            if (!isExist) {
                
                [_arrDownNesImage addObject:strImgUrl];
                NSURL *urlImg = [NSURL URLWithString:strImgUrl];
                NSData *dataImg = [NSData dataWithContentsOfURL:urlImg];
                [dataImg writeToFile:docDir atomically:YES];
                [[NSNotificationCenter defaultCenter] postNotificationName:@"ReflushHomeView" object:nil];
            }
        });
    }
    
    UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfFile:docDir]];
    if (img==nil) {
        img = [UIImage imageNamed:@"home_news_default.jpg"];
        
    }
    return img;
}

-(void)didFinishGetNewsImage:(NSNotification *)not {
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        @synchronized(self) {
            _downCount++;
            if (_downCount>=[_arrDownNesImage count]) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    //[tableView reloadData];
                    [self paoMaDeng];

                });
            }
        }
    });
    
}

//定时器方法
- (void)timeTurnPage {
    int currentPage = scr.contentOffset.x /scr.frame.size.width;
    currentPage ++;
    
    if (currentPage > arrImage.count)
    {
        currentPage = 0;
        [scr scrollRectToVisible:CGRectMake(scr.frame.size.width*currentPage, 0, scr.frame.size.width, scr.frame.size.height) animated:NO];
    }else {
        [scr scrollRectToVisible:CGRectMake(scr.frame.size.width*currentPage, 0, scr.frame.size.width, scr.frame.size.height) animated:YES];
    }
    
    pageControl.currentPage = currentPage;
}



@end

4、效果图

由于下载网络图片需要时间，所以第一次进来的时候，你看到会是默认的图片，如下图：

当网络图片全部缓存到本地之后，就会自动刷新界面，然后界面就变成了这个样子，有木有很屌啊？？？

OK，虽然这个需求有的小纠结，但是还是搞定了。

源码下载地址：http://download.csdn.net/detail/u010545480/8426107