UICollectionView 集合视图的使用

集合视图的概念

如何创建UICollectionView

集合视图的布局UICollectionViewFlowLayout

自定义cell

布局协议UICollectionViewDelegateFlowLayout

 

UICollectionView与UITableView的实现类似，都需要设置delegate和dataSource

在collectionView中，cell的布局比tableView要复杂，需要使用一个类来描述集合视图的布局---UICollectionViewLayout->UICollectionViewFlowLayout

 

创建步骤

1.使用系统布局UICollectionViewFlowLayout

 

2.创建UICollectionView

3.设置代理，设置数据源

4.设置自定义Cell

在 collectionView.m 中

#import "ViewController.h"

#import "CustViewCell.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

 @end

 @implementation ViewController

 // 定义cell重用标示符

static NSString *const cellReuseIdentifier=@"systemID";

 // 自定义cell的重用标识符

static NSString *const customCellID=@"customID";

 //定义增补视图重用标识符

static NSString *const headerID = @"header";

 static NSString *const footerID = @"footer";

 - (void)viewDidLoad {

    [super viewDidLoad];

    // 使用系统的布局方式

    UICollectionViewFlowLayout *flowLayout =[[UICollectionViewFlowLayout alloc]init];

// 设置item的大小

    flowLayout.itemSize=CGSizeMake(70, 70);

    //  竖向的item之间的间隔（最小间隔）

    flowLayout.minimumLineSpacing=10;

    // 横向的item之间的间隔（最小间隔）

    flowLayout.minimumInteritemSpacing=10;

     //距离上下左右的距离

    flowLayout.sectionInset=UIEdgeInsetsMake(20, 20, 20, 20);

    flowLayout.headerReferenceSize=CGSizeMake(100, 100);

    flowLayout.footerReferenceSize=CGSizeMake(100, 100);

    // 可以横向滑动

    // flowLayout.scrollDirection=UICollectionViewScrollDirectionHorizontal;

     UICollectionView *collectionView=[[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];

    collectionView .delegate=self;

    collectionView.dataSource=self;

    self.view.backgroundColor=[UIColor purpleColor];

    // 注册cell

    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellReuseIdentifier];

// 注册自定义cell

     [collectionView registerClass:[CustViewCell class] forCellWithReuseIdentifier:customCellID];

    

    // 注册增补视图

    // 区头

    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerID];

    // 区尾

    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerID];

     collectionView.backgroundColor=[UIColor yellowColor];

       [self.view addSubview:collectionView];

}

// 添加区头区尾

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

//区头

   UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerID forIndexPath:indexPath];

     header.backgroundColor=[UIColor redColor];

// 区尾

    UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:footerID forIndexPath:indexPath];

      footer.backgroundColor=[UIColor greenColor];

// 判断区头区尾的出现

    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

        return header;

    }

    

    return footer;

    }

 

// 分区的个数

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

    return 2;

}

 // 分区中cell 的个数

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return 700;

}

 cell 中的内容

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    

   CustViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:customCellID forIndexPath:indexPath];

    //cell.backgroundColor=[UIColor orangeColor];

    // 使cell 上五颜六色

       CGFloat red=arc4random()%230/255.0;

    CGFloat green=arc4random()%100/255.0;

    CGFloat blue=arc4random()%100/255.0;

    UIColor *randomColor=[UIColor colorWithRed:red green:green blue:blue alpha:1.0];

    

   

   cell.layer.cornerRadius = cell.frame.size.width/2;

    cell.clipsToBounds = YES;

    

    cell.backgroundColor=randomColor;

    

//    if (indexPath.item % 2 == 0) {

//        cell.imgView.image=[UIImage imageNamed:@"1.jpg"];

//    }else{

//        cell.imgView.image=[UIImage imageNamed:@"2.jpg"];

//    }

    

    

    return cell;

    

}

 // 实现奇数cell 和偶数cell上的大小不同

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{

    if (indexPath.item % 2 ==0) {

        return CGSizeMake(30 ,30);

    }

    return CGSizeMake(20, 20);

}

#################################

// 自定义cell

cell 的延展中

#import "CustViewCell.h"

 

@implementation CustViewCell

// 实例变量的初始化

- (instancetype)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        

        [self addAllView];

    }

    return self;

}

 

-(void)addAllView{

    [self.contentView addSubview:self.imgView];

    

}

// 懒加载

-(UIImageView *)imgView{

    if (nil == _imgView) {

        _imgView=[[UIImageView alloc]initWithFrame:self.bounds];

        

        //_imgView.backgroundColor=[UIColor magentaColor];

        

       // _imgView.image=[UIImage imageNamed:@"1.jpg"];

        

    }

    return _imgView;

}

 

 

// 重写视图布局方法

// collectionView 向重用池取出cell的时候，因为cell 的尺寸不一致，无法判定取出cell的尺寸是否正确（同种cell同一个重用标识符导致的现象），重用layoutsubViews 可以在每次绘制cell 的时候，将当前collectionView的尺寸重新赋值给cell，保证cell 尺寸绘制正确

- (void)layoutSubviews{

    [super layoutSubviews];

    

    _imgView.frame = self.contentView.frame;

  

}

 

总结：

集合视图UICollectionView和表示图UITableView很相似，可根据layout属性设置，显示单元格集合内容

UICollectionViewDataSource类作为集合视图的数据源，向集合视图提供数据。集合视图依赖于委托（Delegate）中定义的方法对用户进行响应