UITableViewCell misses loading some local images/text - ios

Question

I have a custom Table View Cell that loads a thumbnail, text and text's background image. I am developing a chat app and the Cell is in the Send/Receive Message screen. This cell basically shows the sent/received. Below are more details regarding the project and problem.
I have two background images. One is for sender and the other is for receiver and these images are automatically resized based on the size of the text.
When I am sending/receiving small messages (1 line), the messages are displayed correctly.
However, when I try to send/receive multiple line messages, sometime the background images are missing and sometimes the text is missing (for some images) and when I scroll, those images/text appears some times.
I am using [UIImage imagedNamed:] to load the background images each time.
In my point of view, the issue is due to Memory as around 6-8 cells are visible all the times. Kindly help me in resolving the issue.
EDIT
Adding some code
-(UITableViewCell *)tableView:(UITableView *)tblView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
MyCell *cell = [tblView dequeueReusableCellWithIdentifier:#"myCell"];
//Setting background image view of cell
[cell.bgImageView setImage:[[UIImage imageNamed:#"chat_box2.png"] stretchableImageWithLeftCapWidth:0 topCapHeight:40]];
String message = ........;
CGSize textSize = CGSizeMake(250, 1000);
CGSize size = [message sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:textSize];
size.width += 9;
[cell.messageText setText:message];
[cell.messageText sizeToFit];
[cell.messageText setText:message];
//Setting frames of background Image View and message Text to our desired frame (**size** is calculated in the above lines)
[cell.bgImageView setFrame:CGRectMake(79,5, cell.bgImageView.frame.size.width, size.height+18)];
[cell.messageText setFrame:CGRectMake(98, 13, size.width, size.height)];
return cell;
}
Note: The size calculation is also done in -(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath so that the cell is resized accordingly.

Answer 1

Yup, The issue is due to cell reusability. When you deque Tableviewcells the contents become mixup as the system tries to Re-use the old tableviewCells. What you should do is to set all the values for your cell in cellForRowAtIndexPath delegate as:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
//All Initialization code
.
.
.
//Set all the values of your Custom Table View Cell here
cell.image = yourImage;
cell.text = "your text";
cell.backGroundImage = yourBackGroundImage;
cell.TimeLabel.Text = "time value";
}
Hope this should help. Free feel to ask if you have further queries.

Answer 2

If the cell is being displayed and the image and text are not, then the problem is related to the frame of textView and frame of the imageView.
You can try to tick clip subviews at your views (especially imageViews) and check if that makes the trick.
Anyway I suggest you to use autolayout either then defining the frame of your views.

Answer 3

Finally, I am able to resolve the issue myself. Below is a detailed response highlighting the cause as well as the solution for the problem.
Cause of Problem
The items [bgImageView (UIImageView) and messageText(UILabel)] were IBOutlets defined inside the Custom Cell class and connected to Cell in the Storyboard.
Whenever, we try to change frame of such elements (defined inside storyboard), the cell is not updated which was the root cause of the problem.
Solution
In order to resolve the issue, I removed the elements from storyboard and defined them inside the -initWithCoder:. Please Note that this function is called for Cells of storyboard prototype cells (instead of -initWithStyle:reuseIdentifier).
initWithCoder: This method is to be defined inside the custom UITableViewCell Class (in my case, the name of the class is MyCell
-(id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if(self)
{
//Settings sizes to zero as they will be changed in cellForRowAtIndexPath
_bgImageView = [[UIImageView alloc] initWithFrame:CGRectZero];
[self.contentView addSubview:_bgImageView];
_messageText = [[UILabel alloc] initWithFrame:CGRectZero];
_messageText.backgroundColor = [UIColor clearColor];
[_messageText sizeToFit];
[_messageText setFont:[UIFont systemFontOfSize:12]];
[_messageText setNumberOfLines:0];
[self.contentView addSubview:_messageText];
}
return self;
}
The heightForRowAtIndexPath* and *cellForRowAtIndexPath: are also given for reference.
heightForRowAtIndexPath:
-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *message = .......;
CGSize size = [self getSize:message]; //look below for getSize:
size.height += 18 + 15; //to cater for padding (top & bottom).
return height;
}
cellForRowAtIndexPath:
-(UITableViewCell *)tableView:(UITableView *)tblView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
MyCell *cell = [tblView dequeueReusableCellWithIdentifier:#"msgCell"];
NSString *message = ......;
CGSize size = [self getSize:message]; //look below for getSize:
cell.messageText.text = message;
[cell.messageText setFrame:CGRectMake(98, 13, size.width, size.height)];
[cell.bgImageView setFrame:CGRectMake(79,5, CELL_MESSAGE_WIDTH+32, size.height+18)]; //write #define CELL_MESSAGE_WIDTH 200 at the top of the file (below include statements)
[cell.bgImageView setImage:[[UIImage imageNamed:#"img.png"] stretchableImageWithLeftCapWidth:11 topCapHeight:23]];
return cell;
}
getMaxSize:
-(CGSize)getSize:(NSString*)str
{
CGSize maxSize = CGSizeMake(CELL_MESSAGE_WIDTH, 1000);
CGSize size = [str sizeWithFont:[UIFont systemFontOfSize:12] constrainedToSize:maxSize lineBreakMode:NSLineBreakByWordWrapping];
return size;
}

Answer 4

Try to set the image, text and all the content inside of MyCell not in -tableView: cellForRowAtIndexPath: delegate method.
I can see you mark yourself as solved. If it works that's great. However there are couple of thing you should definitely improve and change. There are my suggestions.
I don't think you have to do anything in initWithCoder:. You can leave to storyboard to handle. Here is the code how I think you should do:
MyCell.h
// define enum for type of cell
typedef NS_ENUM(NSInteger, MyCellType) {
MyCellTypeSender,
MyCellTypeReceiver
};
#interface MyCell : UITableViewCell
#property (nonatomic, assign) MyCellType cellType;
#property (nonatomic, strong) NSString *message;
- (void)fitToSize:(CGSize)size;
#end
MyCell.m
#implementation MyCell
// As you can see image is implemented inside the cell in setter of cellType
-(void)setCellType:(MyCellType)cellType {
if (_cellType != cellType) {
_cellType = cellType;
UIImage *bgImage = [UIImage imageNamed:(cellType == MyCellTypeReceiver) ? #"receiverImg" : #"senderImg"];
self.bgImageView.image = [bgImage stretchableImageWithLeftCapWidth:11 topCapHeight:23];
}
}
-(void)setMessage:(NSString *)message {
if (![message isEqualToString:_message]) {
_message = message;
self.messageLabel.text = _message;
}
}
-(void)fitToSize:(CGSize)size {
self.messageLabel.frame = CGRectMake(98, 13, size.width, size.height);
self.bgImageView.frame = CGRectMake(79,5, size.width+32, size.height+18);
}
#end
In your file where you implement delegate and data source method for table use following code:
-(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString *message = #"some message ....";
CGSize size = [self sizeForText:message];
return size.height;
}
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
MyCell *cell = (MyCell *)[tableView dequeueReusableCellWithIdentifier:#"myCell"];
CGRect cellFrame = [tableView rectForRowAtIndexPath:indexPath]; // Do not calculate the size again. Just grab cell frame from current indexPath
[cell fitToSize:cellFrame.size]; // You set the content of the cell in MyCell by passing size of cell
cell.cellType = MyCellTypeRecever; // Or MyCellTypeSender whichever you decide
cell.message = #"some message ....";
return cell;
}
-(CGSize)sizeForText:(NSString*)str {
NSDictionary *attributes = #{NSFontAttributeName: [UIFont systemFontOfSize:18.f]};
CGSize maxSize = CGSizeMake(CELL_MESSAGE_WIDTH, 1000);
// This is the method you should use in order to calculate the container size
// Avoid using -sizeWithFont:constrainedToSize:lineBreakMode: as it is depracated in iOS7
CGRect rect = [str boundingRectWithSize:maxSize
options:NSStringDrawingUsesLineFragmentOrigin
attributes:attributes
context:NULL];
return rect.size;
}
Some lines are commented. As you can see most of the important code landed in MyCell subclass of UITableVieCell.
Also please note -sizeWithFont:constrainedToSize:lineBreakMode: is deprecated and use -boundingRectWithSize:options:attributes:context: