iOS仿京东分类菜单之UICollectionView内容

在上《 iOS仿京东分类菜单实例实现 》已经实现了大部分主体的功能，本文是针对右边集合列表进行修改扩展，使它达到分组的效果，本文涉及到的主要是UICollectionView的知识内容，左边列表的实现见上一篇文章，先看实现的效果图：

一：实体的创建

1.1分组实体的创建(tagID跟左边表格进行关联，roomArray是存放房间的数组，也就是单元格的集合)

#import <Foundation/Foundation.h>  @interface rightModel : NSObject //实体leftTageModel中的主键值 @property(assign,nonatomic)long tagID; @property(assign,nonatomic)long roomStyleID; @property(copy,nonatomic)NSString *roomStyleName; //房间实体headRightModel的数组 @property(strong,nonatomic)NSMutableArray *roomArray; @end

1.2房间实体的创建

#import <Foundation/Foundation.h>  @interface headRightModel : NSObject  @property(assign,nonatomic)long roomID; @property(copy,nonatomic)NSString *roomName; @property(copy,nonatomic)NSString *roomImageUrl; @end

二：单元格的创建

#import <UIKit/UIKit.h> #import "headRightModel.h"  @interface rightCollectionViewCell : UICollectionViewCell  @property(strong,nonatomic)headRightModel *curHeadRightModel;  +(CGSize)ccellSize;  @end

#import "rightCollectionViewCell.h" @interface rightCollectionViewCell() @property(strong,nonatomic)UIImageView *roomImageView; @property(strong,nonatomic)UILabel *roomLabel; @end static const CGFloat collectionCellHeight=80; static const CGFloat labelHeight=20; @implementation rightCollectionViewCell //这边很关键 CollectionViewCell重用 - (id)initWithFrame:(CGRect)frame {  self = [super initWithFrame:frame];  if (self) {   if (self.roomImageView==nil) {    self.roomImageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, ([UIScreen mainScreen].bounds.size.width-80-10*3)/3, collectionCellHeight-labelHeight)];    self.roomImageView.contentMode=UIViewContentModeScaleAspectFill;    self.roomImageView.clipsToBounds = YES;    self.roomImageView.layer.masksToBounds = YES;    self.roomImageView.layer.cornerRadius = 2.0;    [self.contentView addSubview:self.roomImageView];   }   if (self.roomLabel==nil) {    self.roomLabel=[[UILabel alloc]init];    self.roomLabel.font=[UIFont systemFontOfSize:15];    self.roomLabel.textAlignment=NSTextAlignmentCenter;    [self.roomLabel sizeToFit];    [self.contentView addSubview:self.roomLabel];    [self.roomLabel mas_makeConstraints:^(MASConstraintMaker *make) {     make.top.mas_equalTo(self.roomImageView.mas_bottom).with.offset(2);     make.centerX.mas_equalTo(self.roomImageView).with.offset(0);     make.height.mas_equalTo(labelHeight);    }];   }  }  return self; } -(void)setCurHeadRightModel:(headRightModel *)curHeadRightModel {  _curHeadRightModel=curHeadRightModel;  self.roomImageView.image=[UIImage imageNamed:_curHeadRightModel.roomImageUrl];  self.roomLabel.text=_curHeadRightModel.roomName; } +(CGSize)ccellSize {  return CGSizeMake(([UIScreen mainScreen].bounds.size.width-80-10*3)/3,collectionCellHeight); } @end 

三：创建节点显示视图

#import <UIKit/UIKit.h>  @interface myHeadView : UICollectionReusableView  - (void) setLabelText:(NSString *)text; @end

注意它是继承 UICollectionReusableView

#import "myHeadView.h" @interface myHeadView() @property (strong, nonatomic) UILabel *label; @end @implementation myHeadView - (id)initWithFrame:(CGRect)frame {  self = [super initWithFrame:frame];  if (self)  {   self.label = [[UILabel alloc] init];   //在这边调整它的位置   self.label.frame=CGRectMake(0, 10, 250, 25);   self.label.font = [UIFont systemFontOfSize:18];   self.label.backgroundColor=[UIColor brownColor];   self.label.textColor=[UIColor yellowColor];   [self addSubview:self.label];  }  return self; } - (void) setLabelText:(NSString *)text {  self.label.text = text; } @end 

四：创建测试数据跟初始化集合列表

