IOS UICollectionView 分组使用

需要实现如下图的效果：

写个简单的demo，数据是本地的，不是从网络获取的～～

#import "MyCell.h"

#define BgColor [UIColor colorWithRed:242/255.0 green:243/255.0 blue:248/255.0 alpha:1]


@interface MyCollectionViewLayout : UICollectionViewFlowLayout
@end

@implementation MyCollectionViewLayout

-(id)init
{
    if (!(self = [super init])) return nil;

    CGSize size = [[UIScreen mainScreen] bounds].size;


//    CGFloat cellSpace = 5.0;
//    CGFloat cellWidth = (size.width - cellSpace * (4 + 1)) / 4;//总宽－5个间隔（4个cell）
    CGFloat cellSpace = 0.0;
    CGFloat cellWidth = size.width / 4.0;

    self.itemSize = CGSizeMake(cellWidth, 70);//Item size(每个item的大小)
    self.sectionInset = UIEdgeInsetsMake(cellSpace, cellSpace, cellSpace, cellSpace);//某个section中cell的边界范围。
    self.headerReferenceSize = CGSizeMake(size.width, 40);//每个section的Header宽高
    self.footerReferenceSize = CGSizeMake(size.width, 20);//每个section的Footer宽高

    self.minimumInteritemSpacing = cellSpace;//Inter cell spacing（每行内部cell item的间距）
    self.minimumLineSpacing = cellSpace;//Line spacing（每行的间距）

    return self;
}

@end


@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>{

    UICollectionView *myCollectionView;

    NSArray *listArray;
    NSArray *dataArray;

}

@end

@implementation ViewController

static NSString *ItemIdentifier = @"ItemIdentifier";

static NSString *leaveDetailsHeadID = @"leaveDetailsHeadID";

static NSString *leaveDetailsFooterID = @"leaveDetailsFooterID";



- (void)viewDidLoad {
    [super viewDidLoad];
    //是加了个透明的导航条
    self.navigationController.navigationBar.translucent = NO;//不加 否则view的高度从最顶部开始

    self.view.backgroundColor = BgColor;

    listArray = [NSArray arrayWithObjects:@"客服部班务管理",@"客服部个人信息管理",@"客服部假期管理", nil];

    dataArray = [NSArray arrayWithObjects:@"11",@"12",@"13",@"14",@"15" ,nil];

    [self createCollectionView];



}

//创建collectionView
-(void)createCollectionView{

    CGRect size = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 64);
    MyCollectionViewLayout *mcvl=[[MyCollectionViewLayout alloc] init];
    myCollectionView = [[UICollectionView alloc] initWithFrame:size collectionViewLayout:mcvl];
//一定要注册cell，注册的是原生的
//    [myCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ItemIdentifier];
    //一定要注册cell，注册的是自定义的
    [myCollectionView registerClass:[MyCell class] forCellWithReuseIdentifier:ItemIdentifier];

    myCollectionView.showsHorizontalScrollIndicator=NO;
    myCollectionView.showsVerticalScrollIndicator=NO;
    myCollectionView.backgroundColor=[UIColor whiteColor];
    myCollectionView.delegate = self;
    myCollectionView.dataSource = self;
    //一定要注册headview
    [myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:leaveDetailsHeadID];
    //一定要注册footerview
    [myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:leaveDetailsFooterID];

    [self.view addSubview:myCollectionView];


}


//有多少个sections
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{


    return listArray.count;

}
//每个section 中有多少个items
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return [dataArray count];

}
//section X item X位置处应该显示什么内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//自定义cell
    MyCell *cell=nil;

    if (cell==nil) {
        cell = [collectionView dequeueReusableCellWithReuseIdentifier:ItemIdentifier forIndexPath:indexPath];

    }
    cell.contentView.backgroundColor = [UIColor whiteColor];
    if (indexPath.row/2 == 0) {
        cell.imgView.backgroundColor = [UIColor redColor];
    }else{

        cell.imgView.backgroundColor = [UIColor greenColor];
    }

    cell.nameLabel.text = dataArray[indexPath.row];

    return cell;
}
//cell的header与footer的显示内容
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    if (kind == UICollectionElementKindSectionHeader)
    {
        UICollectionReusableView *reusableHeaderView = nil;

        if (reusableHeaderView==nil) {

            reusableHeaderView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader  withReuseIdentifier:leaveDetailsHeadID forIndexPath:indexPath];
            reusableHeaderView.backgroundColor = [UIColor whiteColor];

            //这部分一定要这样写 ，否则会重影，不然就自定义headview
            UILabel *label = (UILabel *)[reusableHeaderView viewWithTag:100];
            if (!label) {
                label = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, self.view.frame.size.width, 40)];
                label.tag = 100;
                [reusableHeaderView addSubview:label];
            }

            label.text = listArray[indexPath.section];


        }


        return reusableHeaderView;

    }else if (kind == UICollectionElementKindSectionFooter){

        UICollectionReusableView *reusableFooterView = nil;

        if (reusableFooterView == nil) {

            reusableFooterView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter  withReuseIdentifier:leaveDetailsFooterID forIndexPath:indexPath];
            reusableFooterView.backgroundColor = BgColor;
        }

        return reusableFooterView;
    }
    return nil;

}
//点击cell
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"indexPath.r==%ld",(long)indexPath.row);

}

看下自定义的cell：

//.h文件
#import <UIKit/UIKit.h>

@interface MyCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView *imgView;

@property (nonatomic, strong) UILabel *nameLabel;

@end


//.m文件

#import "MyCell.h"

@implementation MyCell

- (instancetype)initWithFrame:(CGRect)frame{

    if (self == [super initWithFrame:frame]) {

        self.contentView.backgroundColor = [UIColor whiteColor];

        CGFloat spaWidth = frame.size.width;
        CGFloat spaHeight = 40;

        _imgView = [[UIImageView alloc] initWithFrame:CGRectMake((spaWidth-spaHeight)/2, 0, spaHeight, spaHeight)];
        _imgView.backgroundColor = [UIColor whiteColor];
        [self.contentView addSubview:_imgView];

        _nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, spaHeight+5, spaWidth, 20)];
        _nameLabel.textAlignment = NSTextAlignmentCenter;
        _nameLabel.textColor = [UIColor lightGrayColor];
        [self.contentView addSubview:_nameLabel];
    }

    return self;
}

@end

下面是demo的效果图：

好的，结束～～��