我正在使用UICollectionView来显示从URL异步加载的图片网格.我的集合视图使用可重用单元格来显示UICollectionViewCells.当不重复使用单元格时,所有内容都会正确显示,但是当我滚动一下时,重用的单元格会在它们开始正常行为之前短暂闪烁旧内容.
以下是自定义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
这是自定义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
解决方法
您可以尝试在单元格完成显示时将单元格的URL设置为nil,它可以在我的项目中工作.
-(void)collectionView:(UICollectionView *)cv didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
[(MyCollectionViewCell *)cell setUrlString:nil];
}
我希望这有帮助！
