美文网首页
UICollectionView

UICollectionView

作者: Barry_小闪 | 来源:发表于2016-05-22 18:38 被阅读1080次

    取消UICollectionView的隐式动画
    UICollectionView在reloadItems的时候,默认会附加一个隐式的fade动画
    怎样在UICollectionView中添加Header和footer
    在最后面
    No index path for table cell being reused 这个问题

     自定制Footer header 需要注意的地方
     self.tableView.tableFooterView = footCell.contentView;
    

    目录

    • 布局相关
    • UICollectionViewDelegateFlowLayout
    • UICollectionViewDataSource
    • UICollectionViewDelegate
    补充:

    当cell很少的情况下(没有占满屏幕),collectionView不能拖动,这个时候就不能拖拽collectionView进行下拉刷新了吗?

    解决方法:这个问题已经解决,一直忘了回来写出来。我发现 当所有collectionCell的高度和没有占满整个parent container的时候,当下拉的时候都不会触发scrollViewDidScroll。所以在创建collectionView的时候添加   
    self.collectionView.alwaysBounceVertical =YES;
    

    UICollectionView底部被标签了控制器(tabBar)遮挡的解决办法

    //创建CollectionView时高度减少113(tabBar的高度)
     垂直方向滚动
     self.collectionV = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.width, self.view.height-108) collectionViewLayout:flowLayout];
    
    水平方向滚动
    //创建CollectionView时高度减少49(tabBar的高度)
     self.collectionV = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.width, self.view.height-49) collectionViewLayout:flowLayout];
    //关闭约束,不设置也可以
     self.automaticallyAdjustsScrollViewInsets = NO;
     //高度的间距设置49
     self.collectionV.contentInset = UIEdgeInsetsMake(49, 0, 0, 0);
    

    布局相关

    UICollectionViewLayou

    • UICollectionViewLayout是所有的collectionView的布局类的父类,这个类只是为了被继承而创建的类,不能直接使用它来创建对象;要使用的是它的子类;子类的作用就是自动布局collectionView的cell

    • UICollectionViewFlowLayout:UICollectionViewLayout 以瀑布流的形式自动布局的一个布局类所有和布局相关的属性,全部都由这个布局对象来进行设置

    1.创建UICollectionViewLayou

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

    2.设置cell的大小(所有的cell的宽度和高度都是一样的)

      flowLayout.itemSize = CGSizeMake(100, 200);
    

    3.设置滚动方向

      UICollectionViewScrollDirectionVertical,  垂直方向(默认)
      UICollectionViewScrollDirectionHorizontal 水平方向
      
      [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
        
    

    通过布局对象去创建collectionView对象

    UICollectionView 继承 UIScrollView

    1.创建UICollectionView

    //参数1:frame
    //参数2:布局样式

     UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    

    2.设置代理

     collectionView.dataSource = self;
     collectionView.delegate = self;
    

    3.注册cell(告诉collectionView在自动创建cell的时候,需要创建什么样的cell)

    注意:
    如果想要将一个子视图直接添加到cell上,必须通过cell的contentView去调用addSubview方法,添加到内容视图上

     [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    
     //注册headerView
     [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"view"];
    

    6.设置背景颜色(默认是黑色)

     collectionView.backgroundColor = [UIColor whiteColor];
    

    UICollectionViewDelegateFlowLayout

    设置协议

    @interface ViewController ()< UICollectionViewDelegateFlowLayout>
    

    设置每个cell的宽和高

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
            
        return CGSizeMake(W, 150);
    }
    

    设置间距

    - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    
        top, left, bottom, right
        return UIEdgeInsetsMake(0, 0, 0, 0);
    }
    

    设置最小行间距(默认是10)
    如果collectionView纵向滚动,行间距只能通过设置最小行间距来确定

    - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    
        return 0;
        
    }
    

    设置最小列间距(默认是10)
    如果collectionView横向滚动,列间距只能通过设置最小列间距来确定

    - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    
        return 0;
    }
    

    设置header的大小

    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    
        //如果是纵向滚动,设置header的宽度是无效;如果是横向滚动,设置header的高度无效
        return CGSizeMake(100, 50);
    }
    

    UICollectionViewDataSource

    设置协议

    @interface ViewController ()<UICollectionViewDataSource>
    

    设置分组数(默认1)

    - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    
        return 3;
        
    }
    

    设置每一组cell的个数(组数默认是1)

    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    
        return 50;
        
    }
    

    创建cell
    //参数1:委托
    //参数2:cell的位置(第几组(section)的第几个(item))

    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    
        //1.去复用池中查看有没有可以复用的cell;如果找到了就直接将可以复用的cell的地址返回。没有找到就自己创建一个新的cell(前提:要告诉collectionView在自动创建新的cell的时候,需要创建什么类的,复用ID是什么)
        //参数1:复用ID
        //参数2:当前需要创建的cell的位置
        UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
        
        //2.刷新数据
        cell.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0f green:arc4random()%256/255.0f blue:arc4random()%256/255.0f alpha:1];
        
    
        //3.返回cell
        return cell;
        
        
    }
    

    设置collectionView的headerView和footerView

    - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
        //1.去复用池中找,有没有可以复用的headerView;如果没有的话,collectionView会自动创建一个新的headerView
        //参数1:类型(是headerview还是footerView)
        //UICollectionElementKindSectionHeader (headerview)
        //UICollectionElementKindSectionFooter (footerView)
        //参数2:复用ID
        //参数3:位置
        UICollectionReusableView * headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"view" forIndexPath:indexPath];
        
        //2.更新数据
        headerView.backgroundColor = [UIColor yellowColor];
        
        
        return headerView;
        
    }
    

    UICollectionViewDelegate

    设置协议

    @interface ViewController ()<UICollectionViewDelegate>
    pragma mark collectionView Delegate
    

    当cell被选中的时候会调用这个方法

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

    设置headerView

    - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    
        //1.去复用池找可以复用的headerView
        DateHeaderReusableView * headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"view" forIndexPath:indexPath];
        
        //2.刷新数据
        NSArray * array = @[@"热门作者", @"热门条漫", @"热门绘本"];
    //    headerView.backgroundColor = [UIColor redColor];
        headerView.headerTitleLabel.text = array[indexPath.section];
        
        //3.返回
        return headerView;
    }
    
    切换collectionViewLayout布局
    
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
    {
        if ([self.collectionView.collectionViewLayout isKindOfClass:[ZBCollectionViewLineLayout class]])
        {
            ZBGridLayout *gridLayout = [[ZBGridLayout alloc]init];
            [self.collectionView setCollectionViewLayout:gridLayout animated:YES];
        }
        else
        {
            [self.collectionView setCollectionViewLayout:_flowLayout animated:YES];
        }
    }
    
    

    相关文章

      网友评论

          本文标题:UICollectionView

          本文链接:https://www.haomeiwen.com/subject/xaoorttx.html