iOS基础之CollectionView(集合视图)

　　在iOS6.0之后，苹果推出了⼀个新的继承于UIScrolleriew的一个视 图，UICollectionView，也被称之为集合视图。和UITableView共同作为 在开发中常常用的两个视图，常常作为项目的主界面出现。

　　代码演示：

　　

#import "YourCollectionViewCell.h"

@implementation YourCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        //获取整体item的宽和高
        CGFloat totalWidth = frame.size.width;
        CGFloat totalHeight = frame.size.height;
        self.numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, totalWidth, totalHeight - 20)];
        self.numberLabel.textAlignment = NSTextAlignmentCenter;
        self.numberLabel.font = [UIFont boldSystemFontOfSize:36];
        [self.contentView addSubview:self.numberLabel];
        
      
        
        
    }return self;
}
@end



#import "MyCollectionReusableView.h"

@implementation MyCollectionReusableView
- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        self.headerLabel = [[UILabel alloc]initWithFrame:self.bounds];
        self.headerLabel.textAlignment = NSTextAlignmentCenter;
        self.headerLabel.font = [UIFont boldSystemFontOfSize:36];
        [self addSubview:self.headerLabel];
    }return self;
}
@end




#import "ViewController.h"
#import "YourCollectionViewCell.h"
#import "MyCollectionReusableView.h"
#define kReuse @"reuse"
#define kWidth self.view.frame.size.width
@interface ViewController ()

@end


@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    //创建一个布局对象，采用系统布局类UICollectionViewFlowLayout
 
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
    /*
    //设置最小行间距
    layout.minimumLineSpacing = 20;
    //设置item与item之间的间距
    layout.minimumInteritemSpacing = 10;
    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    //设置每一个item的尺寸
    CGFloat totalWidth = self.view.frame.size.width;
    layout.itemSize = CGSizeMake((totalWidth - 40)/3, 80);
    */
    //设置滑动方向
    layout.scrollDirection = UICollectionViewScrollDirectionVertical;
    //集合视图的创建必须指定布局，如果没有布局，显示不了任何东西
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[[UIScreen mainScreen]bounds] collectionViewLayout:layout];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    //集合视图如果想要显示内容，必须要将cell进行注册
    [collectionView registerClass:[YourCollectionViewCell class] forCellWithReuseIdentifier:kReuse];
    //集合视图如果想要分区头视图显示 ，必须注册增广视图
    [collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
    //给头视图布局
    layout.headerReferenceSize = CGSizeMake(kWidth, 40);
    
    [self.view addSubview:collectionView];
    
    
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake((kWidth - 40)/3, 80);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(0, 0, 0, 0);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 20;
}
//- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
//    return 20;
//}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}



#pragma mark -------集合视图数据源协议-------
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 15;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    YourCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kReuse forIndexPath:indexPath];
    cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random() %256 / 255.0 green:arc4random() %256 / 255.0  blue:arc4random() %256 / 255.0  alpha:1.0];
    cell.numberLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
    return cell;
}
//返回增广视图，也就是集合视图的头视图或者尾视图
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
    view.headerLabel.text = [NSString stringWithFormat:@"当前分区为:%ld",indexPath.section];
    view.backgroundColor = [UIColor yellowColor];
    return view;
}

//设置分区个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 10;
}

#pragma mark -------集合视图代理方法-----

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%ld,%ld",indexPath.section,indexPath.row);
}

@end