iOS SDWEBImage和collectionView的組合，以及collectionView的隨意間距設置

轉發自 http://www.cnblogs.com/pruple/p/5357150.html

 

#import "ViewController.h"
#import <ImageIO/ImageIO.h>
#import "UIImageView+WebCache.h"

@interface ViewController ()<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout>
// 數據源
@property (nonatomic, strong)NSMutableArray *arrIcon;
// 顯示控件
@property (nonatomic, strong)UICollectionView *clv;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 獲取數據源寫成，url寫成plist文件
    /*
    [[NSArray arrayWithObjects:
     @"http://image.tianjimedia.com/uploadImages/2012/273/M6J97CZGYA4Z_NatGeo01_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/J3ME8ZNAG315_NatGeo02_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/EL9230AP5196_NatGeo03_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/SYJ43SG47PC8_NatGeo04_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/605X52620G0M_NatGeo05_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/7H5RQ1ELP8MZ_NatGeo06_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/Z2W429E0203R_NatGeo07_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/BG011W9LWL77_NatGeo08_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/936FM8NN22J2_NatGeo09_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/H79633PPEFZW_NatGeo10_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/54Z01YZ78050_NatGeo11_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/61V3658UA4IY_NatGeo12_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/H3HL7YILNGKB_NatGeo13_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/1V6797311ZA5_NatGeo14_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/93L81IKN156R_NatGeo15_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/V93E1EGU2G0Z_NatGeo16_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/QC205CD96IWZ_NatGeo17_250.jpg",@"http://image.tianjimedia.com/uploadImages/2012/273/M6J97CZGYA4Z_NatGeo01_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/J3ME8ZNAG315_NatGeo02_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/EL9230AP5196_NatGeo03_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/SYJ43SG47PC8_NatGeo04_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/605X52620G0M_NatGeo05_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/7H5RQ1ELP8MZ_NatGeo06_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/Z2W429E0203R_NatGeo07_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/BG011W9LWL77_NatGeo08_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/936FM8NN22J2_NatGeo09_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/H79633PPEFZW_NatGeo10_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/54Z01YZ78050_NatGeo11_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/61V3658UA4IY_NatGeo12_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/H3HL7YILNGKB_NatGeo13_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/1V6797311ZA5_NatGeo14_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/93L81IKN156R_NatGeo15_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/V93E1EGU2G0Z_NatGeo16_250.jpg",
     @"http://image.tianjimedia.com/uploadImages/2012/273/QC205CD96IWZ_NatGeo17_250.jpg",
     nil] writeToFile:@"/Users/Mu/Desktop/pic.plist" atomically:YES];
   */
    
    self.arrIcon = [NSMutableArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"pic" ofType:@"plist"]];

    // 設置滾動方向：FlowLayout簡單說是一個直線對齊的layout
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    // 滾動方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;

    // 尾部距離屏幕尺寸（豎直模式，x沒有做用）
    layout.headerReferenceSize = CGSizeMake(0, 30); //頭部尺寸
    layout.footerReferenceSize = CGSizeMake(0, 100); //尾部尺寸
    // 縮進：和屏幕上下以及相對於屏幕的左右間距（上左下右）：左右會影響到豎直間距
    // 默認是10：終於能夠改變了
    layout.sectionInset = UIEdgeInsetsMake(1, 0, 1, 0);
    // 設置圖片的尺寸
    //layout.itemSize = CGSizeMake(WID/4.0-1, WID/4.0-1);
    //layout.itemSize = CGSizeMake((WID-30)/4.0, (WID-30)/4.0);
    // 目前發現：預估尺寸等效于于itemSize
    layout.estimatedItemSize = CGSizeMake(WID/4.0-1, WID/4.0-1);
    // 前提minimumInteritemSpacing爲0（默認爲10）
    layout.minimumInteritemSpacing = 0;
    // 行間距（豎直模式）
    layout.minimumLineSpacing = 1;
    // 設置頁眉和頁腳是否一直存在
    layout.sectionHeadersPinToVisibleBounds= NO;
    
    // 建立對象
    self.clv = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];
    // 指定代理
    self.clv.delegate = self;
    self.clv.dataSource = self;
    
    // 註冊惟一標識
    [self.clv registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"reuse"];
    [self.clv registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headReuse"];
    [self.clv registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footReuse"];
    
    // 添加到主視圖
    [self.view addSubview:self.clv];
    self.clv.backgroundColor = [UIColor whiteColor];
    
    // 設置偏移量，隱藏UISegmentedControl
    self.clv.contentOffset = CGPointMake(0, 30);
}

#pragma - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    [self.arrIcon addObject:[NSNull null]];
    [self.arrIcon addObject:[NSNull null]];
    return self.arrIcon.count;
}

