.h文件

Question

我曾与UITableView合作，但我从来没有在我的应用中使用UICollectionView。所以我想以编程方式创建UICollectionView。

以下是我的代码：

UICollectionViewFlowLayout *layout =[[UICollectionViewFlowLayout alloc] init];
    _collectionView=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 43, self.view.frame.size.width, self.view.frame.size.height - 84) collectionViewLayout:layout];
    [_collectionView setDataSource:self];
    [_collectionView setDelegate:self];
    [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellIdentifier"];
    layout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5);
    layout.minimumInteritemSpacing = 5;
    [_collectionView setBackgroundColor:self.view.backgroundColor];        
    [self.view addSubview:_collectionView];

委托和数据源方法。

#pragma mark -
#pragma mark - UITableView Delegate Methods

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 15;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    if (cell.selected)
        cell.backgroundColor = [UIColor lightGrayColor]; // highlight selection cell
    else
        cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background-grid.png"]]; // Default Cell

    UIImageView *imgPhoto = [[UIImageView alloc] init];
    imgPhoto.userInteractionEnabled = YES;
    imgPhoto.backgroundColor = [UIColor grayColor];
    imgPhoto.frame =  CGRectMake(3.5, 5, 90, 80);
    imgPhoto.clipsToBounds = YES;
    imgPhoto.image = [UIImage imageNamed:@"product.png"];
    [cell.contentView addSubview:imgPhoto];

    UILabel *lblCategoryTitle = [[UILabel alloc] init];
    [lblCategoryTitle  setFont: [UIFont fontWithName:@"OpenSans-Bold" size:14]];
    lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
    lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
    lblCategoryTitle.textColor = [UIColor blackColor];
    lblCategoryTitle.text = @"Product 1"; 
    lblCategoryTitle.backgroundColor = [UIColor clearColor];
    lblCategoryTitle.numberOfLines = 2;
    [cell.contentView addSubview:lblCategoryTitle];

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(97, 118);
}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  {

    UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
    datasetCell.backgroundColor = [UIColor lightGrayColor]; // highlight selection
}

-(void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewCell *datasetCell =[collectionView cellForItemAtIndexPath:indexPath];
    datasetCell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background-grid.png"]]; // default cell
}

然后我的屏幕看起来像

enter image description here

问题1 - 查看上面的屏幕，您会看到第1和第3项看起来模糊（参见产品1 ）然后是第2项/中间项目？为什么会这样？

每当我向上/向下滚动UICollectionView时，项目都会被覆盖，请看下一张图片

enter image description here

根据我对UITableView的体验，看了这张图片之后，由于UICollectionView的单元格的可重用性，它已经发生了。

问题2 - 然后我该如何解决？

请提出我的建议并帮助我解决这个问题。

已编辑： （建议 @Dima ）

自定义单元格

.h文件

#import <UIKit/UIKit.h>

@interface customeGridCell : UICollectionViewCell

@property (nonatomic, strong) UIImageView *imgPhoto;
@property (nonatomic, strong) UILabel *lblCategoryTitle;

@end

.m文件

#import "customeGridCell.h"

@implementation customeGridCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        self.imgPhoto = [[UIImageView alloc] init];
        self.imgPhoto.userInteractionEnabled = YES;
        self.imgPhoto.backgroundColor = [UIColor grayColor];
        self.imgPhoto.frame =  CGRectMake(3.5, 5, 90, 80);
        [self addSubview:self.imgPhoto];

        self.lblCategoryTitle = [[UILabel alloc] init];
        [self.lblCategoryTitle  setFont: [UIFont fontWithName:@"OpenSans-Bold" size:14]];
        self.lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
        self.lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
        self.lblCategoryTitle.textColor = [UIColor blackColor];
        self.lblCategoryTitle.backgroundColor = [UIColor clearColor];
        self.lblCategoryTitle.numberOfLines = 2;
        [self addSubview:self.lblCategoryTitle];
    }
    return self;
}

代码cellForItemAtIndexPath

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    customeGridCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    if (cell.selected)
        cell.backgroundColor = [UIColor lightGrayColor]; // highlight selection cell
    else
        cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background-grid.png"]]; // Default Cell


    cell.imgPhoto.image =  [UIImage imageNamed:@"product.png"];
    cell.lblCategoryTitle.text = @"Product 1";

    return cell;
}

Answer 1

问题出在您的collectionView:cellForItemAtIndexPath:方法中。您每次重复使用单元格时都会添加这些子视图。

您应该创建一个UICollectionViewCell子类，并将所需的所有额外子视图添加到其初始化程序中。这将确保它们只被添加一次。

示例代码：

以下是如何将UICollectionViewCell

子类化的示例

@interface MyCustomCell : UICollectionViewCell

@property (nonatomic, strong) UILabel *customLabel;
@property (nonatomic, strong) UIImageView *customImageView;
@end


// in implementation file
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) 
    {
        // initialize label and imageview here, then add them as subviews to the content view
    }
    return self;
}

然后当你抓住一个单元格时，你会做一些像：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MyCustomCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];

    if (cell.selected)
        cell.backgroundColor = [UIColor lightGrayColor]; // highlight selection cell
    else
        cell.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"background-grid.png"]]; // Default Cell

    cell.customImageView.image = // whatever
    cell.customLabel.text = // whatever

    return cell;
}

Answer 2

你可以用两种方式做到。

删除UILabel表单视图。

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
    for (UILabel *lbl in cell.contentView.subviews)
    {
        if ([lbl isKindOfClass:[UILabel class]])
        {
            [lbl removeFromSuperview];
        }
    }
    UILabel *lblCategoryTitle =[[UILabel alloc]init];

    [lblCategoryTitle  setFont: [UIFont fontWithName:@"OpenSans-Bold" size:14]];
    lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
    lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
    lblCategoryTitle.textColor = [UIColor blackColor];
    lblCategoryTitle.text = @"Product 1";
    lblCategoryTitle.backgroundColor = [UIColor clearColor];
    lblCategoryTitle.numberOfLines = 2;
    [cell.contentView addSubview:lblCategoryTitle];
    return cell;
}

使用标签获取标签

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellIdentifier" forIndexPath:indexPath];
    UILabel *lblCategoryTitle =(UILabel *) [cell viewWithTag:5];
    if (!lblCategoryTitle) {
        lblCategoryTitle=[[UILabel alloc]init];
        [cell.contentView addSubview:lblCategoryTitle];

    }
    [lblCategoryTitle  setFont: [UIFont fontWithName:@"OpenSans-Bold" size:14]];
    lblCategoryTitle.tag=5;
    lblCategoryTitle.textAlignment = NSTextAlignmentCenter;
    lblCategoryTitle.frame = CGRectMake(3.5, 90, 90, 24);
    lblCategoryTitle.textColor = [UIColor blackColor];
    lblCategoryTitle.text = @"Product 1";
    lblCategoryTitle.backgroundColor = [UIColor clearColor];
    lblCategoryTitle.numberOfLines = 2;
    return cell;
}

UICollectionView上的可重用性问题

.h文件

.m文件

2 个答案: