Setting size of UICollectionViewCell in a way that

Question

I'm using an UICollectionView on which I want to place seven cells side by side. The whole screen should be used for this. Currently, I'm using the width of the collection view and divide it by seven. Now I get an item width of 45.71429 on an iPhone 4. Between some cells there is an interim spacing. How can I handle this? I want to fill out the whole screen and all items should have the same size.

One option which comes to my mind is to round the value and use the remaining value as inset. But isn't there a better way?

Answer 1

Step 1: Implement UICollectionViewDelegateFlowLayout(if not done).

Step 2: Use delegate method of UICollectionViewDelegateFlowLayout.

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize
{
return CGSizeMake((UIScreen.mainScreen().bounds.width)/7,120); //use height whatever you wants.
}

Step 3: Go to XIB or StoryBoard where you have your CollectionView.

Step 4: In XIB or StoryBoard where you have your CollectionView, click on CollectionView.

Step 5: Go to InterfaceBuilder, then in second last tab (ie: Size Inspector) set Min Spacing

For Cells = 0

For Lines = 0

That it.

Answer 2

Try this!

Most importantly add UICollectionViewDelegateFlowLayout and UICollectionViewDelegate to your controller

Implement below methods for inset and sizeForItem for your cell size.

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(0, 0, 0, 0)
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // Here, I need 3 equal cells occupying whole screen width so i divided it by 3.0. You can use as per your need.
    return CGSize(width: UIScreen.main.bounds.size.width/3.0, height: UIScreen.main.bounds.size.width/3.0)                
}

For 0 spacing between cells, we need to specify it’s layout like this.

let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
layout.minimumInteritemSpacing = 0
layout.minimumLineSpacing = 0
self.collectionView!.collectionViewLayout = layout

Thanks. Hope this helps!

Answer 3

As you already figured out it's impossible to divide a 320 point wide screen into 7 equal portions.

But if a cell is a half or even one point larger or smaller than another one nobody will notice. You can use a little bit of math to get integer pixel values (i.e. 0.5 points).

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    var size: CGSize!
    let column = indexPath.item % 7
    let width = collectionView.bounds.size.width
    let height = 80.0

    if width == 320.0 {
        // iPhone 5
        // 46 + 0,5 + 45 + 0,5 + 45 + 0,5 + 45 + 0,5 + 45 + 0,5 + 45 + 0,5 + 46
        if column == 0 || column == 6 {
            size = CGSize(width: 46, height: height)
        }
        else {
            size = CGSize(width: 45, height: height)
        }
    }
    else if width == 375.0 {
        // iPhone 6
        // 53 + 0,5 + 53 + 0,5 + 53 + 0,5 + 54 + 0,5 + 53 + 0,5 + 53 + 0,5 + 53
        if column == 3 {
            size = CGSize(width: 54, height: height)
        }
        else {
            size = CGSize(width: 53, height: height)
        }
    }
    else if width == 414.0 {
        // iPhone 6 Plus
        // 58 + 0,5 + 59 + 0,5 + 59 + 0,5 + 59 + 0,5 + 59 + 0,5 + 59 + 0,5 + 58
        if column == 0 || column == 6 {
            size = CGSize(width: 58, height: height)
        }
        else {
            size = CGSize(width: 59, height: height)
        }
    }
    else {
        println("Unhandled Width: \(width)")
        abort()
    }
    return size
}

That's just an example, that I had ready because I am currently working on a calendar view. It has a 1 pixel spacing between each cell. For a 320 pt wide cell layout without spacing you could use something like 45.5+45.5+46+46+46+45.5+45.5

Answer 4

Try this out, declare these variables

  NSInteger insets_Top=5;
  NSInteger insets_Bottom=5;
  NSInteger insets_Left=5;
  NSInteger insets_Right=5; 

and add these methods

 - (CGSize)collectionView:(UICollectionView *)collectionView layout:   (UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:   (NSIndexPath *)indexPath
{
    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    CGSize img_size=CGSizeMake(screenWidth/num_items-   (insets_Right+insets_Left), screenWidth/num_items);
    return img_size;
}

  - (UIEdgeInsets)collectionView:
 (UICollectionView *)collectionView layout:  (UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:  (NSInteger)section
   {
      return    UIEdgeInsetsMake(insets_Top,insets_Left,insets_Bottom,insets_Right);
   }

Here num_items=7 as in your case you want number of cells in a row to be 7