CollectionView Header And Footer 的使用

CollectionView Header And footer 的添加和设置

建议先看CollectionView 第一篇:http://www.jianshu.com/p/a1614404ae96

 

注册Header 和 Footer

    //注册区头

        [_myCollectionView registerClass:[HeaderCRView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];

   //注册区尾

        [_myCollectionView registerClass:[HeaderCRView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];

 

自定义Header子类  ---->HeaderCRView (创建)

自定义的话,header子类要继承自 UICollectionReusableView。

#pragma mark 自定义区头  区尾 样式

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath

{

    NSString *CellIdentifier = @"headerView";

    NSString *cellfooter = @"footerView";

    

    HeaderCRView *cell= nil;

 

    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

    

    

         cell = (HeaderCRView *)[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:CellIdentifier forIndexPath:indexPath];

        [cell initCollectionHeaderViewindex:indexPath.section];

 

        

    }

     if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {

    

        

         cell = (HeaderCRView *)[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:cellfooter forIndexPath:indexPath];

        

        [cell initCollectionFootViewindex:indexPath.section];

    }

    

    return cell;

}

 

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {

        //设置区头高度

    if (section == 0) {

        CGSize size = CGSizeMake(kUIScreenWidth, 135+35);

        return size;

    }

    CGSize size = CGSizeMake(kUIScreenWidth, 35);

    return size;

 

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {

    //设置区尾 高度

    CGSize size = CGSizeMake(kUIScreenWidth, 10);

    return size;

    

}

 

HeaderCRView  .h

@interface HeaderCRView : UICollectionReusableView

 

//区头

- (void)initCollectionHeaderViewindex:(NSInteger *)index;

//区尾

- (void)initCollectionFootViewindex:(NSInteger *)indexPath;

 

@end

 

HeaderCRView  .m

- (void)initCollectionHeaderViewindex:(NSInteger *)index {

    

    if (index == 0) {

        

        UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 135, kUIScreenWidth, 35)];

        headerView.backgroundColor = [UIColor whiteColor];

        [self addSubview:headerView];

        

        UILabel *titleLab = [[UILabel alloc]initWithFrame:CGRectMake(15, 10, 80, 15)];

        titleLab.text = @"我的应用";

        titleLab.textColor = [CommonFunctions colorWithHex:0x4A4A4A];

        titleLab.font = [UIFont fontWithName:kPingFang_Regular size:14];

        [headerView addSubview:titleLab];

        

    }

    

    if (index == 1) {

        

        UIView *headerView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kUIScreenWidth, 35)];

        headerView.backgroundColor = [UIColor whiteColor];

        [self addSubview:headerView];

        

        UILabel *titleLab = [[UILabel alloc]initWithFrame:CGRectMake(15, 10, 80, 15)];

        titleLab.text = @"业务发展";

        titleLab.textColor = [CommonFunctions colorWithHex:0x4A4A4A];

        titleLab.font = [UIFont fontWithName:kPingFang_Regular size:14];

        [headerView addSubview:titleLab];

        

    }

    

}

 

- (void)initCollectionFootViewindex:(NSInteger *)indexPath {

    

    UIView *footView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kUIScreenWidth, 10)];

    footView.backgroundColor = [UIColor groupTableViewBackgroundColor];

    [self addSubview:footView];

    

    

}

 

 

 

效果图 

 

转载于:https://www.cnblogs.com/Lovexiaohuzi/p/6104841.html

iOS的CollectionView是一种强大的界面展示控件,它允许我们展示多个横向或纵向滚动的项。而Section HeaderCollectionView中的一个重要组成部分,它可以用来展示每个分区的标题或其他相关信息。 在iOS中使用CollectionView的时候,我们可以通过实现UICollectionViewDelegateFlowLayout协议来设置每个分区的大小、间距等布局属性。而Section Header则需要通过实现UICollectionViewDelegate的collectionView:viewForSupplementaryElementOfKind:atIndexPath:方法来自定义。 首先,我们需要创建一个UICollectionReusableView类的子类作为Section Header的视图。然后,在collectionView:viewForSupplementaryElementOfKind:atIndexPath:方法中,我们需要判断elementKind是否为UICollectionElementKindSectionHeader,并根据需要从重用队列中获取Section Header的视图对象。 接下来,我们可以设置Section Header的标题、背景色、字体颜色等视觉效果。例如,我们可以使用UILabel来展示标题,并通过设置UILabel的text属性来显示每个分区的标题。如果需要更加丰富的自定义效果,我们还可以使用自定义的视图来展示Section Header。 最后,我们需要在UICollectionViewFlowLayout中设置sectionHeadersPinToVisibleBounds属性为true,以便在滚动时固定Section Header的位置。这样,当用户滚动CollectionView时,Section Header会始终显示在顶部,增加了用户的使用体验。 综上所述,iOS的CollectionView提供了强大的支持来展示多个滚动项,而Section Header则可以用来展示每个分区的相关信息。通过实现UICollectionViewDelegate的collectionView:viewForSupplementaryElementOfKind:atIndexPath:方法,我们可以自定义Section Header的视图,并通过UICollectionViewFlowLayout来设置其布局等属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值