同一界面下 两个collectionView

QQ20171218-143344.png

相信有很多人遇到这种一行两列或者是更多列的许多人的做法是用tabview来做，可是苹果提供给了我们一个更方便的uicollection的。用这个来做更加的方便，因为搜了下百度上的一个界面上两个collectionView的资料，发现很多人都只是提供了思路没有给出代码，研究了下写了份关于同一个界面下两个collectionView的demo，希望以后遇到这个问题的同学可以很好的解决.

1

同一界面下两个collectionView的主要思路就是用不同的id来进行判断。

• (void)viewDidLoad {
  [super viewDidLoad];
  self.view.backgroundColor = [UIColor whiteColor];
  //创建两个按钮来进行collectionView的切换
  for (NSInteger i=0; i<2; i++) {
  UIButtonbtn=[[UIButton alloc]init];
  [btn setTitle:[NSString stringWithFormat:@"%ld",i] forState:UIControlStateNormal];
  [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
  btn.frame=CGRectMake(i100, 0, 100, 50);
  btn.backgroundColor=[UIColor blueColor];
  btn.tag=i;
  [btn addTarget:self action:@selector(btnclick:) forControlEvents:UIControlEventTouchUpInside];
  [self.view addSubview:btn];
  }

//3.注册collectionViewCell
//注意，此处的ReuseIdentifier 必须和 cellForItemAtIndexPath 方法中 一致 均为 cellId
self.cellIdStr=cellID1;
if ([self.cellIdStr isEqualToString:self.cellIdStr]) {
//注册cell
[self.mainCollectionView1 registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:self.cellIdStr];
//注册headerView 此处的ReuseIdentifier 必须和 cellForItemAtIndexPath 方法中 一致 均为reusableView
[self.mainCollectionView1 registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView"];
}else{
[self.mainCollectionView2 registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:cellID2];
[self.mainCollectionView2 registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView"];
}
}

这里self.mainCollectionView1使用了懒加载来进行创建 mainCollectionView2同理

-(UICollectionView )mainCollectionView1
{
if (_mainCollectionView1==nil) {
//1.初始化layout
UICollectionViewFlowLayout layout1 = [[UICollectionViewFlowLayout alloc] init];
//设置collectionView滚动方向
// [layout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
//设置headerView的尺寸大小
layout1.headerReferenceSize = CGSizeMake(self.view.frame.size.width, 200);
//该方法也可以设置itemSize
// layout.itemSize =CGSizeMake((clhwidth-105)/4, 150);
layout1.itemSize =CGSizeMake((clhwidth)/4, 150);
NSLog(@"%f",(clhwidth-105)/4);
//2.初始化collectionView
_mainCollectionView1 = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 50, clhwidth, clhheight-50) collectionViewLayout:layout1];
[self.view addSubview:_mainCollectionView1];
_mainCollectionView1.backgroundColor = [UIColor clearColor];
[_mainCollectionView1 registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:cellID1];
[_mainCollectionView1 registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView"];
//4.设置代理
self.mainCollectionView1.delegate = self;
self.mainCollectionView1.dataSource = self;
}
return _mainCollectionView1;
}

2

接下来就进行操作数据源了，通过不同的cellID来判断使用哪个uicollectionView 这里的

//返回section个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 3;
}
//每个section的item个数
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 9;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
if ([self.cellIdStr isEqualToString:cellID1]) {
MyCollectionViewCell *cell = (MyCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellID1 forIndexPath:indexPath];
cell.botlabel.text = [NSString stringWithFormat:@"{%ld,%ld}",(long)indexPath.section,(long)indexPath.row];
cell.backgroundColor = [UIColor yellowColor];
return cell;
}else{
CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellID2 forIndexPath:indexPath];
cell.botlabel.text = [NSString stringWithFormat:@"{%ld,%ld}",(long)indexPath.section,(long)indexPath.row];
cell.backgroundColor = [UIColor yellowColor];
return cell;
}
}

3

关键的是这里了，按钮的判断 点击不同的按钮需要赋值不同的cellID 然后根据self.cellIdStr来进行判断.这里self.mainCollectionView2绝不能通过移除和添加来做，因为uicollectionView会有复用。所以我用了隐藏。

-(void)btnclick:(UIButton*)btn
{
if (btn.tag==0) {
self.cellIdStr=cellID1;
}else if (btn.tag==1){
self.cellIdStr=cellID2;
}
if ([self.cellIdStr isEqualToString:cellID1]) {
self.mainCollectionView2.hidden=YES;
self.mainCollectionView1.hidden=NO;
[_mainCollectionView1 reloadData];
}else{
self.mainCollectionView1.hidden=YES;
self.mainCollectionView2.hidden=NO;
[self.mainCollectionView2 reloadData];
}
}

4

下面附上demo
同一个界面下两个uicollection