iOS - UICollectionView 的自定义头视图

这里只自定义区头,区尾类似。方便起见,一个类实现:


#import "ViewController.h"


@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>


@end


@implementation ViewController


- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    [self creatUI];

    

}

#pragma mark - 方法

- (void)creatUI {

    

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


    UICollectionView *collect = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height-20) collectionViewLayout:layout];

    [collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];

    

    /**

     * 这里这个Kind必须要用常量字符串,否则会崩溃的不要不要的

     *UICollectionViewFlowLayout.h里面有

     

     UIKIT_EXTERN NSString *const UICollectionElementKindSectionHeader NS_AVAILABLE_IOS(6_0);

     UIKIT_EXTERN NSString *const UICollectionElementKindSectionFooter NS_AVAILABLE_IOS(6_0);

     UIKIT_EXTERN const CGSize UICollectionViewFlowLayoutAutomaticSize  NS_AVAILABLE_IOS(10_0);

     

     */

   

    [collect registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerID"];

    collect.backgroundColor = [UIColor whiteColor];

    collect.delegate = self;

    collect.dataSource = self;

    [self.view addSubview:collect];

    

}

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

    

    return CGSizeMake(self.view.frame.size.width, 150);

    

}


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

    return 3;

}

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

    

    UICollectionReusableView *headerView = nil;

    

    if (kind == UICollectionElementKindSectionHeader) {

        

        headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerID" forIndexPath:indexPath];

        

        if (indexPath.section == 0) {

            NSLog(@"这是区头0");


            headerView.backgroundColor = [UIColor redColor];

        }else if (indexPath.section == 1) {

            NSLog(@"这是区头1");


            

            headerView.backgroundColor = [UIColor greenColor];

        }else {

            NSLog(@"这是区头2");


            headerView.backgroundColor = [UIColor yellowColor];

        }

    }

    

    return headerView;

}


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

    return 20;

}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    return CGSizeMake((self.view.frame.size.width-10)/2, 100);

}

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

    

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];

    

    for (UIView *subView in cell.contentView.subviews) {

        [subView removeFromSuperview];

    }

    

    UIView *view0 = [[UIView alloc] init];

    if (indexPath.row%2==0) {

        view0.frame = CGRectMake(10, 0, (self.view.frame.size.width-10)/2 - 10, 100);


    }else {

        view0.frame = CGRectMake(0, 0, (self.view.frame.size.width-10)/2 - 10, 100);


    }

    view0.backgroundColor = [UIColor cyanColor];

    

    [cell.contentView addSubview:view0];

    

    return cell;

}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    

    NSLog(@"%ld",indexPath.row);

}


最终效果如下截图:

iOS - UICollectionView 的自定义头视图iOS - UICollectionView 的自定义头视图iOS - UICollectionView 的自定义头视图