iOS中 UICollectionView UI_19

 UICollectionView 是UITableView加强版

 UITableView 和UICollectionView的设计思想：

 1.布局：

 UITableView 的布局可以由UITableView本身和UITableViewDelegate完成

 UICollectionView的布局由UICollectionLayout的子类UICollectionFlowLayout和UICollectionLayoutDelegate完成

 

 2.布局样式

 UITableView单列多行

 UICollectionView支持多行多列

 

 3.数据源：

 UITableView的数据源是UITableViewDataSource

 UICollectionView的数据源是UICollectionViewDataSource

 

 4.cell的样式

 UITableViewCell 系统提供的有四种样式

 UICollectionViewCell 只自带contentView，但是contentView什么也没有，所有你要显示图片，文字必须要自定义cell

 

 5.cell的重用

 UITableViewCell 和 UICollectionCell 都可以重用；先注册后重用

 

 6.页眉页脚

 UITableView 的页眉页脚不可以重用，但是 UICollectionView的页眉页脚是可以重用的

 

 7.编辑

 UITableView 支持编辑，添加、删除和移动

 UICollectionView 不支持编辑

 

 8.父类

 UITableView 和 UICollectionView 的父类都是UIScrollView

 但是UITableView 只能竖直方向滚动，而UICollectionView支持竖直方向和水平方向滚动

 ——————————————————————————————————————————

AppDelegate.m

   self.window.rootViewController = [[[UINavigationController alloc]initWithRootViewController:[RootViewController new]]autorelease];

=======================UICollectionView系统自带的cell============================

RootViewController.m

#import "RootViewController.h"
#import "DetailViewController.h"
#define kItem  @"item"
#define kHead @"heaad"
#define kFooter @"footer"
@interface RootViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>//遵循协议
@end

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"集合视图";
    self.view.backgroundColor = [UIColor whiteColor];
    //调用CollectionView的布局方法
     [self configureCollectionView];
}

CollectionView的布局方法：

- (void)configureCollectionView{
//    UICollectionViewLayout  是所有布局类的基类,是一个抽象的类，一般很少直接使用基类(不是视图),都是使用基类的子类,所有 UICollectionView 的布局我们要使用 UICollectionViewFlowLayout 完成
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    //1.设置Item的大小
    flowLayout.itemSize = CGSizeMake(130, 150);
    //2.设置Item的缩进量
    flowLayout.sectionInset = UIEdgeInsetsMake(5, 10, 5, 10);
    //3.设置最小行间距
    flowLayout.minimumLineSpacing = 20.0;
    //4.设置Item列间距
    flowLayout.minimumInteritemSpacing = 20.0;
    //5.设置CollectionView滚动方向
//    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;  //水平滚动
//    flowLayout.scrollDirection =  UICollectionViewScrollDirectionVertical;   //默认竖直方向滚动
    //6.设置页眉的大小
    flowLayout.headerReferenceSize = CGSizeMake(320, 40);
    //7.设置页脚的大小
    flowLayout.footerReferenceSize = CGSizeMake(320, 40);
    
    
    //创建一个UICollectionView对象
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
    //配置collectionView的背景颜色
    collectionView.backgroundColor = [UIColor greenColor];
    //指定数据源代理
    collectionView.dataSource = self;
    //注册Cell
    [collectionView registerClass:[UICollectionViewCell  class] forCellWithReuseIdentifier:kItem];
    //注册页眉和页脚
    //第一个参数：重用视图的类
    //第二个参数：重用是页眉和页脚的种类
    //第三个参数：重用的标识
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead];
    //注册页脚
    [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter];
    //设置业务代理
    collectionView.delegate = self;
    
    
    //将collectionView添加到视图控制器上
    [self.view addSubview:collectionView];
    [flowLayout release];
    [collectionView release];
    
}

#pragma mark CollectionView 的数据源代理方法

//返回每个分区Item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 20;
}
//根据indexPath 返回cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kItem forIndexPath:indexPath];
    //设置cell的颜色
    cell.backgroundColor = [UIColor redColor];
    NSLog(@"%@",NSStringFromCGRect(cell.frame));
    
    return cell;
    
}
//返回collectionView分区的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    
    return 2;
}

//返回重用的页眉页脚的方法
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
    UICollectionReusableView *view = nil;
    
    //根据种类判断要使用页眉还是页脚
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        //重用页眉
         view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHead forIndexPath:indexPath];
        //设置页眉的颜色
        view.backgroundColor = [UIColor orangeColor];
    
    }else{
        //重用页脚
        view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFooter forIndexPath:indexPath];
        //设置页脚颜色
        view.backgroundColor = [UIColor blackColor];
        
    }
    return view;
}

#pragma mark CollectionView 的业务代理方法：

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    //打印item的分区下标和item下标
    NSLog( @"%ld--%ld",indexPath.section,indexPath.item);
    
    [self.navigationController pushViewController:[DetailViewController new] animated:YES];
}

