UICollectionView with FlowLayout not scrolling when setting section insets

Question

I am using a UICollectionView programmatically.

I've set its frame as follows:

UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, 3000) collectionViewLayout:flowLayout];

My UICollectionViewFlowLayout has a section inset set as:

flowLayout.sectionInset = UIEdgeInsetsMake(20.0, 20.0, 100.0, 20.0);

I also only have 1 section.

I've set the height to be 3,000 to see if the collection view would scroll but it doesn't. I am setting it to that since the collection view doesn't seem to scroll up or down when I insert new items.

UICollectionView is subclassed from a UIScrollView, which means I can keep resetting the scroll view content size. Would this work properly?

The only issue is that this would work if I know the sizes of all items including how many items are on each row.

If each item had a different size, how would I find out the size of each row? I would need that to add all row sizes and increase the content size height of self.collectionView.

EDIT

Even my suggestion above, resetting the content size, does not work properly! I tried the following when updating my collection view:

 int numberOfRows = self.dataArray.count / 3;
self.collectionView.contentSize = CGSizeMake(self.view.frame.size.width, (numberOfRows * 200) + 300);

This is very ugly though. This is because it assumes all my images are of size 200x200px, which fits 3 images per row (hence the division by 3).

Furthermore, even with the +300 that I have, the last row I can only see about 3/4 of it and not all of it. I have to scroll more and I will be able to see it but it goes back up again to 3/4. Its kind of like the scroll to refresh, where the view only moves if you drag it and when you leave it bumps back to where it was. Why is this happening? Is it just that Apple designed UICollectionView so poorly? This is a little ridiculous... UITableViews adjust their scroll according to their content automatically.

rdelmar · Accepted Answer · 2012-10-01T19:21:32.487

In answering some of your other questions about UICollectionView, I created this demo project, and it scrolls just fine, so I don't know what problem you're having. The only thing I needed to do to make the last row wholly visible was to increase the size of the bottom inset to 90. I also added a completion method to the performBatchUpdates:completion: to automatically scroll so that the last added item is visible (notice that I add some extra items by using performSelector;withObject:afterDelay:). My images are 48x48, and I just set my collection view to the bounds of my controller's view. Here is the code so you can compare it to what you have:

@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegateFlowLayout> {
NSMutableArray *newData;
}
 @property (nonatomic, retain) UICollectionView *collectionView;
 @property (nonatomic, retain) NSMutableArray *results;
 @end

@implementation ViewController

- (void)viewDidLoad {
    self.results = [NSMutableArray array];
    int i = 11;
    while (i<91) {
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"New_PICT00%d.jpg",i]];
        [self.results addObject:image];
        i++;
    }

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    //flowLayout.scrollDirection =  UICollectionViewScrollDirectionHorizontal;

    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    self.collectionView.dataSource = self;
    self.collectionView.delegate = self;
    self.view.backgroundColor = [UIColor blackColor];
    [self.view addSubview:self.collectionView];
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"Cell"];
    //[self.collectionView registerClass:[RDCell class] forCellWithReuseIdentifier:@"myCell"];
    [self.collectionView reloadData];

    [self performSelector:@selector(addNewImages:) withObject:nil afterDelay:3];
}

-(void)addNewImages:(id)sender {
    newData = [NSMutableArray array];
    int i = 102;
    while (i<111) {
        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"New_PICT0%d.jpg",i]];
        [newData addObject:image];
        i++;
    }
    [self addNewCells];
}

-(void)addNewCells {
    NSMutableArray *arrayWithIndexPaths = [NSMutableArray array];
    [self.collectionView performBatchUpdates:^{
        int resultsSize = [self.results count];
        [self.results addObjectsFromArray:newData];
        for (int i = resultsSize; i < resultsSize + newData.count; i++)
            [arrayWithIndexPaths addObject:[NSIndexPath indexPathForRow:i inSection:0]];
        [self.collectionView insertItemsAtIndexPaths:arrayWithIndexPaths];
    }
    completion: ^(BOOL finished){
        [self.collectionView scrollToItemAtIndexPath:arrayWithIndexPaths.lastObject atScrollPosition:UICollectionViewScrollPositionCenteredVertically animated:YES];
    }];
}


- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section {
    return [self.results count];
}

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

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    //cell.iv.image = [self.results objectAtIndex:indexPath.row];
    cell.backgroundColor = [UIColor colorWithPatternImage:[self.results objectAtIndex:indexPath.row]];
    return cell;
}


- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    UIImage *image = [self.results objectAtIndex:indexPath.row];
    return CGSizeMake(image.size.width, image.size.height);
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(10, 10, 90, 10);
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    NSLog(@"Selected Image is Item %d",indexPath.row);
}

score 9 · Answer 2 · answered Oct 04 '12 at 04:24

Setting the height of the UICollectionView to 3000 will make your scrolling problem worse. If the UICollectionView is 3000 pixels tall then it will only ever need to scroll if it has more than 3000 pixels worth of content in it. You should set it to the height of the view it is contained in (same as the width).

AFAIK the also should not set the contentSize directly, instead you need to override the - (CGSize)collectionViewContentSize method in a subclass of UICollectionViewLayout, but generally speaking you shouldn't need to change the content size for normal uses.

I'm not totally clear on what your problem is - is it that when you add more than a screens worth of items you can't scroll?

This was the solution for me. I was using a custom flow layout that removed the vertical gaps between items in a multi column layout. I was getting only about half the items until I did as Simon suggested. I suspect the reason I had the issue is that the number of items queried is based on a standard layout. — Matt__C, Jan 15 '15 at 16:51

score 2 · Answer 3 · answered Nov 07 '12 at 09:39

I've encountered the same problem because I was initializing the elements of my collectionView (i.e. it's DataSource) in the viewWillAppear method.

I finally add just a [self.collectionView reloadData]; and it works just fine!

Maybe you're in the same case.

UICollectionView with FlowLayout not scrolling when setting section insets

3 Answers3

Linked