Make UICollectionViewCell exactly fit available space

Question

My cells are squares and look good at any size. I am looking to find the largest size for cells so that displaying all of them will not require scrolling.

And by example, this screen shot is great for 3 players, but kicking it up to 12 players makes them scroll out of bounds, which is to be avoided.

Is there a way to accomplish this?

enter image description here

a similar, perhaps simpler, question ... http://stackoverflow.com/questions/24915443/uicollectionview-simply-fit-cell-to-width — Fattie, Jul 23 '14 at 16:01

William Entriken · Accepted Answer · 2019-02-05T16:26:52.693

Based on rdelmar's code above with all the finesse taken out. Brute force calculation ensure the correct answer in some edge cases the other answer fails at.

Uses binary search for efficiency.

// Make the cells fit
override func viewDidLayoutSubviews() {
    var highestWorking = 0
    var lowestNotWorking = 9999
    while lowestNotWorking > highestWorking + 1 {
        let currentTest = (highestWorking + lowestNotWorking) / 2
        let cols = Int(playerPhotoCollectionView.frame.size.width + 10) / (currentTest + 10)
        let rows = Int(playerPhotoCollectionView.frame.size.height + 10) / (currentTest + 10)
        if cols * rows >= game.numberOfPlayers {
            highestWorking = currentTest
        } else {
            lowestNotWorking = currentTest
        }
    }
    let size = CGSize(width: CGFloat(highestWorking), height: CGFloat(highestWorking))
    (self.playerPhotoCollectionView.collectionViewLayout as! UICollectionViewFlowLayout).itemSize = size
    super.viewDidLayoutSubviews()
}

rdelmar · Answer 2 · 2013-12-15T06:46:30.453

Solving this problem is mostly algebra with a little logic thrown in. First, you need to get the aspect ratio of the collection view, so you know whether you should have more rows or more columns. Once you know that, you can calculate the itemsPerRow, and the numberOfRows. Since you want your cells to be squares, you need to use the smaller of the two sizes that you calculate for how many items will fit in a row or column. When you calculate the sizes, you need to take in to account the minimum spacings in each direction. Here is a little test project that shows how I did it.

#define PLAYERS 4.0
#import "ViewController.h"

@interface ViewController ()
@property (weak,nonatomic) IBOutlet UICollectionView *collectionView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [(UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout setMinimumInteritemSpacing:10];
    [(UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout setMinimumLineSpacing:10];
}

-(void)viewDidLayoutSubviews {
    CGFloat aspectRatio =  (self.collectionView.bounds.size.height/self.collectionView.bounds.size.width);
    int itemsPerRow = (aspectRatio > 1)? floorf(pow(PLAYERS,.5)) : ceilf(pow(PLAYERS,.5));
    if (aspectRatio >1) {
        itemsPerRow = itemsPerRow - (floorf(aspectRatio) - 1);
    }else{
        itemsPerRow = itemsPerRow - (floorf(1/aspectRatio) - 1);
    }
        int numberOfRows = ceilf(PLAYERS/itemsPerRow);
        CGFloat width = (self.collectionView.bounds.size.width - ((itemsPerRow - 1) *10)) / itemsPerRow;
        CGFloat height = (self.collectionView.bounds.size.height - ((numberOfRows - 1) *10)) / numberOfRows;
        CGFloat dim = MIN(width, height);
        [(UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout setItemSize:CGSizeMake(dim,dim)];
        [self.collectionView reloadData];
}


-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return PLAYERS;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *cellIdentifier = @"Cell";
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    return cell;
}

Thanks for your help. The math was not working for cases where there is only one row, so I resorted to a brute force method posted below. — William Entriken, Dec 15 '13 at 16:31
@FullDecent, yeah, I tested some more after I posted this, and found some edge cases that didn't work either, especially when the shape of the collection view was far from square. — rdelmar, Dec 15 '13 at 16:43

score 0 · Answer 3 · answered Jun 20 '16 at 21:24

Here is a new solution in Swift. It uses binary search for better performance.

Assumptions:

Your collection view has only one section
Your screen is smaller than 9999 pixels
Your cells are square (otherwise use currentTest as the longest size and edit the rows or cols, which ever is the smaller aspect size)

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    var highestWorking = 0
    var lowestNotWorking = 9999
    while lowestNotWorking > highestWorking + 1 {
        let currentTest = (highestWorking + lowestNotWorking) / 2
        let cols = Int(playerPhotoCollectionView.frame.size.width + 10) / (currentTest + 10)
        let rows = Int(playerPhotoCollectionView.frame.size.height + 10) / (currentTest + 10)
        if cols * rows >= self.playerCount {
            highestWorking = currentTest
        } else {
            lowestNotWorking = currentTest
        }
    }
    let size = CGSizeMake(CGFloat(highestWorking), CGFloat(highestWorking))
    (self.playerPhotoCollectionView.collectionViewLayout as! UICollectionViewFlowLayout).itemSize = size
}

Make UICollectionViewCell exactly fit available space

3 Answers3