- (void)viewDidLoad {  [super viewDidLoad];  //初始化  self.view.backgroundColor=[UIColor whiteColor];  self.dataList=[[NSMutableArray alloc]init];  self.rightdataList=[[NSMutableArray alloc]init];  self.allRightDataList=[[NSMutableArray alloc]init];  self.isReturnLastOffset=YES;  //是否允许右位保持滚动位置  self.isKeepScrollState=YES;  //测试数据  for (int i=0; i<10; i++) {   //左边列表数据   leftTagModel *item=[[leftTagModel alloc]init];   item.tagID=i;   item.tagName=[NSString stringWithFormat:@"第%d层",i];   [self.dataList addObject:item];   //右边列表数据   for (int j=0; j<10; j++) {    rightModel *model=[[rightModel alloc]init];    model.tagID=i;    model.roomStyleID=j;    model.roomStyleName=[NSString stringWithFormat:@"%d层类型%d",i,j];    NSMutableArray *headRightModelArray=[[NSMutableArray alloc]init];    for (int z=0; z<20; z++) {     headRightModel *headrightModel=[[headRightModel alloc]init];     headrightModel.roomID=z;     headrightModel.roomName=[NSString stringWithFormat:@"%d类房间%d",j,z];     headrightModel.roomImageUrl=[NSString stringWithFormat:@"room%d",z%5];     [headRightModelArray addObject:headrightModel];    }    model.roomArray=headRightModelArray;    [self.allRightDataList addObject:model];   }  }  //创建列表  if (!_myTableView) {   _myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0,tableWidthSize, kScreenHeight) style:UITableViewStylePlain];   _myTableView.backgroundColor=[UIColor grayColor];   _myTableView.showsVerticalScrollIndicator = NO;   _myTableView.showsHorizontalScrollIndicator=NO;   _myTableView.dataSource = self;   _myTableView.delegate = self;   _myTableView.tableFooterView=[[UIView alloc]init];   _myTableView.separatorColor= [UIColor colorWithRed:52.0f/255.0f green:53.0f/255.0f blue:61.0f/255.0f alpha:1];   [_myTableView registerClass:[leftTableCell class] forCellReuseIdentifier:NSStringFromClass([leftTableCell class])];   if ([self.myTableView respondsToSelector:@selector(setLayoutMargins:)]) {    self.myTableView.layoutMargins=UIEdgeInsetsZero;   }   if ([self.myTableView respondsToSelector:@selector(setSeparatorInset:)]) {    self.myTableView.separatorInset=UIEdgeInsetsZero;   }   [self.view addSubview:_myTableView];  }  //创建集合表格  if (!_myCollectionView) {   UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];   self.myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(tableWidthSize+leftMargin,64, kScreenWidth-tableWidthSize-2*leftMargin, kScreenHeight) collectionViewLayout:layout];   self.myCollectionView.backgroundColor=[UIColor whiteColor];   self.myCollectionView.showsHorizontalScrollIndicator=NO;   self.myCollectionView.showsVerticalScrollIndicator=NO;   [self.myCollectionView registerClass:[rightCollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([rightCollectionViewCell class])];   [self.myCollectionView registerClass:[myHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([myHeadView class])];   self.myCollectionView.dataSource = self;   self.myCollectionView.delegate = self;   [self.view addSubview:self.myCollectionView];  }  self.selectIndex=0;  //默认选择第一个  if (self.dataList.count>0) {   self.curSelectModel=[self.dataList objectAtIndex:self.selectIndex];   [self.myTableView selectRowAtIndexPath:[NSIndexPath indexPathForRow:self.selectIndex inSection:0] animated:YES scrollPosition:UITableViewScrollPositionTop];   [self.myTableView reloadData];   //右边数据加载   [self predicateDataSoure];  } } 

注意:关于节视图的注册

[ self . myCollectionView registerClass :[ myHeadView class ] forSupplementaryViewOfKind : UICollectionElementKindSectionHeader withReuseIdentifier : NSStringFromClass ([ myHeadView class ])];

五：集合视图 UICollectionViewDataSource, UICollectionViewDelegate的内容

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{  return self.rightdataList.count; } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{  rightModel * array=self.rightdataList[section];  if (array.roomArray.count==0) {   return 1;  }  else  {   return array.roomArray.count;  } } - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{  rightCollectionViewCell *ccell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([rightCollectionViewCell class]) forIndexPath:indexPath];  rightModel * array=self.rightdataList[indexPath.section];  headRightModel *model=[array.roomArray objectAtIndex:indexPath.row];  ccell.curHeadRightModel=model;  return ccell; } -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {  CGSize size = {240,40};  return size; } - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{  myHeadView *headView;  rightModel * array=self.rightdataList[indexPath.section];  if([kind isEqual:UICollectionElementKindSectionHeader])  {   headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:NSStringFromClass([myHeadView class]) forIndexPath:indexPath];   //别在这对headView坐标做处理   [headView setLabelText:[NSString stringWithFormat:@"%@",array.roomStyleName]];  }  return headView; } - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{  return [rightCollectionViewCell ccellSize]; } - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{  return UIEdgeInsetsZero; } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{  return 5; } - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{  return 5; } - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{  } 

注意：别在viewForSupplementaryElementOfKind，对 myHeadView进行坐标的调整，因为它是全局的，会导致所有的节点都混在一起，记得设置它的节头大小，才会显示出来；

六：扩展关于viewForSupplementaryElementOfKind，它可以设置节头跟节脚，下面引用网上一个比较全的说明

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath  为collection view添加一个补充视图(页眉或页脚)  - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section  设定页眉的尺寸  - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section  设定页脚的尺寸  - (void)registerClass:(Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier

视图创建：

[self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader"]; [self.myCollectionView registerClass:[MyHeadView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader"]; -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {  CGSize size = {240,25};  return size; } -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {  CGSize size = {240,25};  return size; } - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {  MyHeadView *headView;  if([kind isEqual:UICollectionElementKindSectionHeader])  {    headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];   [headView setLabelText:[NSString stringWithFormat:@"section %d's header",indexPath.section]];  }  else if([kind isEqual:UICollectionElementKindSectionFooter])  {   headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"hxwHeader" forIndexPath:indexPath];   [headView setLabelText:[NSString stringWithFormat:@"section %d's footer",indexPath.section]];  }  return headView; } 

 实例源代码下载地址