How to fix UICollectionViewCell with UIImageView Overlap Programmatically

Question

I'm create UICollectionView programmatically to uiview (i use single view). like this

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];

and

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;

it's work perfect for display image to cell.

Problem !!

if scroll page to bottom and scroll return to top again that image in cell it's overlap.

How to fix it.!!! (Programmatically only with single view)

Answer 1

I suspect because you aren't setting the frame on the UIImageView it is deriving its size from the image that is being set on it. So in some cases it might overflow its parent view -> the cell in this case.

I suggest you setup some constraints on the UIImageView, this can be done programmatically. So try to set left, right, top and bottom constraints on the UIIMageView so that it stays within the bounds of the cell

Answer 2

During scroll

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath is beeing called repeatively..

the means your are adding UIImageView *photoView repeatedly to cell.contentView

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

    //codes..

    [cell.contentView addSubview:photoView];

doing something like this prevent that:

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];
}

Another way of solving this is by creating a custom collection cell:

// 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;
}

and using it like:

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

     cell.photoView.image=image;

     return cell;
}

Hope i've helped you, happy coding.. Cheers & Good night!