美文网首页
UICollectionView的简单使用

UICollectionView的简单使用

作者: yyggzc521 | 来源:发表于2018-12-15 17:02 被阅读0次

    UICollectionView没有UITableView使用的频繁,所以偶尔使用的时候一下子想不起来怎么使用,因此记录一下使用方法,以备后来使用。

    - (UICollectionView *)collectionView {
        if (!_collectionView) {
            UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
            flowLayout.itemSize = CGSizeMake(kScreenWidth / 4, 75);//item的尺寸都一样的时候使用
            flowLayout.minimumLineSpacing = 0;
            flowLayout.minimumInteritemSpacing = 0;
            flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;//滚动方向
            //设置headerView的尺寸大小
           flowLayout.headerReferenceSize = CGSizeMake(kScreenWidth, 100);
            
            _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight - KNavBarHeight) collectionViewLayout:flowLayout];
            _collectionView.showsVerticalScrollIndicator = NO;
            _collectionView.showsHorizontalScrollIndicator = NO;
    //        _collectionView.pagingEnabled = YES;
    //        _collectionView.bounces = NO;
            _collectionView.backgroundColor = [UIColor whiteColor];
            _collectionView.delegate = self;
            _collectionView.dataSource = self;
            [_collectionView registerClass:[ZCWeekCollectionViewCell class] forCellWithReuseIdentifier:@"ZCWeekCollectionViewCell"];//注册cell
            
            [_collectionView registerNib:[UINib nibWithNibName:@"ZCDateSectionHeaderView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ZCDateSectionHeaderView"];//注册组头
        }
        return _collectionView;
    }
    
    - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
        
        return 15;
    }
    
    - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
        
        return section % 2 == 0 ? 5 : 4;
    }
    
    - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
        
        ZCWeekCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ZCWeekCollectionViewCell.reuseIdentifier forIndexPath:indexPath];
    
        return cell;
        
    }
    
    //单独设置每个item的大小
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    
      return CGSizeMake(kScreenWidth / 4, 175);
    }
    
    //通过设置SupplementaryViewOfKind 来设置头部或者底部的view,其中 ReuseIdentifier 的值必须和 注册是填写的一致
    - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
    {
    
        ZCDateSectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"ZCDateSectionHeaderView" forIndexPath:indexPath];
        return headerView;
    }
    
    //单独设置每个header的大小
    - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
        if (section == 0) {
            return CGSizeMake(kScreenWidth, 115);
        }
        return CGSizeMake(kScreenWidth, 45);
    }
    
    //点击item方法
    - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
    {
        NSLog(@"点击了 %ld %ld",indexPath.section,indexPath.item);
    }
    

    浮动的header

    iOS9之后,UICollectionView的头部视图也能像tableView的header一样出现悬浮挂住的效果。

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init]; 
    //header 
    flowLayout.sectionHeadersPinToVisibleBounds = YES; 
    //footer
    flowLayout.sectionFootersPinToVisibleBounds = YES;
    

    iOS9之前需要自定义UICollectionViewFlowLayout
    参考

    浮动的header

    相关文章

      网友评论

          本文标题:UICollectionView的简单使用

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