How to add Load more cell in UICollectionView?

Question

I want to add load more cell in UICollectionview ? can anyone tell me how can i add load button ? i have created collectionview that works fine but i want to add Load more button in bottom of collection view cell like this

Here's my collection view

#pragma mark <UICollectionViewDataSource>

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
      return 3;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
     switch (section) {
            case 0: return 66;
            case 1: return 123;
     }
     return 31;
 }

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

   NSUInteger row = [indexPath row];
   NSUInteger count = [self.stockImages count];

   if (row == count) {

        //Add load more cell
   }

  DemoCellView *cell = [collectionView dequeueReusableCellWithReuseIdentifier:[DemoCellView reuseIdentifier] forIndexPath:indexPath];

  // Configure the cell
  cell.titleLabel.text = [NSString stringWithFormat:@"%ld", (long)indexPath.item + 1];
  NSLog(@"%@", self.stockImages[indexPath.item % self.stockImages.count]);
  cell.imageView.image = self.stockImages[indexPath.item % self.stockImages.count];

  return cell;
}


#pragma mark <DemoLayoutDelegate>

- (void) collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

     // Do something 
     // Insert new cell after clicking load more data 

}

 - (CGFloat)collectionView:(UICollectionView *)collectionView layout: (UICollectionViewLayout *)collectionViewLayout heightForHeaderInSection:(NSInteger)section {
     return kFMHeaderFooterHeight;
}

  - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout heightForFooterInSection:(NSInteger)section {
    return kFMHeaderFooterHeight;
 }

Answer 1

You can Add a footer

- (UICollectionReusableView *)collectionView:(JSQMessagesCollectionView *)collectionView
           viewForSupplementaryElementOfKind:(NSString *)kind
                                 atIndexPath:(NSIndexPath *)indexPath
{
    if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {

        //load your footer you have registered earlier for load more 
        [super dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter
                                                                             withReuseIdentifier:@“load more footer”
                                                                                    forIndexPath:indexPath];
    }

    return nil;
}

Answer 2

In your cellForItemAtIndexPath method you can check this:

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    ImageCollectionViewCell *cellImage;
    AddMoreCollectionViewCell *addMoreCell;
    if(indexPath.row < [_dataSource numberOfItems]){
        cellImage = [collectionView dequeueReusableCellWithReuseIdentifier:ImageCollectionCellIdentifier
                                                              forIndexPath:indexPath];
        [cellImage configureForMediaViewModel:[_dataSource mediaViewModelForItemIndex:indexPath.row] delegate:self];
        return cellImage;
    }else{
        addMoreCell = [collectionView dequeueReusableCellWithReuseIdentifier:AddMoreCollectionCellIdentifier
                                                                forIndexPath:indexPath];
        addMoreCell.delegate = self;
        return addMoreCell;

    }
}

where ImageCollectionViewCell is the main kind of cells and AddMoreCollectionViewCell is a cell with a plus ('+') symbol and other stuff.

With this method, AddMoreCollectionViewCell always add at end of your collection view.

Hope it helps!