// 首先是cell自己做爲容器view\
   而後是一個大小自動適應整個cell的backgroundView，用做cell平時的背景\
   再其上是selectedBackgroundView，是cell被選中時的背景\
   最後是一個contentView，自定義內容應被加在這個view上
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 重用隊列標識
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];
    
    // 第三方Image請求
    UIImageView *imv = [[UIImageView alloc] init];
    [imv sd_setImageWithURL:self.arrIcon[indexPath.row] placeholderImage:[UIImage imageNamed:@"u=2312994427,1092373000&fm=21&gp=0.jpg"] options:SDWebImageRetryFailed];
    cell.backgroundView = imv;
    
    // 選中更換背景圖_1（點擊選中即更換）
    //cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Img361868872.jpg"]];
    
    return cell;
}

// 頁眉和頁腳出現即調用；頁眉要第二次出現纔會調用
// Supplementary Views 追加視圖 若是你對UITableView比較熟悉的話，能夠理解爲每一個Section的Header或者Footer，用來標記每一個section的view
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    if (kind == UICollectionElementKindSectionHeader)
    {
        // 重用標識
        UICollectionReusableView *ppView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headReuse" forIndexPath:indexPath];
        ppView.backgroundColor = [UIColor clearColor];
        // 添加子控件
        UISegmentedControl *sgmc = [[UISegmentedControl alloc] initWithItems:@[@"名稱", @"日期", @"大小"]];
        sgmc.tintColor = [UIColor purpleColor];
        sgmc.bounds = CGRectMake(0, 0, 100, 15);
        sgmc.center = ppView.center;
        [ppView addSubview:sgmc];
        
        return ppView;
    }else
    {
        // 重用標識
        UICollectionReusableView *ppView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footReuse" forIndexPath:indexPath];
        ppView.backgroundColor = [UIColor clearColor];
        
        // 添加數量和時間
        UILabel *lbl = [[UILabel alloc] init];
        lbl.numberOfLines = 2;
        lbl.textAlignment = NSTextAlignmentCenter;
        lbl.frame = CGRectMake((WID-200)/2, 35, 200, 30);
        lbl.font = [UIFont systemFontOfSize:10];
        
        NSDate *date = [NSDate date];
        NSTimeZone *zone = [NSTimeZone systemTimeZone];
        NSInteger seconds = [zone secondsFromGMTForDate:date];
        NSDate *now = [date dateByAddingTimeInterval:seconds];
        
        // 格式化NSDate爲NSString：會自動添加28800s即等於now
        NSDateFormatter *fm = [NSDateFormatter new];
        fm.dateFormat = @"yyyy年MM月dd日HH時mm分ss秒";
        
        // 須要取子串
        NSString *time = [[fm stringFromDate:date] substringFromIndex:11];
        
        NSString *num = [NSString stringWithFormat:@"%lu張照片", self.arrIcon.count];
        lbl.text = [NSString stringWithFormat:@"%@\r\n%@", num, time];
        
        [ppView addSubview:lbl];
        NSLog(@"等效：%@；%@", now, [fm stringFromDate:date]);

        return ppView;
    }

}
// 對於Decoration Views，提供方法並不在UICollectionViewDataSource中，而是直接UICollectionViewLayout類中的(由於它僅僅是視圖相關，而與數據無關)

// 選中跟換背景圖_2（長按更換鬆開恢復）
// 須要容許爲YES，否則走發哦這裏就停了不會執行didHighlightItemAtIndexPath
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    return YES;
}
- (void)collectionView:(UICollectionView *)colView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 沒有建立新對象：使用的仍是indexPath隊列的cell
    UICollectionViewCell* cell = [colView cellForItemAtIndexPath:indexPath];
    
    cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"Img361868872.jpg"]];
}
- (void)collectionView:(UICollectionView *)collectionView didUnhighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 沒有建立新對象：使用的仍是indexPath隊列的cell
    UICollectionViewCell* cell = [collectionView cellForItemAtIndexPath:indexPath];
    
    UIImageView *imv = [[UIImageView alloc] init];
    [imv sd_setImageWithURL:self.arrIcon[indexPath.row] placeholderImage:[UIImage imageNamed:@"u=2312994427,1092373000&fm=21&gp=0.jpg"] options:SDWebImageRetryFailed];
    cell.backgroundView = imv;
    
}UIImageView *imv;
// 選中
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"%lu", indexPath.row);
}
@end