iOS Define Number of Cell according to Page in UICollectionview (Collectionview with Paging)

Question

I am working on Collectionvew with Paging . I am Successfully able to done collectionview with Paging. and It's work perfectly.

But the problem is i need only 10 cell in 1 page , then another 10 cell 2nd page and Next 10 cell in 3rd page. but I dont know How can i achive it when page changed.And i also want to change the title when page changed like , Easy ,Medium and Hard(Levels).

Currently i take 30 cells in collectionview . Here is my methods for collectionview ,

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView
     numberOfItemsInSection:(NSInteger)section
{
       return kNumberOfCells;
}

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

    static NSString *identifier = @"GameCollectionViewCell";
    GameCollectionViewCell *cell = (GameCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];

    if (cell == nil)
    {
        NSArray *xib = [[NSBundle mainBundle] loadNibNamed:@"HomeCollectionViewCell" owner:self options:nil];
        cell = [xib objectAtIndex:0];
    }
    cell.lblLevel.text=[NSString stringWithFormat:@"%d",indexPath.item+1];
    cell.lblLevelPoints.text=@"points";
    return cell;
}

#pragma mark – UICollectionViewDelegateFlowLayout

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    float width = collectionView.frame.size.width/6.4;//120
    float height = collectionView.frame.size.height/4;//120
    return CGSizeMake(width,width);
}
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(8.0, 14.0, 5.0, 14.0);//TOP , LEFT ,BOTTOM ,RIGHT
}

Output Currently i am getting :-

score 1 · Accepted Answer · edited May 23 '17 at 12:01

1

There are two solutions :

Solution 1 : You can take number of section 3. Each section with 10 items. With each section you have change current page of UIPageControl and change title too.

Solution 2:

Place PageControl in your view or set by Code.
Set UIScrollViewDelegate

In Collectionview-> cellForItemAtIndexPath (Method) add the below code for calculate the Number of pages,

int pages =floor(ImageCollectionView.contentSize.width/ImageCollectionView.frame.size.width);

[pageControl setNumberOfPages:pages];

Add the ScrollView Delegate method

 pragma mark - UIScrollVewDelegate for UIPageControl

    - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
    {
    CGFloat pageWidth = ImageCollectionView.frame.size.width;
    float currentPage = ImageCollectionView.contentOffset.x /   pageWidth;

    if (0.0f != fmodf(currentPage, 1.0f))
    {
         pageControl.currentPage = currentPage + 1;
    }
    else
    {
    pageControl.currentPage = currentPage;
    }
    NSLog(@"finishPage: %ld", (long)pageControl.currentPage);
    }

Reference Link : Collectionview + Pagecontrol

Update:

There is one sample code also made by me on Github. It help you : https://github.com/maniyarpayal/PagingWithCollectionView

edited May 23 '17 at 12:01

Community

1
1

answered Apr 30 '16 at 06:44

Payal Maniyar

4,293
3
25
51

Thanks for the replay. I want to try 1st method can you please explain bit more ? – Badal Shah Apr 30 '16 at 07:30
Take one `UICollectionView` and one `UIPageControl`. In `UICollectionView` as you have mentioned paging will be enabled. `UICollectionView` will have 3 sections. Each section of collection view have 10 itemcells. Header of section will be easy,Medium and hard as per the section number. When section changes you have to change current page of 'UIPageControl'. In `- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath`this method you can change current page of page control. – Payal Maniyar Apr 30 '16 at 07:37
thanks for the demo. Data Flowlayout.h and .m file missing in demo. – Badal Shah May 02 '16 at 05:14
I have solved error in sample code. Download again and please check it. – Payal Maniyar May 02 '16 at 05:30

score 0 · Answer 2 · answered Apr 30 '16 at 06:51

try this delegate methods,

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{

    return CGSizeMake((self.view.frame.size.width / 5) , self.view.frame.size.height / 2);

}


- (NSUInteger)maximumNumberOfColumnsForCollectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout
{

     return 5;
}

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

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

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{

    return UIEdgeInsetsMake(0, 0, 0, 0);
}

i have also same problem, then use the above methods its will working for me, hope its helpful.

score 0 · Answer 3 · answered Apr 30 '16 at 14:11

you can use this delegate method but you have to customise according to your requirement because i did not mention distance between cells and x-origin .and you have to do minus those distance from view width. hope this will help you.

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
    {

    return CGSizeMake((self.view.frame.size.width / 10) , self.view.frame.size.height / 2);

 }

iOS Define Number of Cell according to Page in UICollectionview (Collectionview with Paging)

3 Answers3