Image is getting added automatically in UItableView Cell? - ios

Question

Helo all,
I am having a very strange situation here.I have a table view in which i have custom cells. So i have designed my own custom cell.In custom cell i am displaying the image as well text.The data of table comes from server.If any image in json then image will be displayed else only text is displayed.So cell will dynamic.I have used bezier path to wrap text around image.No if image is there so text will be wrapped.When i add new post from server with image & i refresh the table then it automatically display the image for other post as well.It will display the same image which is same image for last.I don;t know why new cell is adding image in it's cell even the code works fine i have dbugged it using breakpoints.Please tell what could be the issue.
Here is code for cellForRowAtIndexPath
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//define variables here
static NSString *CellIdentifier = #"homeCell";
HomeCell *cell = [tableView
dequeueReusableCellWithIdentifier:CellIdentifier
forIndexPath:indexPath];
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
if([arr_post count]>0)
{
NSMutableAttributedString *mutableAttributeStr;
NSAttributedString *attributeStr;
[cell layoutIfNeeded];
//get the post data
Post *user_post=[arr_post objectAtIndex:indexPath.row];
//set the button tags
cell.btn_like.tag=indexPath.row;
cell.btn_comment.tag=indexPath.row;
cell.btn_fav.tag=indexPath.row;
cell.btn_con.tag=indexPath.row;
cell.btn_book.tag=indexPath.row;
//add info to buttons
cell.btn_like.selected=user_post.isPostLiked;
cell.btn_comment.selected=user_post.isPostCommented;
cell.btn_fav.selected=user_post.isPostFavourite;
cell.btn_con.selected=user_post.isPostCondolence;
cell.btn_book.selected=user_post.isPostBookmarked;
//add user info
cell.label_name.text=user_post.username;
cell.img_profile.layer.cornerRadius = 25;
cell.img_profile.clipsToBounds = YES;
[cell.img_profile setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.user_profileImage]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
//add location
if([user_post.location isEqualToString:#"Not Available"])
{
[cell.img_icon_location setHidden:true];
[cell.label_location setHidden:true];
}
else
{
[cell.img_icon_location setHidden:false];
[cell.label_location setHidden:false];
cell.label_location.text=user_post.location;
}
//ad post info
cell.tv_post.text=user_post.post_description;
cell.tv_post.font = [UIFont fontWithName:user_post.font_family size:[user_post.font_size floatValue]];
[cell.tv_post setTextColor:[self colorFromHexString:user_post.font_color]];
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
[formatter setDateFormat:#"yyyy-MM-dd HH:mm:ss"];
NSDate *date = [formatter dateFromString:user_post.modification_date];
NSLog(#"user post image is %#",user_post.post_image);
if([user_post.post_image isEqualToString:#"none"] && [user_post.post_video isEqualToString:#"none"])
{
NSLog(#"NOT INSIDE THE CONDITION");
}
else
{
NSLog(#"INSIDE BEIZER PATH CONDITION");
UIBezierPath * imgRect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 10, 100, 100)];
cell.tv_post.textContainer.exclusionPaths = #[imgRect];
UIImageView *tv_image =[[UIImageView alloc]initWithFrame:CGRectMake(0, 10, 100, 100)];
if(![user_post.post_image isEqualToString:#"none"])
{
[tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_image]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
if(![user_post.post_video isEqualToString:#"none"])
{
[tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_video_thumbnail]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
[cell.tv_post addSubview:tv_image];
}
//make textview height dynamic
cell.tv_post.scrollEnabled=NO;
if([user_post.post_image isEqualToString:#"none"] && [user_post.post_video isEqualToString:#"none"])
{
CGFloat fixedWidth = cell.tv_post.frame.size.width;
CGSize newSize = [cell.tv_post sizeThatFits:CGSizeMake(fixedWidth, MAXFLOAT)];
CGRect newFrame = cell.tv_post.frame;
newFrame.size = CGSizeMake(fmaxf(newSize.width, fixedWidth), newSize.height);
cell.tv_post.frame = newFrame;
cell.tv_height.constant=cell.tv_post.frame.size.height;
[cell.view_tvContainer layoutIfNeeded];
}
//set the border of uiview
cell.view_tvContainer.layer.borderColor = [UIColor blackColor].CGColor;
cell.view_tvContainer.layer.borderWidth = 2.0f;
//set the like count
NSString *first_like_user=recent_like_name=user_post.recent_like_name;
NSLog(#"FIRST LIEK USER IS %#",first_like_user);
NSString *str_recent_like_name;
int count=(int)[first_like_user length];
int like_count=[user_post.like_count intValue];
if(like_count>0)
{
cell.label_like_count.lineBreakMode=NSLineBreakByWordWrapping;
[cell.label_like_count sizeToFit];
[cell.label_like_count setHidden:false];
NSString *str_like_count=[NSString stringWithFormat:#"%lu",(unsigned long)like_count-1];
if(like_count==1)
{
if([myUsername isEqualToString:first_like_user])
{
first_like_user=#"You like this post ";
count=3;
}
else
{
first_like_user=[first_like_user stringByAppendingString:#" like this post"];
}
}
else if(like_count==2)
{
if([first_like_user isEqualToString:myUsername])
{
first_like_user=#"You";
}
Post *temp_user_post=[copy_arr_user_post objectAtIndex:indexPath.row];
first_like_user=[first_like_user stringByAppendingString:#" and "];
if(temp_user_post.recent_like_name==nil)
{
temp_user_post.recent_like_name=#"";
}
str_recent_like_name=[temp_user_post.recent_like_name_two stringByAppendingString:#" like this post"];
first_like_user=[first_like_user stringByAppendingString:str_recent_like_name];
}
else
{
if(like_count>1000)
{
like_count=like_count/1000;
str_like_count=[NSString stringWithFormat:#"%lu",(unsigned long)like_count];
str_like_count=[str_like_count stringByAppendingString:#"k"];
first_like_user=[first_like_user stringByAppendingString:#" and "];
str_like_count=[str_like_count stringByAppendingString:#" others like this post"];
first_like_user=[first_like_user stringByAppendingString:str_like_count];
}
else
{
if([first_like_user isEqualToString:myUsername])
{
first_like_user=#"You";
}
first_like_user=[first_like_user stringByAppendingString:#" and "];
str_like_count=[str_like_count stringByAppendingString:#" others like this post"];
first_like_user=[first_like_user stringByAppendingString:str_like_count];
}
}
mutableAttributeStr = [[NSMutableAttributedString alloc]initWithString:first_like_user];
attributeStr = [[NSAttributedString alloc]initWithString:#"\n" attributes:#{NSFontAttributeName : [UIFont fontWithName:#"HelveticaNeue-Bold" size:8]}];
[mutableAttributeStr addAttribute:NSFontAttributeName value: [UIFont fontWithName:#"Helvetica-Bold" size:14.0] range:NSMakeRange(0, count)];
[mutableAttributeStr addAttribute:NSForegroundColorAttributeName value:[self colorFromHexString:#"#48a0dd"] range:NSMakeRange(0, count)];
[mutableAttributeStr appendAttributedString:attributeStr];
[cell.label_like_count setAttributedText:mutableAttributeStr];
}
else
{
[cell.label_like_count setHidden:true];
}
// show dynamic comment
NSMutableArray *user_comments=user_post.comments;
float comment_count=[user_post.comment_count intValue];
NSLog(#"ID IS %#",user_post.id);
if(comment_count>0)
{
//make label multiline
cell.first_comment.lineBreakMode=NSLineBreakByWordWrapping;
[cell.first_comment sizeToFit];
cell.second_cmment.lineBreakMode=NSLineBreakByWordWrapping;
[cell.second_cmment sizeToFit];
cell.third_comment.lineBreakMode=NSLineBreakByWordWrapping;
[cell.third_comment sizeToFit];
if(comment_count==1)
{
[cell.first_comment setHidden:false];
[cell.second_cmment setHidden:true];
[cell.third_comment setHidden:true];
}
else if(comment_count==2)
{
[cell.first_comment setHidden:false];
[cell.second_cmment setHidden:false];
[cell.third_comment setHidden:true];
}
else
{
[cell.first_comment setHidden:false];
[cell.second_cmment setHidden:false];
[cell.third_comment setHidden:false];
[cell.btn_more_comments setHidden:false];
}
for(l=0;l<[user_comments count];l++)
{
Comment *comment=[user_comments objectAtIndex:l];
NSString *comment_string=[comment.user_name stringByAppendingString:#" "];
comment_string=[comment_string stringByAppendingString:comment.comment];
int count=(int)[comment.user_name length];
NSMutableAttributedString* mutableAttributeStr = [[NSMutableAttributedString alloc]initWithString:comment_string];
NSAttributedString *attributeStr = [[NSAttributedString alloc]initWithString:#"\n" attributes:#{NSFontAttributeName : [UIFont fontWithName:#"HelveticaNeue-Bold" size:8]}];
[mutableAttributeStr addAttribute:NSFontAttributeName value: [UIFont fontWithName:#"Helvetica-Bold" size:14.0] range:NSMakeRange(0, count)];
[mutableAttributeStr addAttribute:NSForegroundColorAttributeName value:[self colorFromHexString:#"#48a0dd"] range:NSMakeRange(0, count)];
[mutableAttributeStr appendAttributedString:attributeStr];
// end of the repetitive pattern
if (l == 0)
{
[cell.first_comment setAttributedText:mutableAttributeStr];
}
else if (l == 1)
{
[cell.second_cmment setAttributedText:mutableAttributeStr];
}
else if (l == 2)
{
[cell.third_comment setAttributedText:mutableAttributeStr];
}
}
}
else
{
[cell.first_comment setHidden:true];
[cell.second_cmment setHidden:true];
[cell.third_comment setHidden:true];
[cell.btn_more_comments removeFromSuperview];
}
cell.label_time.text=[BaseController timeAgoStringFromDate:date];
[arr_indexpath addObject:indexPath];
}
return cell;
}

Answer 1

Keep in mind that the cells is reused. If you have, say, 10000 rows in your table datasource, the table view won't create that many rows. It will only create enough rows to be displayed on the screen and a few others to be preloaded.
For every time you scroll your table, the tableview will use those cells that go invisible to load the new cells that just become visible, to make a illusion of infinite amount of rows. That why those new cells have the old data. So basically, you will have to set your UIImageView's image to nil in cellForRowAtIndexpath: if no image is available.
if([user_post.post_image isEqualToString:#"none"] && [user_post.post_video isEqualToString:#"none"])
{
NSLog(#"NOT INSIDE THE CONDITION");
}
In the code of you above, you simply print out a log, while what you also have to do is setting the UIImageView's image to nil.
So this is my suggestion:
//if([user_post.post_image isEqualToString:#"none"] && [user_post.post_video isEqualToString:#"none"])
//{
// NSLog(#"NOT INSIDE THE CONDITION");
//}
//else
{
NSLog(#"INSIDE BEIZER PATH CONDITION");
UIBezierPath * imgRect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 10, 100, 100)];
cell.tv_post.textContainer.exclusionPaths = #[imgRect];
UIImageView *tv_image =[[UIImageView alloc]initWithFrame:CGRectMake(0, 10, 100, 100)];
if(![user_post.post_image isEqualToString:#"none"])
{
[tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_image]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
else{
[tv_image setImage:nil]; //Prevent the old data to be shown
}
if(![user_post.post_video isEqualToString:#"none"])
{
[tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_video_thumbnail]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
else{
[tv_image setImage:nil];//Prevent the old data to be shown
}
[cell.tv_post addSubview:tv_image];
}
Maybe this code doesn't fit your requirements about how the data will be displayed, but hope it helps you to get the idea!

Answer 2

When a tableview cell is needed to be displayed you will either create a new one or reuse one that you created previously but is no longer visible on screen. Since you have created a UIImageView and added it to a cell, when you reuse it the image is still there.
To stop this happening, you need to keep a reference to the imageview so the next time around you are able to remove it. Since you are adding them dynamically and don't have an IBOutlet your quickest option is to assign the image a tag
UIImageView *tv_image =[[UIImageView alloc]initWithFrame:CGRectMake(0, 10, 100, 100)];
tv_image.tag = 21; // arbitrary number but must be unique to the image
By tagging the image, the next time around you can get access to it:
UIImageView *tv_image = (UIImageView*)[cell viewWithTag:21];
if (tv_image != nil) {
tv_image.image = nil; // remove the image (or remove the image view from the cell etc)
}
Just be sure to refactor the code accordingly so that if you find the image from a tag you don't need to recreate it etc

Answer 3

Your img_profile is getting repeated because your are re-using the cell.
Replace the below line of code
[cell.img_profile setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.user_profileImage]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
with below code:-
if (user_post.user_profileImage.length == 0) {
cell.img_profile.hidden = true;
}else{
[cell.img_profile setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.user_profileImage]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
Explanation:-
Check if your json contains the user profile image then set the image, else hide the profile image view.

Answer 4

A table view reuses cells. This means that if you add a subview to a cell, as you do on the line [cell.tv_post addSubview:tv_image], then that subview will still be in the cell when it is reused.
Basically, if you are adding subviews to a custom cell in tableView:cellForRowAtIndexPath:, you are probably making a mistake.
Just design the tv_image view into the HomeCell in the first place. HomeView should have an outlet named tv_image, connected to the image view in your storyboard or XIB. When you need tv_image, show it. Otherwise, hide it.
if([user_post.post_image isEqualToString:#"none"] && [user_post.post_video isEqualToString:#"none"])
{
NSLog(#"NOT INSIDE THE CONDITION");
cell.tv_image.image = nil;
cell.tv_image.hidden = YES;
cell.tv_post.textContainer.exclusionPaths = #[];
}
else
{
NSLog(#"INSIDE BEIZER PATH CONDITION");
UIBezierPath * imgRect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 10, 100, 100)];
cell.tv_post.textContainer.exclusionPaths = #[imgRect];
if(![user_post.post_image isEqualToString:#"none"])
{
[cell.tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_image]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
if(![user_post.post_video isEqualToString:#"none"])
{
[cell.tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_video_thumbnail]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
cell.tv_image.hidden = NO;
}
Also, make sure setImageWithURL:placeholderImage: doesn't set the image view's hidden = NO when it loads the image.

Answer 5

I wonder where you are allocating you custom cell. Shouldn't you be creating cell only if it's not created. Something like this:
static NSString *CellIdentifier = #"homeCell";
HomeCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if(!cell)
{
cell = [[[HomeCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]];
}
And then updating the UI components.
if([user_post.post_image isEqualToString:#"none"] && [user_post.post_video isEqualToString:#"none"])
{
NSLog(#"NOT INSIDE THE CONDITION");
}
else
{
NSLog(#"INSIDE BEIZER PATH CONDITION");
UIBezierPath * imgRect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 10, 100, 100)];
cell.tv_post.textContainer.exclusionPaths = #[imgRect];
UIImageView *tv_image =[[UIImageView alloc]initWithFrame:CGRectMake(0, 10, 100, 100)];
if(![user_post.post_image isEqualToString:#"none"])
{
[tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_image]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
if(![user_post.post_video isEqualToString:#"none"])
{
[tv_image setImageWithURL:[NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.post_video_thumbnail]]placeholderImage:[UIImage imageNamed:#"post_placeholder.png"]];
}
[cell.tv_post addSubview:tv_image];
}
perhaps you should write an "update method" inside your "HomeCell" class. To update the UI components.

Answer 6

I recommend to use [SDWebImage][1]https://github.com/rs/SDWebImage , where you can update your cell in completion block or cache image if need

Answer 7

The problem is two folds:
cells are reused, this is common place for miss, but not in your case.
your line [cell.img_profile setImageWithURL:...]; is asynchronous, which mean by the time the image is downloaded, your cell may be reused, so clearing the imageView at reuse won't help.
To properly use async-loading of image in a reusable cell, you have to double check that it's the correct image on loading success.
add a property to the cell class:
#property (weak) NSURL *targetImageUrl;
then change the loading to add a check:
NSURL *targetImageUrl = [NSURL URLWithString:[IMAGE_BASE_URL stringByAppendingString:user_post.user_profileImage]];
cell.targetImageUrl = targetImageUrl; // <!> replace latest target
[cell.img_profile
setImageWithURLRequest: [NSMutableURLRequest requestWithURL:targetImageUrl]
placeholderImage: [UIImage imageNamed:#"post_placeholder.png"]
success: ^(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image) {
if (cell.targetImageUrl != targetImageUrl) return; // <!> this is the trick
cell.img_profile.image = image;
}
failure: ^(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error) {
}];

Answer 8

Since the cellForRowAtIndexPath is called whenever the cell becomes visible, I always use the next strategy for displaying images that need to be loaded from the web: I either associate the image (when downloaded) with objc_setAssociatedObject with the object that contains data for table row, or create some hashMap where i put the images with some id for the key. Then in cellForRowAtIndexPath I check if associated object is nil (or if image for the key exists in hashmap). If it's nil or doesn't exist (which means it's still downloading) i set a placeholder image for the imageView's image, otherwise I set the downloaded image.
And after download you reload table (or just the needed cell)