Issues laying UICollectionView to create 2x3 grid iOS

Question

I am attempting to lay my UICollectionView out such that it is a 2x3 grid per page. Here is what I am getting so far:

enter image description here

As you can see, the next "page" is peeping in from the right, which I don't want. I figured if I know my width is always going to be 320pts (iPhone only), then I would want my cells to be 130pts in width with 15pts on either side.

Code for layout delegate:

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

  return CGSizeMake(130, 130);
}

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

And also cellForItemAtIndexPath:

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView 
                 cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    CustCollectionViewCell *cell = 
      [collectionView dequeueReusableCellWithReuseIdentifier:kReuseID 
                                            forIndexPath:indexPath];

    //Set up list name label
    cell.LblListName.font = [self getDefaultFontWithSize:15.0f];
    cell.LblListName.textColor = fontAndTertiaryColor;
    cell.LblListName.textAlignment = NSTextAlignmentCenter;
    cell.LblListName.text = @"Failtron";
    //cell.LblListName.adjustsFontSizeToFitWidth = YES;

    cell.backgroundColor = secondaryColor;
    cell.parallaxIntensity = kParallaxMotion;
    [Utilities createViewBorder:cell];

    return cell;
}

I thought an inset would act like padding in CSS but I believe I'm off the mark with that one, I should also note that in the UIStoryboard my layout is set to flow. Please let me know if I am missing any relevant code, this is my first attempt with a UICollectionView. I would like this to scroll horizontally as well.

So you want the collectionview to scroll horizontally, but you don't want to see the next page. Is that right? — jhilgert00, Nov 23 '13 at 16:54

score 1 · Accepted Answer · edited Mar 04 '14 at 12:13

Ok, there are tons of ways to manipulate layouts for a UICollectionView, but sounds like since you are using "flow" you can just implement <UICollectionViewDelegateFlowLayout> in your .h and then use the following methods to tweak your layout to your liking:

#pragma mark – UICollectionViewDelegateFlowLayout 

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

    // Size of the cell
    CGSize retval = CGSizeMake(130,130);
    return retval;
}

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

    //top, left, bottom, right
    return UIEdgeInsetsMake(0, 20, 0, 20);
}

- (CGFloat)collectionView:(UICollectionView *)collectionView 
                   layout:(UICollectionViewLayout *)collectionViewLayout
            minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {

    //Minimum spacing between cells
    CGFloat interimSpacing = 0.0f;
    return interimSpacing;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView 
                   layout:(UICollectionViewLayout *)collectionViewLayout 
           minimumLineSpacingForSectionAtIndex:(NSInteger)section {

    // Minimum spacing between lines. In your case, 
       this is the distance between columns
    // If your scroll direction was vertical, 
       this would be the distance between rows
    CGFloat lineSpacing = 20.0f;
    return lineSpacing;
}

I've prepopulated this code with some values that should be pretty darn close to what you wanted to accomplish.

Alternatively, all of this can be done in Interface Builder by selecting the UICollectionView and adjusting the values in the Size Inspector, albeit more confusing in my opinion.

Also, I'd like to note, that if you implement ``, you don't need `` because the former is a subclass of the latter. — jhilgert00, Nov 23 '13 at 17:39
That did it! Thanks for the help, and I agree doing this in IB was a little cumbersome for me. — Jason Renaldo, Nov 23 '13 at 17:48
@jhilgert00 Not really a subclass, as this is a protocol. The layout protocol also "conforms to" collection view delegate, a subclass is something quite different. — Mundi, Nov 24 '13 at 23:24

Issues laying UICollectionView to create 2x3 grid iOS

1 Answers1