Cell"s are not showing properly when scrolled

Question

I have images within a collection view that I can select. When I select an image(s) the wrong image cells is selected. Once I scroll down out of view of the cell then back up the cell is no longer selected. How can I fix this issue?

The imageView is defined in the storyboard. The assets are in the photo library.

This is the PhotoCell.h file.

#import <UIKit/UIKit.h>
#import <AssetsLibrary/AssetsLibrary.h>

@interface PhotoCell : UICollectionViewCell

@property(nonatomic,strong) ALAsset * asset;
@property (nonatomic,weak) IBOutlet UIImageView * PhotoImageView;

This is my PhotoCell.m file.

#import "PhotoCell.h"
@interface PhotoCell ()

@end

@implementation PhotoCell

#pragma mark - User Made Method 
- (void) setAsset:(ALAsset *)asset
{
    // 2
    _asset = asset;
    self.PhotoImageView.image = [UIImage imageWithCGImage:[asset thumbnail]];
}

#pragma mark - CollectionView Cell Method
-(void)prepareForReuse
{
}

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

PhotoCell *cell =(PhotoCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"PhotoCell" forIndexPath:indexPath];
ALAsset * asset = self.assets[indexPath.row];
cell.asset = asset;
cell.backgroundColor = [UIColor redColor];
}

#pragma mark - Collection View Delegate

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

    //NSLog(@"%@ - %d", NSStringFromSelector(_cmd), indexPath.item);       
    PhotoCell *cell = (PhotoCell *)[collectionView cellForItemAtIndexPath:indexPath];
    chkboxBtn  = [UIButton buttonWithType:UIButtonTypeCustom];
    [chkboxBtn setFrame:CGRectMake(60, 60, 30, 30)];
    [chkboxBtn setTag:100];
    [chkboxBtn setImage:[UIImage imageNamed:@"success.png"] forState:UIControlStateNormal];
    [cell.contentView addSubview:chkboxBtn ];
}

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

    // This removes the Check Box Button From the Cell After click it again
    PhotoCell *cell =(PhotoCell *)[collectionView cellForItemAtIndexPath:indexPath];
    [[cell.contentView viewWithTag:100] removeFromSuperview];

}

Could you spend some more time on your question and try to explain the problem better? Otherwise you won't get any anwers... — tailec, Jun 13 '15 at 13:58
It might possible that i need to spend some time on my question but plz try to understand. — Vikram Sinha, Jun 15 '15 at 09:05

score 1 · Accepted Answer · answered Jun 13 '15 at 15:48

1

You can't add the checkbox in didSelectItemAtIndexPath and remove it in didDeselectItemAtIndexPath, because all cells will be reused while scrolling.

Add checkbox in your PhotoCell, and in cellForItemAtIndexPath function, do this:

if cell.selected {
    checkbox.hidden = false
}
else {
    checkbox.hidden = true
}

answered Jun 13 '15 at 15:48

JZAU

3,550
31
37

Jacky I didn't know what to do. Could you explain in detail – Vikram Sinha Jun 15 '15 at 07:51
i am a new in iPhone sorry to ask you but plz -Jacky, I have cell created in storyboard so where do i need to add chekbox in storyboard or cellforItemAtIndexPath - – Vikram Sinha Jun 15 '15 at 09:03
I added my Custom Cell code Jacky . If You could Find out something – Vikram Sinha Jun 15 '15 at 09:29
@vikramsingh add checkbox in your storyboard, and set hidden in `cellForItemAtIndexPath`. It's a simple question.. you can reference here http://stackoverflow.com/questions/15665181/uicollectionview-cell-selection-and-cell-reuse – JZAU Jun 15 '15 at 09:35
My question is i select some images and when i am scrolling the collection view at that point of time my check box is showing on another cell and when i scroll back selected sell is removed – Vikram Sinha Jun 15 '15 at 09:35
Thank you so much jack .. You made my day – Vikram Sinha Jun 15 '15 at 10:07

score 0 · Answer 2 · answered Feb 26 '17 at 12:27

You should know about how dequeueReusableCellWithIdentifier works with tableview cell. When you call [tableView dequeueReusableCellWithIdentifier:], it will get a cell that has previously been created and isn't currently being used. That means same UITableCell objects reuse when need.

So when you are adding checkbox button at didSelectItemAtIndexPath delegate and scrolling to bottom/up, this cell is reusing for another cell index and as a result cell is showing selected.

To solve this problem you need to store selected index path at didSelectItemAtIndexPath and remove at didDeselectItemAtIndexPath method.

Finally, reset [remove checkbox & thumb] cell at cellForItemAtIndexPath datasource and then mark cell as selected if index path contains in the selected index path array.

See these below code as example which has not been tested yet.

Add a button from storyboard and make outlet as below:

@interface PhotoCell : UICollectionViewCell

@property(nonatomic,strong) ALAsset * asset;
@property (nonatomic,weak) IBOutlet UIImageView * PhotoImageView;
@property (nonatomic,weak) IBOutlet UIButton * chkboxBtn;

@end

Update PhotoCell as below:

#import "PhotoCell.h"

@interface PhotoCell ()

- (void)setCheckBoxSelected:(BOOL)selected

@end

@implementation PhotoCell

#pragma mark - User Made Method
- (void) setAsset:(ALAsset *)asset
{
    // 2
    _asset = asset;
    self.PhotoImageView.image = [UIImage imageWithCGImage:[asset thumbnail]];
}
- (void)setCheckBoxSelected:(BOOL)selected
{
    if (selected) {
        [self.chkboxBtn setImage:[UIImage imageNamed:@"success.png"] forState:UIControlStateNormal];
    } else {
        [self.chkboxBtn setImage:nil forState:UIControlStateNormal];
    }
}
@end

And finally modify your controller as below Add a NSMutableArray property in your controller class

@property(nonatomic, strong) NSMutableArray *selectedIndexPaths;

Initialise array at viewDidLoad

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.selectedIndexPaths = [NSMutableArray new];
}

And then..

#pragma mark - CollectionView Cell Method
-(void)prepareForReuse
{
}

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

    PhotoCell *cell =(PhotoCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"PhotoCell" forIndexPath:indexPath];
    ALAsset * asset = self.assets[indexPath.row];
    cell.asset = asset;
    cell.backgroundColor = [UIColor redColor];

    if ([self.selectedIndexPaths containsObject:indexPath]) {
        [cell setCheckBoxSelected:NO];
    } else {
        [cell setCheckBoxSelected:YES];
    }
}

#pragma mark - Collection View Delegate

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

    [self.selectedIndexPaths addObject:indexPath];

    PhotoCell *cell = (PhotoCell *)[collectionView cellForItemAtIndexPath:indexPath];
    [cell setCheckBoxSelected:YES];
}

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

    // This removes the Check Box Button From the Cell After click it again
    PhotoCell *cell =(PhotoCell *)[collectionView cellForItemAtIndexPath:indexPath];
    [cell setCheckBoxSelected:NO];
    [self.selectedIndexPaths removeObject:indexPath];
}

@end

Hope it will work.

Thanks.

Cell"s are not showing properly when scrolled

2 Answers2