CODEWITHSUNDEEP
iosobjective-cxcode
Mat Koffman
Mat Koffman

Reputation: 607

How to create a collectionview with 3 cells on every row in objective c

I am trying to create a collectionview with 3 items on every row in objective c. Here is my code:


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

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return items.count;
}

-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    collectionView.backgroundColor = [UIColor clearColor];
    
    NSString* buf = items[indexPath.row];
    
    CollectionCell *cell = (CollectionCell*)[collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath];
    
    [cell loadCell:buf];
    
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    UIColor *leftColor = [UIColor colorWithRed:255.0/255.0 green:255.0/255.0 blue:255.0/255.0 alpha:0.5];
    cell.layer.cornerRadius = ((screenBounds.size.width)*0.25)/2;
    cell.layer.borderColor = leftColor.CGColor;
    cell.layer.borderWidth = 2;
    
    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    CGFloat boxWidth;
        boxWidth =  ((screenBounds.size.width)*0.25);
        bottomSpacing = 17;
    
    return CGSizeMake(boxWidth, boxWidth);
}

It look like the left but I want it to look like the right image. enter image description here

What am I doing wrong and is it possible to fix it?

Upvotes: 0

Views: 73

Answers (2)

Tarun Tyagi
Tarun Tyagi

Reputation: 10102

You can try this -

CGSize itemSize = CGSizeMake(100, 100); // or whatever the size you want
CGFloat minimumHorizontalSpacing = 10;
CGFloat minimumVerticalSpacing = 10;
CGFloat numberOfColumns = 3;

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView 
                        layout:(UICollectionViewLayout *)collectionViewLayout 
        insetForSectionAtIndex:(NSInteger)section {
    
    CGFloat fullWidth = collectionView.bounds.size.width;
    CGFloat itemsWidth = (numberOfColumns * itemSize.width);
    CGFloat horizontalSpacing = ((numberOfColumns - 1) * minimumHorizontalSpacing);
    CGFloat itemsTotalWidth = (itemsWidth + horizontalSpacing);
    
    CGFloat horizontalInset = ((fullWidth - itemsTotalWidth) / 2);
    CGFloat verticalInset = 20;
    return UIEdgeInsetsMake(verticalInset, horizontalInset, verticalInset, horizontalInset)
}

- (CGSize)collectionView:(UICollectionView *)collectionView 
                  layout:(UICollectionViewLayout*)collectionViewLayout 
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    return itemSize; 
}

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

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

Upvotes: 1

minchaej
minchaej

Reputation: 1834

To represent 3 columns with collectionview, each cell has to be width of 1/3 of the display. (Since 1/3 + 1/3 + 1/3 = 1)

So try the code below, I have changed the width of the cell:

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGRect screenBounds = [[UIScreen mainScreen] bounds];
    CGFloat boxWidth;
        boxWidth =  ((screenBounds.size.width)/3.0); //Change made here
        bottomSpacing = 17;
    
    return CGSizeMake(boxWidth, boxWidth);
}

Upvotes: 0

Related Questions