如何在目标 c 的每一行上创建一个包含 3 个单元格的集合视图

Posted 2023-03-11

【中文标题】如何在目标 c 的每一行上创建一个包含 3 个单元格的集合视图

【英文标题】：How to create a collectionview with 3 cells on every row in objective c

【发布时间】：2021-06-14 14:32:54

【问题描述】：

我正在尝试在目标 c 的每一行创建一个包含 3 个项目的集合视图。这是我的代码：

-(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);

它看起来像左图，但我希望它看起来像右图。

我做错了什么，是否可以修复它？

【参考方案1】：

你可以试试这个-

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;

【参考方案2】：

要使用collectionview 表示3 列，每个单元格的宽度必须为显示的1/3。 （因为 1/3 + 1/3 + 1/3 = 1）

所以试试下面的代码，我已经改变了单元格的宽度：

- (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);

【讨论】：

它可以工作，但是按钮变大并且它们之间没有间距。我希望大小与图像按钮相同。

在ios开发中，必须手动计算margin、padding、spacing。如果您希望按钮更小，可以按百分比或硬值调整宽度。如果要为单元格添加更多间距，可以参考 minimumInteritemSpacing 和 minimumLineSpacing。你到底想做什么？让我帮你。