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 ViewControllerstatic 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的效果图：

好的，结束～～��