#pragma mark UICollectionViewFlowLayoutDelegate 的方法

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    if (0 == indexPath.section % 2) {
        return CGSizeMake(50, 50);
    }else{
        return CGSizeMake(130,130);
    }
    
    
}
//返回分区缩进量
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    if (0 == section % 2) {
        return UIEdgeInsetsMake(10, 10, 10, 10);
    }else{
        return UIEdgeInsetsMake(20, 20, 20, 20);
    } 
}

//返回每一行item之间的最小间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    
    return 30;
    
}
//返回item之间的最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 20;
}

//返回页眉的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(320,100);
}

//返回页脚的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    
    return CGSizeMake(320, 100);
    
}

===========================学习自定义的cell==================================

新建一个页面在这里学习自定义cell、自定义页眉和页脚：

DetailViewController.m

#import "NBViewCell.h"
#import "HeaderView.h"
#import "FooterView.h"
#define kNBcell @"nb-cell"
#define kHeadView @"head"
#define kFootView @"foot"
@interface DetailViewController ()<UICollectionViewDataSource>//遵循协议
@end

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor orangeColor];
    
    //调用配置CollectionView
    [self configureCollectionView];

}

配置CollectionView：

//配置CollectionView
- (void)configureCollectionView{
    //创建布局类
    UICollectionViewFlowLayout *flowout = [[UICollectionViewFlowLayout alloc]init];
    //设置item的大小
    flowout.itemSize = CGSizeMake(90, 90);
    //设置页眉的大小
    flowout.headerReferenceSize =CGSizeMake(320, 100);
    //设置页脚的大小
    flowout.footerReferenceSize = CGSizeMake(320, 80);
    //设置分区缩进量
    flowout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);
    
    
    //创建CollectionView对象
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowout];
    //配置数据源代理
    collectionView.dataSource = self;
    //注册cell
    [collectionView registerClass:[NBViewCell class] forCellWithReuseIdentifier:kNBcell];
    //注册页眉
    [collectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView];
    //注册页脚
    [collectionView registerClass:[FooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView];
    //配置背景颜色
    collectionView.backgroundColor = [UIColor whiteColor];
    
    
    
    //添加到父视图
    [self.view addSubview:collectionView];
    [collectionView release];
    [flowout release];

}

#pragma mark 数据源代理方法：

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 100;
}
//
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    NBViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kNBcell forIndexPath:indexPath];
    
    cell.label.text = [NSString stringWithFormat:@"%ld--%ld",indexPath.section,indexPath.item];
    return cell;
    
    
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 2;
}

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
  //重用页眉
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
        HeaderView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kHeadView forIndexPath:indexPath];
        view.photoView.image = [UIImage imageNamed:@"2"];
        return view;
    }else{
        //重用页脚
        FooterView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kFootView forIndexPath:indexPath];
        view.footerLabel.text = [NSString stringWithFormat:@"第%ld个分区",indexPath.section];
        return view;
    }
    
}

准备一个自定义cell：

NBViewCell.h

@interface NBViewCell : UICollectionViewCell
@property(nonatomic,retain)UILabel *label;
@end

NBViewCell.m

@implementation NBViewCell
- (void)dealloc
{
    self.label = nil;
    [super dealloc ];
}
//重写初始化方法
- (id)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
     
        [self.contentView addSubview:self.label];
        
    }
    return self;
}

- (UILabel *)label{
    
    if (_label == nil) {
        self.label = [[UILabel alloc]initWithFrame:self.bounds];
        self.label.textAlignment = NSTextAlignmentCenter;
        self.label.backgroundColor = [UIColor cyanColor];
        
    }
    return [[_label retain]autorelease];
}
@end

准备一个自定义页眉：

实现页眉显示图片

HeaderView.h

@interface HeaderView : UICollectionReusableView
@property(nonatomic,retain)UIImageView *photoView;
@end

HeaderView.m

@implementation HeaderView
- (void)dealloc
{
    self.photoView = nil;
    [super dealloc];
}

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        
        [self addSubview:self.photoView];    
    }
    return self;
}

- (UIImageView *)photoView{
    if (_photoView == nil) {
        self.photoView = [[UIImageView alloc]initWithFrame:self.bounds];
//        self.photoView.image = [UIImage imageNamed:@"a.jpg"];
        self.photoView.backgroundColor = [UIColor yellowColor];
    }
    
    return [[_photoView retain]autorelease]; 
}
@end

准备一个自定义页脚：

实现页脚显示分区

FooterView.h

@interface FooterView : UICollectionReusableView
@property(nonatomic,retain)UILabel *footerLabel;
@end

FooterView.m

@implementation FooterView
- (void)dealloc
{
    self.footerLabel = nil;
    [super dealloc];
}

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        
        [self addSubview:self.footerLabel];
        
    }
    
    return self;
}

- (UILabel *)footerLabel{
    
    if (_footerLabel == nil) {
        self.footerLabel = [[UILabel alloc]initWithFrame:self.bounds];
        self.footerLabel.backgroundColor = [UIColor redColor];
        
    }
    return [[_footerLabel retain]autorelease];
}

@end

页眉图片：

最终效果：

---------------------------------------------