Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – 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?

Tags:

2

Answers


  1. 0

    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);
}
    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search