6

我正在尝试通过子类化 UICollectionViewFlowLayout 为 UICollectionView 定义自定义流布局。我想要的布局如下所示：

布局

如您所见，我已将集合视图沿水平中间分隔线分成 2 行相等的行。顶行被分成三等分以给出 3 列，而底行被分成两半以给出 2 列。

一切似乎都正常工作并且看起来很好，直到您滚动到右侧（集合视图滚动到 UICollectionViewScrollDirectionHorizo​​ntal），并且在 5 个单元格完成渲染后看到有很大的空间：

布局

我不知道为什么会发生这种情况，但是看起来空白空间看起来与顶行的单元格的宽度大致相同；集合视图宽度的三分之一。

这是我设置 UICollectionView 和 UICollectionViewFlowLayout 子类的方法

- (void)loadView {
    [super loadView];
    [self setupCollectionView];
}

- (void)setupCollectionView {
    CustomFlowLayout *flowLayout = [[CustomFlowLayout alloc] init];
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    flowLayout.minimumInteritemSpacing = 0.0;
    flowLayout.minimumLineSpacing = 0.0f;

    CGRect frame = CGRectMake(0, 0, 748, 1024);
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:flowLayout];

    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:CollectionViewCellID];

    collectionView.delegate = self;
    collectionView.dataSource = self;

    collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

    collectionView.backgroundColor = [UIColor whiteColor];

    collectionView.pagingEnabled = YES;


    self.collectionView = collectionView;

    [self.view addSubview:self.collectionView];
}

#pragma mark - UICollectionViewDataSource
- (NSInteger )numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return 5;
}

集合视图中项目的大小由给定部分的布局配置定义，所以我这样实现collectionView:layout:sizeForItemAtIndexPath:：

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

    return [collectionViewLayout layoutAttributesForItemAtIndexPath:indexPath].size;

}

我的 UICollectionViewLayout 的自定义子类实现如下：

@implementation CustomFlowLayout

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSArray* attributesToReturn = [super layoutAttributesForElementsInRect:rect];
    for (UICollectionViewLayoutAttributes* attributes in attributesToReturn) {
        if (nil == attributes.representedElementKind) {
            NSIndexPath* indexPath = attributes.indexPath;
            attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame;
        }
    }
    return attributesToReturn;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes* currentItemAttributes = [super layoutAttributesForItemAtIndexPath:indexPath];

    if (!currentItemAttributes) {
        currentItemAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    }

    float height = self.collectionView.frame.size.height;
    float width = self.collectionView.frame.size.width;

    CGRect frame = CGRectZero;    
    switch (indexPath.row) {
        case 0:
            frame.size = CGSizeMake(width/3, height/2);
            frame.origin = CGPointMake(0, 0);
            break;
        case 1:
            frame.size =  CGSizeMake(width/3, height/2);
            frame.origin = CGPointMake(width/3, 0);
            break;
        case 2:
            frame.size =  CGSizeMake(width/3, height/2);
            frame.origin = CGPointMake(2*width/3, 0);
            break;
        case 3:
            frame.size =  CGSizeMake(width/2, height/2);
            frame.origin = CGPointMake(0, height/2);
            break;
        case 4:
            frame.size =  CGSizeMake(width/2, height/2);
            frame.origin = CGPointMake(width/2, height/2);
            break;
        default:
            break;
    }

    currentItemAttributes.frame = frame;
    currentItemAttributes.size = frame.size;
    return currentItemAttributes;
}

任何人都知道为什么在渲染所有单元格后我有很大的空白空间？或者有没有人有更好的方法来渲染我所追求的布局。所有代码都可在此处作为示例 XCode 项目获得。非常感谢答案、提示、想法、请求请求。

4

1 回答 1

4

问题似乎是，当有两行宽度不同的单元格时，collectionview 的 contentSize 的计算方式是在右侧留下一个空白区域。解决问题需要一个简单的方法：

- (CGSize)collectionViewContentSize {
    return CGSizeMake(1024, 748);
}

使用此处的更改更新了 Github 存储库。希望这对将来的某人有所帮助。

于 2013-05-31T18:58:32.403 回答