Nội dung cũ của UICollectionViewCell được sử dụng lại được hiển thị ngắn gọn khi sử dụng lại các ô trong UICollectionView

Question

Tôi đang sử dụng một số UICollectionView để hiển thị lưới ảnh được tải không đồng bộ từ URL. Chế độ xem bộ sưu tập của tôi sử dụng các ô có thể tái sử dụng để hiển thị số UICollectionViewCells. Tất cả mọi thứ được hiển thị đúng khi các tế bào không được tái sử dụng, nhưng khi tôi di chuyển xung quanh một chút, các tế bào tái sử dụng sẽ nhanh chóng flash các nội dung cũ trước khi chúng bắt đầu hành vi bình thường của chúng.

Đây là việc thực hiện các tùy chỉnh UICollectionViewController:

#import "MyCollectionViewViewController.h" 
#import "MyCollectionViewCell.h" 

@interface MyCollectionViewViewController()  
@property (strong, nonatomic) NSArray *data;  
@end 

@implementation MyCollectionViewViewController 

@synthesize data = _data; 

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    self.data = @[ 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr01/2013/1/18/12/enhanced-buzz-wide-851-1358529670-4.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/1/18/11/enhanced-buzz-wide-26311-1358526816-5.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/1/18/11/enhanced-buzz-wide-26311-1358527190-11.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/1/18/11/enhanced-buzz-wide-7517-1358526694-11.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/1/18/11/enhanced-buzz-wide-1965-1358527802-7.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/1/18/11/enhanced-buzz-wide-2165-1358527708-14.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr03/2013/1/18/11/enhanced-buzz-wide-1965-1358527894-12.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/1/18/12/enhanced-buzz-wide-15957-1358529198-18.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/1/18/12/enhanced-buzz-wide-16520-1358528981-9.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/1/18/12/enhanced-buzz-wide-16517-1358529292-5.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr01/2013/1/18/12/enhanced-buzz-wide-20349-1358529323-20.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr01/2013/1/18/12/enhanced-buzz-wide-32444-1358529959-9.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr01/2013/1/18/12/enhanced-buzz-wide-32343-1358530043-7.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/1/18/12/enhanced-buzz-wide-23646-1358530321-2.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr01/2013/1/18/12/enhanced-buzz-wide-28223-1358530801-15.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr01/2013/1/18/12/enhanced-buzz-wide-32273-1358530695-16.jpg", 
     @"http://s3-ec.buzzfed.com/static/enhanced/webdr01/2013/1/18/12/enhanced-buzz-wide-31288-1358531103-16.jpg" 
    ]; 

    [self.collectionView registerNib:[UINib nibWithNibName:@"MyCollectionViewCell" bundle:[NSBundle mainBundle]] forCellWithReuseIdentifier:@"myView"]; 
} 

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { 
    NSString *urlString = [self.data objectAtIndex:indexPath.item]; 

    MyCollectionViewCell *myView = [collectionView dequeueReusableCellWithReuseIdentifier:@"myView" forIndexPath:indexPath]; 
    myView.urlString = urlString; 

    [myView setNeedsDisplay]; 

    return myView; 
} 

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

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { 
    return 1; 
} 

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { 
    return self.data.count; 
} 

@end 

Đây là việc thực hiện các tùy chỉnh UICollectionViewCell.

#import "MyCollectionViewCell.h" 
#import <QuartzCore/QuartzCore.h> 
#import <AVFoundation/AVFoundation.h> 

@interface MyCollectionViewCell() 

@property (weak, nonatomic) IBOutlet UIImageView *imageView; 

@end 

@implementation MyCollectionViewCell 

@synthesize urlString = _urlString; 

+ (void)loadAsyncImageFromURL:(NSString *)urlString withCallback:(void (^)(UIImage *))callback { 
    NSURL *url = [NSURL URLWithString:urlString]; 

    dispatch_queue_t downloadQueue = dispatch_queue_create("com.example.downloadqueue", NULL); 
    dispatch_async(downloadQueue, ^{ 
     NSData * imageData = [NSData dataWithContentsOfURL:url]; 
     UIImage *image = [UIImage imageWithData:imageData]; 

     dispatch_async(dispatch_get_main_queue(), ^{ 
      callback(image); 
     }); 
    }); 
} 

-(void) fadeInView:(UIView *)view WithSecondDuration:(double)duration { 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"]; 
    animation.beginTime = 0; 
    animation.duration = duration; 
    animation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    animation.toValue = [NSNumber numberWithFloat:1.0f]; 
    animation.removedOnCompletion = NO; 
    animation.fillMode = kCAFillModeBoth; 
    animation.additive = NO; 
    [view.layer addAnimation:animation forKey:@"opacityIN"]; 
} 

- (void) setUrlString:(NSString *)urlString { 
    _urlString = urlString; 

    self.imageView.image = nil; 
    self.imageView.layer.opacity = 0; 

    if (urlString) { 
     [MyCollectionViewCell loadAsyncImageFromURL:urlString withCallback:^(UIImage *image) { 
      self.imageView.image = image; 
      [self fadeInView:self.imageView WithSecondDuration:.25]; 
     }]; 
    } 
} 


@end 

Answer 1

Bạn có thể thử đặt URL cho ô thành 0 khi ô được hiển thị xong, nó hoạt động trên dự án của tôi.

-(void)collectionView:(UICollectionView *)cv didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath 
{ 
    [(MyCollectionViewCell *)cell setUrlString:nil]; 
} 

Tôi hy vọng điều này sẽ hữu ích!

Answer 2

Bạn có thể triển khai -(void)prepareForReuse trong lớp con UICollectionViewCell của mình. và đặt lại ở đó.

Answer 3

This bài viết cho thấy sự khác biệt giữa giải pháp @Weston và @architectpianist.

Tóm lại: Vì iOS10 -(void)prepareForReuse tối ưu hơn.