IOS之UICollectionViewController ------------ 救赎之路

UICollectionViewColltroller是IOS中用来展示数据集的视图，功能强大，而且能实现的视觉丰富，这篇随笔笔者就演示下UICollectionViewConlltroller简单的使用，献给同样在编程之路前进的人。

 

首先来看看UIColletionViewController各种效果(素材来源百度)

 

 

UICollectionViewController 有三个非常重要的协议UICollectionViewDelegate，UICollectionViewDataSource，UICollectionViewDelegateFlowLayout

他们的作用分别是数据源，事件代理，视图布局。下面我讲在demo重一个个讲述这三个协议的用法。

开始

UICollectionViewDataSource三个重要方法1，numberOfSectionsInCollectionView。2，(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section 。3， (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section 

一，新建项目，然后将默认新建的stroryboard跟View删除，配置项目设置Main interface为空，在AppDelegate添加代码

    UIWindow *window = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen] bounds]];
    [window makeKeyAndVisible];
    self.window = window;
    
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
    YYHCollectionViewController *cc = [[YYHCollectionViewController alloc]initWithCollectionViewLayout:flowLayout];
    self.window.rootViewController = cc;

注意对于alloc UICollectionViewController 必须要给一个UIConllectionViewFlowLayout对象，否则会报错。

 

二，UICollectionViewControlelr虽然同UITableViewContrller都是同样用来展示数据，但是人性化却差的多。因为里面的Cell，HeadView,FootView都是没有默认控件，换句话来说就是所有的控件都是需要你自己来自定义。

     UICollectionViewController自定义Cell跟HeadView,FootView跟UITableViewContrller大大有区别，但是你只需要记得一个方法initFrame:(CGRect )frame，你自定义的控件所有都要从这个获取。

     新建一个Cell 继承UICollectionView，然后进行必要的输出连接。

    在.M文件中载initFrame函数

-(instancetype)initWithFrame:(CGRect)frame{
    if(self = [super initWithFrame:frame]){
        NSArray *array = [[NSBundle mainBundle] loadNibNamed:@"YYHCollectionViewCell" owner:self options:nil];
        if(array.count < 1)
            return nil;
        if(![[array firstObject] isKindOfClass:[UICollectionViewCell class]])
            return nil;
        self = [array firstObject];
    }
    return self;
}

 目前为止自定义Cell已经完成。

三，展示数据

    

#pragma mark <UICollectionViewDataSource>
//返回Secion数量
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return self.radios.count;
}

//返回每个Section 下面的Cell数量
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    RadioList *list = self.radios[section];
    return list.radios.count;
}


- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    YYHCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
    RadioList *list = self.radios[indexPath.section];
    Radio *radio = list.radios[indexPath.row];
    cell.imageView.image = [UIImage imageNamed:radio.imgUrl];
    cell.descLabel.text = radio.fmName;
    
    return cell;
}

　　成果如下：

     结果与我们自定义的有所差别，我们理想状态下是一个UIImageView,一个UILabel。但是现在所展示却只有UIImageView。

     寻找问题的所在需要靠自己，编程就是一个不断寻找问题，然后解决的问题。反复查找，我怀疑是Cell的frame问题，输出fram查看

     

    NSLog(@"%f",cell.frame.size.width);
    NSLog(@"%f",cell.frame.size.height);

2016-01-19 19:13:46.040 UICollectionViewControllerDemo[3260:90515] 50.000000
2016-01-19 19:13:46.041 UICollectionViewControllerDemo[3260:90515] 50.000000

  发现与XIB大小不符合，得出结果Frame问题（xib.size = {75，90}

  从这里我们引出UICollectionViewFlowLayout

 

UICollectionViewFlowLayout 

//Cell大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

//Cell 空隙
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;

//Cell 之间的间隔
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;

//Secion之间的间隔
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;

//ReuseHeadView 大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:
(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;

//ReuseFootHead大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

　　以上的方法都是用来布局UICollectionView。

这里我选择

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;来解决我的Cell显示不完整的问题

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    CGSize size = {75,90};
    return size;
}

　　结果如期：

但是其实我们的是需要展示分组的情况， ，那么接着我们就实现分组的情况

四，实现分组。其实UICollectionViewController分组关键就是Section>1，事实上我们已经分组，其实UI没有合理显示，如果让它合理显示呢？那就是添加ReuseHeadView

      新建文件继承UICollectionReuseView 

    

同样需要在.M文件重载initFrame方法

-(instancetype)initWithFrame:(CGRect)frame{
    if(self = [super initWithFrame:frame])
    {
        NSArray *arrary = [[NSBundle mainBundle] loadNibNamed:@"RadioCollectionReusableView" owner:self options:nil];
        if(arrary.count < 1)
            return nil;
        if(![[arrary firstObject] isKindOfClass:[UICollectionReusableView class]])
            return nil;
        self = [arrary firstObject];
    }
    return self;
}

　　到这里就完成了自定义HeadView

五，展示HeadView 

   添加代码

//实现HeadView
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    RadioCollectionReusableView *headView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:reuseIdentifierForHeadView forIndexPath:indexPath];
    if([kind isKindOfClass:[UICollectionElementKindSectionHeader class]]){
        RadioList *list = self.radios[indexPath.section];
        headView.descLabel.text = list.name;
    }
    return headView;

}
//headView大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    CGSize currentSize = [[UIScreen mainScreen] bounds].size;
    CGSize headSize = {currentSize.width,45};
    return headSize;
}

结果展示：

 

补充：自定义的cell跟headView是需要向CollectionViewController注册

  

    [self.collectionView registerClass:[YYHCollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier]; [self.collectionView registerClass:[RadioCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:reuseIdentifierForHeadView];  

 

 

UICollectionViewControllerDelegate，就简单描述下里面的方法的作用

//Cell是否应该高亮
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath;

//Cell是否可以被选中
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath;
//Cell是否可以取消选中
- (BOOL)collectionView:(UICollectionView *)collectionView shouldDeselectItemAtIndexPath:(NSIndexPath *)indexPath; 
//Cell选中时候调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
//Cell被取消选中调用
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath;

 随便到这就结束了，不足之处还希望多多指教

附带Demo:http://download.csdn.net/detail/q13432502528/9410574