SDWEBImage和collectionView的组合，以及collectionView的随意间距设置

时间：2024-12-27 11:03:14
#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(, ); //头部尺寸

    layout.footerReferenceSize = CGSizeMake(, ); //尾部尺寸

    // 缩进：和屏幕上下以及相对于屏幕的左右间距（上左下右）：左右会影响到竖直间距

    // 默认是10：终于可以改变了

    layout.sectionInset = UIEdgeInsetsMake(, , , );

    // 设置图片的尺寸

    //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-, WID/4.0-);

    // 前提minimumInteritemSpacing为0（默认为10）

    layout.minimumInteritemSpacing = ;

    // 行间距（竖直模式）

    layout.minimumLineSpacing = ;

    // 设置页眉和页脚是否一直存在

    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(, );

}

#pragma - UICollectionViewDataSource

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

    return ;

}

- (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(, , , );

        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 = ;

        lbl.textAlignment = NSTextAlignmentCenter;

        lbl.frame = CGRectMake((WID-)/, , , );

        lbl.font = [UIFont systemFontOfSize:];

        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:];

        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

相关文章