iOS实现collectionView同时支持添加头部视图和组头

最近想实现一个类似上方页面的功能(图可忽略),首先这个页面可以使用tableView和collectionView来实现,由于考虑tableView实现起来相对复杂,因此决定采用collectionView系统的一些优势来实现;collectionView实现添加头部又有两种方案,第一种可以注册一个组头,通过设置第一个组头,来添加头部视图,但是这种方法会带来一些复用的问题,且数据源处理起来不是那么好处理;另外一种文案就是通过设置collectionView的偏移量来添加头部,操作非常简单,因此我采用的是第二种方案,先将我实现的核心代码分享给大家。



//头部view

@property (nonatomic, strong) UIView *homeHeadView;

 #pragma mark -添加collectionView

-(void)addCollectionView {

    //创建flowLayout布局类

    BMSCollectionViewFlowLayout *layout = [[BMSCollectionViewFlowLayout alloc] init];

    //设置组头、组尾高度

    layout.headerReferenceSize = CGSizeMake(self.view.bounds.size.width, 40);

    layout.footerReferenceSize = CGSizeMake(self.view.bounds.size.width, 10);

    //设置item之间的上、左、下、右间距

    layout.sectionInset = UIEdgeInsetsMake(0, 30, 10, 30);

    self.layout= layout;

    //创建collectionView

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

    collectionView.backgroundColor=kGlobalBackGroundColor;

    collectionView.alwaysBounceVertical=YES;

    collectionView.dataSource=self;

    collectionView.delegate=self;

    //通过collectionView.contentInset方法给collectionView来设置头部偏移量(注意:两句代码一定要同时加上)

    collectionView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0);//上、下、左、右

    collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

    //注册cell

    [collectionViewregisterNib:[UINib nibWithNibName:@"BMSInfoCell" bundle:nil] forCellWithReuseIdentifier:@"BMSInfoCell"];

    [collectionViewregisterNib:[UINib nibWithNibName:@"BatteryInfoCell" bundle:nil] forCellWithReuseIdentifier:@"BatteryInfoCell"];

    //注册组头视图(下面类继承UICollectionReusableView)

    [collectionViewregisterNib:[UINib nibWithNibName:@"BMSHeaderView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

    [self.viewaddSubview:collectionView];

    self.collectionView= collectionView;

    //设置偏移后给collectionview添加上头部

    [self addHeaderView];

}

#pragma mark - UICollectionViewDataSource

///设置section个数

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return self.dataList.count;

}

//设置ietm个数

- (NSInteger)collectionView:(UICollectionView*)collectionViewnumberOfItemsInSection:(NSInteger)section {


    return[self.dataList[section][@"list"]count];

}

///设置item的宽高

-(CGSize)collectionView:(UICollectionView*)collectionViewlayout:(UICollectionViewLayout*)collectionViewLayoutsizeForItemAtIndexPath:(NSIndexPath*)indexPath {


    BMSInfoTypeinfoType = [self.dataList[indexPath.section][@"type"]integerValue];

    return(infoType ==BMSInfoTypeBattery) ?  CGSizeMake(40,45) :CGSizeMake(100,20);

}

//设置水平间距

-(CGFloat)collectionView:(UICollectionView*)collectionViewlayout:(UICollectionViewLayout*)collectionViewLayoutminimumInteritemSpacingForSectionAtIndex:(NSInteger)section {

    return1;

}

//collectionView数据源方法

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

}


//组头视图的数据源方法

- (UICollectionReusableView*)collectionView:(UICollectionView *)collectionViewviewForSupplementaryElementOfKind:(NSString*)kindatIndexPath:(NSIndexPath*)indexPath {

    //复用组头

    BMSHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];

   }

-(UIView *)homeHeadView {

    if (!_homeHeadView) {

        //核心代码,注意:如果向上偏移头部距离h,那就是-h,高度是h

        _homeHeadView = [[UIView alloc] initWithFrame:CGRectMake(0, -(centerHeaderViewHeight+dashboardViewWidth), kScreenW, centerHeaderViewHeight+dashboardViewWidth)];

        _homeHeadView.backgroundColor = kGlobalBackGroundColor;

    }

    return _homeHeadView;

}

你可能感兴趣的:(iOS实现collectionView同时支持添加头部视图和组头)