Improper placement of images on scrolling the tableview objective c - ios

Question

hello guys i am downloading images for each product from my server and set it up inside a custom cell of my UITableView and caching them on disk after scrolling down the UITableView images are miss placed what i mean the new cells takes the old values of the previous cells after searching of this topic i found different solution either to use prepareForReuse or checking on the cell if its nil or not both of them does not fit my case.
CODE:
MyCustomCell.h
#import <UIKit/UIKit.h>
#import "mirsaProduct.h"
#import "SVProgressHUD.h"
#import "AFNetworking.h"
#import "UIWebView+AFNetworking.h"
#import "SDWebImageCompat.h"
#import "SDWebImageDownloaderOperation.h"
#import "SDWebImageDownloader.h"
#import "SDImageCache.h"
#import "SDWebImageDownloaderOperation.h"
#import "SDWebImageManager.h"
#import "SDWebImageDecoder.h"
#import "SDWebImagePrefetcher.h"
#interface mirsaProductTableViewCell : UITableViewCell
#property (weak, nonatomic) IBOutlet UILabel *mirsaProductTitle;
#property (weak, nonatomic) IBOutlet UITextView *mirsaProductDescription;
#property (weak, nonatomic) IBOutlet UIActivityIndicatorView *mirsaProductActivityIndicatorView;
#property (weak, nonatomic) IBOutlet UIImageView *mirsaProductLogoImageView;
#end
**MyCustomCell.m**
#import "mirsaProductTableViewCell.h"
#implementation mirsaProductTableViewCell
#synthesize mirsaProductTitle = _mirsaProductTitle;
#synthesize mirsaProductDescription = _mirsaProductDescription;
#synthesize mirsaProductLogoImageView = _mirsaProductLogoImageView;
#synthesize mirsaProductActivityIndicatorView = _mirsaProductActivityIndicatorView;
-(void)prepareForReuse
{
}
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
#end
myTableViewController.h
#import <UIKit/UIKit.h>
#import "mirsaCategories.h"
#import "sharedManagers.h"
#import "mirsaProductTableViewCell.h"
#import "constant.h"
#import "SVProgressHUD.h"
#import "AFNetworking.h"
#import "UIWebView+AFNetworking.h"
#import "SDWebImageCompat.h"
#import "SDWebImageDownloaderOperation.h"
#import "SDWebImageDownloader.h"
#import "SDImageCache.h"
#import "SDWebImageDownloaderOperation.h"
#import "SDWebImageManager.h"
#import "SDWebImageDecoder.h"
#import "SDWebImagePrefetcher.h"
#import "mirsaProduct.h"
#import "mirsaDetailedProductViewController.h"
#import "mirsaProductDetailsTableViewController.h"
#interface mirsaProductsTableViewController : UITableViewController
#property (nonatomic,strong) mirsaCategories *currentCategory;
#property (nonatomic,strong) NSMutableArray *listOfProducts;
#property (nonatomic,strong) mirsaProduct *currentProduct;
#end
myTableViewController.m
due to not make the question too long i just import the cellOfRowAtIndexPath and the relevant method to it.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"mirsaProductCell";
mirsaProductTableViewCell *cell = (mirsaProductTableViewCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[mirsaProductTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil] ;
cell.mirsaProductLogoImageView.layer.cornerRadius = 50.0f;
cell.mirsaProductLogoImageView.layer.borderWidth = 1.5f;
cell.mirsaProductLogoImageView.clipsToBounds = YES;
cell.mirsaProductLogoImageView.layer.borderColor = [UIColor colorWithRed:redRedColor green:redGreenColor blue:redBlueColor alpha:ALFA].CGColor;
mirsaProduct *currentProduct = [self.listOfProducts objectAtIndex:indexPath.row];
cell.mirsaProductTitle.text = [NSString stringWithFormat:#"Product Code:%#",currentProduct.mirsaProductCode];
cell.mirsaProductDescription.text = [NSString stringWithFormat:#"Description: %#",currentProduct.mirsaProductDescription];
[self downloadProductLogoImageView:cell :indexPath.row];
for (int i = 0; i < currentProduct.mirsaProductUrlImage.count; i++) {
[self downloadImageWithCached:currentProduct.mirsaProductUrlImage[i] :cell :indexPath.row :(NSInteger)i];
}
}
else
{
cell.mirsaProductLogoImageView.layer.cornerRadius = 50.0f;
cell.mirsaProductLogoImageView.layer.borderWidth = 1.5f;
cell.mirsaProductLogoImageView.clipsToBounds = YES;
cell.mirsaProductLogoImageView.layer.borderColor = [UIColor colorWithRed:redRedColor green:redGreenColor blue:redBlueColor alpha:ALFA].CGColor;
mirsaProduct *currentProduct = [self.listOfProducts objectAtIndex:indexPath.row];
cell.mirsaProductTitle.text = [NSString stringWithFormat:#"Product Code:%#",currentProduct.mirsaProductCode];
cell.mirsaProductDescription.text = [NSString stringWithFormat:#"Description: %#",currentProduct.mirsaProductDescription];
[self downloadProductLogoImageView:cell :indexPath.row];
for (int i = 0; i < currentProduct.mirsaProductUrlImage.count; i++) {
[self downloadImageWithCached:currentProduct.mirsaProductUrlImage[i] :cell :indexPath.row :(NSInteger)i];
}
}
return cell;
}
-(void)downloadProductLogoImageView:(mirsaProductTableViewCell *)cell :(NSInteger )index;
{
#autoreleasepool {
[cell.mirsaProductActivityIndicatorView startAnimating];
mirsaProduct *currentProduct = [self.listOfProducts objectAtIndex:index];
NSString *cachedKey = currentProduct.mirsaProductImage;
SDImageCache *imageCache = [[SDImageCache alloc] initWithNamespace:#"productLogoImageView"];
[imageCache queryDiskCacheForKey:cachedKey done:^(UIImage *image, SDImageCacheType cacheType)
{
if (image) {
dispatch_async(dispatch_get_main_queue(), ^{
[cell.mirsaProductActivityIndicatorView stopAnimating];
cell.mirsaProductLogoImageView.image = image;
});
}else{
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
NSURL *url = [NSURL URLWithString:currentProduct.mirsaProductImage];
[[SDWebImageDownloader sharedDownloader]downloadImageWithURL:url options:SDWebImageDownloaderLowPriority progress:^(NSInteger receivedSize, NSInteger expectedSize) {
} completed:^(UIImage *image, NSData *data, NSError *error, BOOL finished) {
if (finished && image){
dispatch_async(dispatch_get_main_queue(), ^{
[imageCache setMaxCacheAge:60*60*24];
[imageCache storeImage:image
recalculateFromImage:NO
imageData:data
forKey:currentProduct.mirsaProductImage
toDisk:YES];
});
[cell.mirsaProductActivityIndicatorView stopAnimating];
cell.mirsaProductLogoImageView.image = image;
}
}];
});
}
}];
}
}
some links that i found on stack overflow Tableview images chaging when scrolling using custom tableview, Incorrect cell data display when scrolling UITableView

Answer 1

Hi as far i go through your code there two major changes that need to be done to solve your problem
if (cell == nil) {
cell = [[mirsaProductTableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:nil] ;
cell.mirsaProductLogoImageView.layer.cornerRadius = 50.0f;
in this lines of code don't use nil instead of use cell Identifier
to download image you don't need to write that much of code just write
[imageView sd_setImageWithURL:[NSURL URLWithString:#"http://www.example.com/path/to/image.jpg"]
placeholderImage:[UIImage imageNamed:#"placeholder.png"]];

Answer 2

A third party library like SDWebImage is a reasonable idea, though a simple home-rolled version is not too tough to create. Instead of a regular image view in the cell, use your own subclass, something like this:
// .h
#import <UIKit/UIKit.h>
#interface AsynchImageView : UIImageView
- (void)setImageFromUrl:(NSString *)url placeholder:(UIImage *)placeholder;
#end
// .m
#import "AsynchImageView.h"
#implementation AsynchImageView
- (void)setImageFromUrl:(NSString *)url placeholder:(UIImage *)placeholder {
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:url]];
NSURLCache *cache = [NSURLCache sharedURLCache];
NSCachedURLResponse *cachedResponse = [cache cachedResponseForRequest:request];
if (cachedResponse) {
[self setImageFromData:cachedResponse.data];
} else {
self.image = placeholder;
NSURLSession *session = [NSURLSession sharedSession];
[[session dataTaskWithRequest:request completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
if (!error) {
[cache storeCachedResponse:[[NSCachedURLResponse alloc] initWithResponse:response data:data] forRequest:request];
[self setImageFromData:data];
}
}] resume];
}
}
- (void)setImageFromData:(NSData *)data {
UIImage *image = [UIImage imageWithData:data];
dispatch_async(dispatch_get_main_queue(), ^{
self.image = image;
});
}
#end
This checks to see if the image has been downloaded already, if it hasn't it sets a placeholder image and starts a download. Upon completion, it sets the image to the downloaded one and caches it.
Remove all of the other image code when configuring the cell, and do this:
NSString *url = currentProduct.mirsaProductImage;
[cell.mirsaProductLogoImageView setImageFromUrl: placeholder:];