一个视图显示多个UICollectionView，但是显示的item数不对

Posted 2023-03-14

【中文标题】一个视图显示多个UICollectionView，但是显示的item数不对

【英文标题】：Displaying multiple UICollectionView in one view, but the number of items displayed is wrong

【发布时间】：2013-10-04 02:05:02

【问题描述】：

我试图在一个视图中显示多个 UICollectionView。该视图是折叠式手风琴式视图，using this custom AccordionView control。

目标是显示多个部分的图像缩略图，每个部分包含一个 UICollectionView，如下所示：

数据在下面以 NSArray self.wallpaperCollectionArray 的形式提供，其中 wallpaper_id 是缩略图的路径：

(
    
        name = "Bold Statement";
        "wallpaper_id" = (
            "bs-better",
            "bs-look-forward",
            "bs-now-never",
            "bs-stay-hype",
            "bs-you-awesome"
        );

    ,
    
        name = "Dreamcatcher";
        "wallpaper_id" = (
            "dc-disney",
            "dc-fear",
            "dc-paulo",
            "dc-quit"
        );
    ,
    
        name = "Goods from the good";
        "wallpaper_id" = (
            "gg-get-hurt",
            "gg-jobs",
            "gg-lennon",
            "gg-oprah"
        );
    ,
    
        name = "Random Set";
        "wallpaper_id" = (
            "rs-face",
            "rs-god-knows",
            "rs-good",
            "rs-holtz",
            "rs-positive",
            "rs-read",
            "rs-think"
        );
    ,
    
        name = Traveling;
        "wallpaper_id" = (
            "tr-miller"
        );
    
)

这是我生成 UICollectionView 的代码：

- (void)loadView 
    UIView *libraryView = [UIView new];

    CGFloat maxWidth = [[UIScreen mainScreen] bounds].size.width;
    CGFloat maxHeight = [[UIScreen mainScreen] bounds].size.height;

    // Setup accordion
    self.libraryAccordionView = [[AccordionView alloc] initWithFrame:CGRectMake(0, 0, maxWidth, maxHeight)];

    // Re-usable layout for the UICollectionView(s) inside the for loop
    UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];
    layout.itemSize = CGSizeMake(thumbnailSize, thumbnailSize);
    layout.minimumInteritemSpacing = 0;
    layout.minimumLineSpacing = 1;

    // Looping through the array contents:
    int i = 0;
    for(NSDictionary *currentCollectionDictionary in self.wallpaperCollectionArray) 
        NSArray *wallpaperIDs = [currentCollectionDictionary valueForKeyPath:@"wallpaper_id"];
        NSInteger numberOfWallpapers = [wallpaperIDs count];

        // One row contains 4 thumbnails, while each thumbnail's height is 79.
        // So, collectionView height = (total item / 4 + 1) * 79
        NSInteger collectionViewHeight = (numberOfWallpapers / 4 + 1) * thumbnailSize;
        UICollectionView *currentCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, maxWidth, collectionViewHeight)
                                                                     collectionViewLayout:layout];
        [currentCollectionView setDataSource:(id)self];
        [currentCollectionView setDelegate:(id)self];
        NSString *cellIdentifier = [NSString stringWithFormat:@"cell_%d", i];
        [currentCollectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];

        // Trick to let the delegate and data source functions deal with the multiple UICollectionView's
        [currentCollectionView setTag:i];

        // * --- Create header --- * //
        UIButton *currentHeader = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 0, 30)];
        NSString *currentHeaderTitle = [currentCollectionDictionary valueForKeyPath:@"name"];
        [currentHeader setTitle:currentHeaderTitle forState:UIControlStateNormal];

        [self.libraryAccordionView addHeader:currentHeader withView:currentCollectionView];
        i++;
    

    [libraryView addSubview:self.libraryAccordionView]
    [self setView:libraryView];

数据源方法：

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

    NSInteger index = collectionView.tag;
    NSInteger numberOfWallpaper = [[[self.wallpaperCollectionArray objectAtIndex:index] valueForKeyPath:@"wallpaper_id"] count];
    NSLog(@"index is: %d --- # of item is: %d", index, numberOfWallpaper);
    return numberOfWallpaper;


// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

    NSInteger index = collectionView.tag;
    NSString *cellIdentifier = [NSString stringWithFormat:@"cell_%d", index];

    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier
                                                                           forIndexPath:indexPath];

    NSString *thumbnailName = [[[self.wallpaperCollectionArray objectAtIndex:index] valueForKeyPath:@"wallpaper_id"] objectAtIndex:indexPath.row];

    UIImageView *wallpaperImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:thumbnailName]];
    [cell addSubview:wallpaperImage];
    return cell;

问题是，所有 UICollectionView 仅显示 一个 缩略图，尽管它们似乎正在加载正确的缩略图：

起初我意识到问题可能出在- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section 方法上。

但是，在这个测试NSLog(@"index is: %d --- # of item is: %d", index, numberOfWallpaper); 中，numberOfWallpaper 的结果是正确的：

2013-10-04 08:50:43.992 quo.mk.e[15046:11603] index is: 4 --- # of item is: 1
2013-10-04 08:50:43.993 quo.mk.e[15046:11603] index is: 3 --- # of item is: 7
2013-10-04 08:50:43.994 quo.mk.e[15046:11603] index is: 2 --- # of item is: 4
2013-10-04 08:50:43.994 quo.mk.e[15046:11603] index is: 1 --- # of item is: 4
2013-10-04 08:50:43.995 quo.mk.e[15046:11603] index is: 0 --- # of item is: 5

所以，我返回了正确数量的 numberOfItemsInSection 的缩略图。为什么 UICollectionView 只显示一个缩略图？

【参考方案1】：

原来问题在于布局的重用。使用多个 UICollectionView，我们需要创建自己的单独布局。由于某些原因。

在- (void)loadView 中的循环内移动布局创建解决了这个问题：

int i = 0;
for(NSDictionary *currentCollectionDictionary in self.wallpaperCollectionArray) 
    NSArray *wallpaperIDs = [currentCollectionDictionary valueForKeyPath:@"wallpaper_id"];
    NSInteger numberOfWallpapers = [wallpaperIDs count];

    // Layouting
    UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];
    layout.itemSize = CGSizeMake(thumbnailSize, thumbnailSize);
    layout.minimumInteritemSpacing = 0;
    layout.minimumLineSpacing = 1;

    ...

【讨论】：

你拯救了我的一天！