UICollectionViewCell标签被重用并错误放置

Question

我有一个带有原型单元格的UICollectionView。单元格加载并显示图像并显示标签。由于单元格具有不同的大小，因此可通过CollectionViewFlowLayout更改它们。这很好。

当我在模拟器中滚动视图时，标签似乎被重复使用并错误地添加到图像上。如何确保不会发生这种情况并且图像在集合视图上只有一个标签？

UICollectionView

#pragma mark - Collection view 
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    self.Data = [NSArray arrayWithObjects:@1, @2, @3, @4, @5, @6, @7, @8, @9, @10, @11, @12, @13, @14, @15, @16, nil];
    return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.magazineLayout.count;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MagazineCell *mCell = (MagazineCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    int item = [indexPath row];

    mCell.backgroundColor = [UIColor lightGrayColor];

    // Set Image
    UIImage *image;
    image = [UIImage imageNamed:@"testimage.png"];
    mCell.imageView.image = image; 


    // Set Label
    NSString *title = [[NSString alloc] initWithFormat:@"Image %@", self.Data[item]];
    [mCell addSubview:[self cellTitle:title indexPath:indexPath]];

    return mCell; 
}

// Title will be reused and placed wrongly on pictures !
-(UILabel *)cellTitle:(NSString *)name indexPath:(NSIndexPath *)indexPath {

    CGSize itemSize = [self collectionView:self.collectionView layout:self.collectionView.collectionViewLayout sizeForItemAtIndexPath:indexPath];
    int top = itemSize.height - 40;
    int width = itemSize.width;

    UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0, top, width, 40)];
    title.textColor = [UIColor blackColor];
    title.text = name;
    title.backgroundColor = [UIColor whiteColor];
    title.alpha = 0.5f;

    return title; 
}

修改：解决方法解决方案

viewWithTag工作正常，但我无法重新定位标签。可悲的是，我认为这将是最好的方式。这里我没有viewWithTag的解决方法：

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MagazineCell *mCell = (MagazineCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    mCell.backgroundColor = [UIColor lightGrayColor];

    // Set Image
    UIImage *image;
    image = [UIImage imageNamed:@"testimage.png"];
    mCell.imageView.image = image; 

    [self cellTitleAndBackground:mCell indexPath:indexPath];

    return mCell; 
}


-(void)cellTitleAndBackground:(MagazineCell *)mCell indexPath:(NSIndexPath *)indexPath {

    // Get title
    NSString *name = [[NSString alloc] initWithFormat:@"Image %@", self.Data[indexPath.row]];

    // Get current cell size
    CGSize itemSize = [self collectionView:self.collectionView layout:self.collectionView.collectionViewLayout sizeForItemAtIndexPath:indexPath];
    int top = itemSize.height - 40;
    int width = itemSize.width;

    // Create title background
    UILabel *titleBackground = [[UILabel alloc] initWithFrame:CGRectMake(0, top, width, 40)];
    titleBackground.backgroundColor = [UIColor blackColor];
    titleBackground.alpha = 0.2f;
    titleBackground.tag = 70;
    [self removeReusedLabel:mCell tag:70]; 
    [mCell addSubview:titleBackground];

    // Create titleLabel
    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(8, top-8, width, 40)];
    titleLabel.textColor = [UIColor whiteColor];
    titleLabel.font = [UIFont boldSystemFontOfSize:14];
    titleLabel.text = name;
    titleLabel.backgroundColor = [UIColor clearColor];
    titleLabel.tag = 72;
    [self removeReusedLabel:mCell tag:72];
    [mCell addSubview:titleLabel];
}

-(void)removeReusedLabel:(MagazineCell *)mCell tag:(int)tag {
    UILabel *foundLabelBackground = (UILabel *)[mCell viewWithTag:tag];
    if (foundLabelBackground) [foundLabelBackground removeFromSuperview];
}

欢呼 - jerik

Answer 1

由于细胞重用，这种情况正在发生。如果你要添加这样的标签，你应该检查你从dequeue方法得到的单元格中是否有一个，如果它存在则删除它。您可以为标签指定标签，然后使用viewWithTag：查看标签是否存在，然后让它调用removeFromSuperview。我没有对此进行测试，但我认为这样的事情应该有效：

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MagazineCell *mCell = (MagazineCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    UILabel *foundLabel = [mCell viewWithTag:47];
    if (foundLabel) [foundLabel removeFromSuperview];
    .......

在cellTitle：indexPath方法中创建标签时，请记住将标签的标签设置为相同的数字。顺便说一句，您应该将此标签添加到单元格的contentView而不是单元格本身。

编辑后：

使用viewWithTag：

，对我的代码修改工作正常

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    CGSize cellSize = [self.magazineLayout[indexPath.item] size];
    return cellSize;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    MagazineCell *mCell = (MagazineCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"RDCell" forIndexPath:indexPath];
    mCell.backgroundColor = [UIColor lightGrayColor];
    if ([mCell viewWithTag:47]) [[mCell viewWithTag:47] removeFromSuperview];
    UIImage *image = self.magazineLayout[indexPath.item];
    mCell.imageView.image = image;

    NSString *title = [[NSString alloc] initWithFormat:@"Image %@", self.data[indexPath.item]];
    [mCell addSubview:[self cellTitle:title indexPath:indexPath]];

    return mCell;
}


-(UILabel *)cellTitle:(NSString *)name indexPath:(NSIndexPath *)indexPath {
    CGSize itemSize = [self.magazineLayout[indexPath.item] size];
    int top = itemSize.height - 40;
    int width = itemSize.width;
    UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0, top, width, 40)];
    title.textColor = [UIColor blackColor];
    title.text = name;
    title.backgroundColor = [UIColor whiteColor];
    title.alpha = 0.5f;
    title.tag = 47;
    return title;
}

在这个例子中，数组magazineLayout填充了16张不同大小的图片。

更简单的方法是将标签添加到故事板（或xib）中的自定义单元格。如果你将它固定在侧面和底部，并将其高度设置为40，你将得到你想要的东西，没有代码来创建标签或检查它的存在。

Answer 2

我知道答案已被接受并已结束。但是，万一有人偶然发现这个问题，避免这个问题的正确方法是继承UICollectionViewCell，然后使用

[self.collectionView registerClass:[LPCollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];

初始化子类

的initWithFrame方法中的所有元素

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.lblName = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 95.0, 106.0, 20)];
        self.lblName.text = @"";
        self.lblName.textAlignment = NSTextAlignmentCenter;
        [self.lblName setFont:[UIFont fontWithName:@"GothamRounded-Bold" size:10]];
        [self.lblName setTextColor:[UIColor colorWithRed:137.0f/255.0 green:137.0f/255.0 blue:137.0f/255.0 alpha:1.0]];
        [self.lblName setBackgroundColor:[UIColor clearColor]];
        [self addSubview:self.lblName];
}

将元素设为公共，以便稍后在集合视图数据源调用中访问它。

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    LPCollectionViewCell *cell = (LPCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];
    cell.backgroundColor = [UIColor whiteColor];
    [cell.lblName setText:@"This is awesome"];
}

就是这样！