How to make two collection views appear on the same view controller?

Question

I want to have two UICollectionView in same page. Two UICollectionView that would show different data as required. How can I do this? Thanks in advance.

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

    static NSString *cellIdentifierHall2 = @"hall2";

    /* Uncomment this block to use subclass-based cells */
    timeCell *cell = (timeCell *)[myCollectionViewHall2 dequeueReusableCellWithReuseIdentifier:cellIdentifierHall2 forIndexPath:indexPath];

    [cell.timeButton setTitle:[[allSimilarMutableArray valueForKey:@"showTime"] objectAtIndex:indexPath.item] forState:UIControlStateNormal];


    return cell;

}

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

    static NSString *cellIdentifierHall3 = @"hall3";

    /* Uncomment this block to use subclass-based cells */
    timeCell *cell = (timeCell *)[myCollectionViewHall3 dequeueReusableCellWithReuseIdentifier:cellIdentifierHall3 forIndexPath:indexPath];

    [cell.timeButton setTitle:[[allSimilarMutableArray valueForKey:@"showTime"] objectAtIndex:indexPath.item] forState:UIControlStateNormal];


    return cell;

}

Answer 1

You can do the same by differentiating in 'cellForItemAtIndexPath'

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

    if (collectionView == self.collectiveview1) {

         UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath];
    UILabel *titleLabel = (UILabel *)[cell viewWithTag:100];
    [titleLabel setText:celldata];

    UIImageView *imageView = (UIImageView *)[cell viewWithTag:200];
    [imageView setImage:[UIImage imageNamed:connimage]];

    return cell;

    } else  {

         static NSString *cellIdentifier = @"FollowCell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    UILabel *titleLabel = (UILabel *)[cell viewWithTag:100];
    [titleLabel setText:celldata];

    UIImageView *imageView = (UIImageView *)[cell viewWithTag:200];
    [imageView setImage:[UIImage imageNamed:cellImage]];

    return cell;

    }
}

Hope it helps.

Answer 2

Because both UICollectionView's respond to the same protocol: UICollectionViewDataSource, you must differentiate between them in the method:

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

You can do this multiple ways, depending on how your UICollectionView's are created.

1. If you created them in Storyboard or in Interface Builder, link them to your class using IBOutlet's. Then you can distinguish between them with the following code:

if (collectionView == self.firstCollectionView) { ... }
else if (collectionView == self.secondCollectionView) { ... }

Both firstCollectionView and secondCollectionView must be properties in your View Controller class.

2. Another way is to set tags to them either on Storyboard/Interface Builder or in code with tag property.

So you can for example do this:

self.firstCollectionView.tag = 100;
self.secondCollectionView.tag = 200;

And then again in the cellForItemAtIndexPath method you can distinguish them like:

if (collectionView.tag == 100) { ... }
else if (collectionView.tag == 200) { ... }

Even if you created the collection views in code, you can use the same techniques. Either create properties that point strongly to the collections and compare the pointers or compare them by tags.

Answer 3

The delegate method for cellForItemAtIndexPath also passes in the instance of the collection view it's requesting a cell for. This code snippet is correcting the code example you put in the original post. To take your example, here's how you do this:

- (void)viewDidLoad {

    // Initialization of collectionView done previously, set delegates to yourself.
    [self.collectionView1 setDelegate:self];
    [self.collectionView2 setDelegate:self];
}

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

    // Setting the cellIdentifier to "hall2" by default, no need to check twice.
    NSString *cellIdentifier = @"hall2";
    // The collectionView requesting a cell is collectionView2, change the cellIdentifier
    if ([collectionView isEqual:self.collectionView2]) {

        cellIdentifier = @"hall3";
    }

    // Since the collectionView we need is already passed, just dequeue and reuse from it.
    timeCell *cell = (timeCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

    [cell.timeButton setTitle:[[allSimilarMutableArray valueForKey:@"showTime"] objectAtIndex:indexPath.item] forState:UIControlStateNormal];

    return cell;

}

I hope this helps you understand how to use multiple collection views with the same delegate.

Answer 4

You can tag the two collection view with different value.

Answer 5

In order to add two UICollectionView in the same page, i user collectionView.tag to identify each of them and decide witch data to pass to each one. Also, i needed to define different cell sizes for each collection view, but in this method collectionView.tag wasn't working for me. So i had to define a different UICollectionViewLayout to each UICollectionView and then:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    if (collectionViewLayout == layout1) {
        return CGSizeMake(100,100);
    } else {
        return CGSizeMake(50, 50);
    }
}