如何以編程方式修復帶有UIImageView Overlap的UICollectionViewCell

Question

我將以編程方式創建UICollectionView到uiview（我使用單個視圖）。 像這樣

UICollectionViewFlowLayout *CATLayout=[[UICollectionViewFlowLayout alloc]init];
CATLayout.minimumInteritemSpacing = 2.0f;
CATLayout.minimumLineSpacing = 2.0f;
CATLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
CATLayout.sectionInset = UIEdgeInsetsMake(1.0f, 1.0f, 1.0f, 1.0f);

self.ColStickersListView=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, StickersListView.frame.size.width, StickersListView.frame.size.height) collectionViewLayout:CATLayout];
self.ColStickersListView.delegate=self;
self.ColStickersListView.dataSource=self;
self.ColStickersListView.tag=2;
[self.ColStickersListView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"CollStickersList"];
[self.ColStickersListView setBackgroundColor:[UIColor clearColor]];
[StickersListView addSubview:ColStickersListView];

和

UICollectionViewCell *cell = [ColStickersListView dequeueReusableCellWithReuseIdentifier:@"CollStickersList" forIndexPath:indexPath];



    // for background selected
    NSString *imageName=anObject;
    NSString *filename=[NSString stringWithFormat:@"%@/Stickers/List/%@",[appDel DocsPath],imageName];

    NSLog(@"%@",filename);


    cell.backgroundColor=[UIColor clearColor];
    UIImage *image=[UIImage imageNamed:filename];



    UIImageView *photoView=[[UIImageView alloc]initWithFrame:CGRectMake(StickersListPadding,StickersListPadding,StickersListThumbSize-(StickersListPadding*2),StickersListThumbSize-(StickersListPadding*2))];

    photoView.image=image;
    photoView.contentMode=UIViewContentModeScaleAspectFit;
    photoView.userInteractionEnabled = YES;

    [cell.contentView addSubview:photoView];



    return cell;

非常適合將圖像顯示到單元格。

問題！

如果將頁面滾動到底部，然后再次滾動回到頂部，則該單元格中的圖像是重疊的。

如何解決。 （僅以編程方式使用單一視圖）

Answer 1

我懷疑是因為您沒有在UIImageView上設置框架，而是從其上設置的圖像派生其大小。 因此，在某些情況下，它可能會溢出其父視圖->單元格。

我建議您在UIImageView上設置一些約束，這可以通過編程來完成。 因此，嘗試在UIIMageView上設置左，右，上和下約束，以使其停留在單元格的范圍內

Answer 2

滾動期間

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath被重復調用。

這意味着您將UIImageView *photoView重復添加到cell.contentView

    UIImageView *photoView=[[UIImageView alloc]initWithFrame:CGRectMake(StickersListPadding,StickersListPadding,StickersListThumbSize-(StickersListPadding*2),StickersListThumbSize-(StickersListPadding*2))];

    //codes..

    [cell.contentView addSubview:photoView];

做這樣的事情可以防止：

UICollectionViewCell *cell = [ColStickersListView dequeueReusableCellWithReuseIdentifier:@"CollStickersList" forIndexPath:indexPath];

if (cell == nil)
{
    UIImageView *photoView=[[UIImageView alloc]initWithFrame:CGRectMake(StickersListPadding,StickersListPadding,StickersListThumbSize-(StickersListPadding*2),StickersListThumbSize-(StickersListPadding*2))];

     // codes...

    [cell.contentView addSubview:photoView];
}

解決此問題的另一種方法是創建一個自定義收集單元：

// CustomCollectionCell.h
@interface YourCollectionCell : UICollectionViewCell

@property (nonatomic) UIImageView *photoView;

@end

// CustomCollectionCell.m

@implementation YourCollectionCell

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

     // and setting up you imageview here
        self.photoView=[[UIImageView alloc]initWithFrame:YourRect];

        self.photoView.contentMode=UIViewContentModeScaleAspectFit;
        self.photoView.userInteractionEnabled = YES;

        [self.contentView addSubview:self.photoView];

    }
    return self;
}

並像這樣使用它：

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

     cell.photoView.image=image;

     return cell;
}

希望我對您有所幫助，祝您編程愉快。