UIButton with UIImages in a UITableViewCell - Overlapping etc - iphone

Question

I have a problem with my UITableViewCell's. I am developing an application where certain posts in a feed may contain an image, and the button clicked will also need to contain a 'tag' number depending on which row of the table it is as I have an array of images downloaded.
The problem lies when I am scrolling (as you have already guessed) the table. The image loads fine, however when I scroll up/down the image will then go above other cells, and when the cell is shown back on the screen, the image will quickly change it's position to the proper position etc.
Here's the code for my UITableView:
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [feed count];
}
- (UITableViewCell *) getCellContentView:(NSString *)cellIdentifier
{
CGRect rect = [self.tableView bounds];
CGRect CellFrame = CGRectMake(0.0f, 0.0f, rect.size.width, 10.0f);
CGRect TitleFrame = CGRectMake(55.0f, 10.0f, 240.0f, 15.0f);
CGRect TextFrame = CGRectMake(55.0f, 25.0f, 250.0f, 15.0f);
CGRect PinFrame = CGRectMake(21.0f, 10.0f, 30.0f, 30.0f);
CGRect ViewFrame = CGRectMake(50.0f, 35.0f, 260.0f, 0.0f);
CGRect CommentsFrame = CGRectMake(300.0f, 10.0f, 20.0f, 15.0f);
UILabel * lblTemp;
UITableViewCell * cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier];
[cell setFrame:CellFrame];
lblTemp = [[UILabel alloc] initWithFrame:TitleFrame];
lblTemp.tag = 1;
lblTemp.numberOfLines = 0;
lblTemp.opaque = NO;
lblTemp.font = [UIFont systemFontOfSize:13.0f];
lblTemp.backgroundColor = [UIColor clearColor];
lblTemp.textColor = [UIColor blackColor];
lblTemp.textAlignment = UITextAlignmentLeft;
lblTemp.shadowColor = [UIColor whiteColor];
lblTemp.shadowOffset = CGSizeMake(0, 1);
[cell.contentView addSubview:lblTemp];
lblTemp = [[UILabel alloc] initWithFrame:TextFrame];
lblTemp.tag = 2;
lblTemp.numberOfLines = 0;
lblTemp.lineBreakMode = UILineBreakModeWordWrap;
lblTemp.adjustsFontSizeToFitWidth = NO;
lblTemp.font = [UIFont systemFontOfSize:13.0f];
lblTemp.textColor = [UIColor lightGrayColor];
lblTemp.backgroundColor = [UIColor clearColor];
lblTemp.shadowColor = [UIColor whiteColor];
lblTemp.shadowOffset = CGSizeMake(0, 1);
[cell.contentView addSubview:lblTemp];
lblTemp = [[UILabel alloc] initWithFrame:CommentsFrame];
lblTemp.tag = 5;
lblTemp.numberOfLines = 1;
lblTemp.font = [UIFont systemFontOfSize:13.0f];
lblTemp.textColor = [UIColor lightGrayColor];
lblTemp.backgroundColor = [UIColor whiteColor];
lblTemp.shadowColor = [UIColor whiteColor];
lblTemp.shadowOffset = CGSizeMake(0, 1);
[cell.contentView addSubview:lblTemp];
UIImageView * imgTemp = [[UIImageView alloc] initWithFrame:PinFrame];
imgTemp.tag = 3;
[cell.contentView addSubview:imgTemp];
UIView * viewTemp = [[UIView alloc] initWithFrame:ViewFrame];
viewTemp.tag = 4;
[viewTemp setBackgroundColor:[UIColor whiteColor]];
[cell.contentView addSubview:viewTemp];
return cell;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString * CellIdentifier = #"Cell";
UITableViewCell * cell = [self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];
//UITableViewCell * cell = [self getCellContentView:CellIdentifier];
if (cell == nil) {
cell = [self getCellContentView:CellIdentifier];
} else {
[cell.contentView viewWithTag:999];
}
cell.backgroundColor = [UIColor clearColor];
UILabel * title = (UILabel *)[cell viewWithTag:1];
UILabel * journey = (UILabel *)[cell viewWithTag:2];
UIImageView * pin = (UIImageView *) [cell viewWithTag:3];
UILabel * comments = (UILabel *)[cell viewWithTag:5];
title.text = [NSString stringWithFormat:#"%#", [[feed objectAtIndex:indexPath.row] objectForKey:#"comment"]];
[title sizeToFit];
title.frame = CGRectMake(title.frame.origin.x, title.frame.origin.y, 240, title.frame.size.height);
if ([[feed objectAtIndex:indexPath.row] objectForKey:#"weather_desc"] != [NSNull null] ||
[[feed objectAtIndex:indexPath.row] objectForKey:#"weather_temp"] != [NSNull null]) {
journey.text = [NSString stringWithFormat:#"It's %# and %#°C.", [[feed objectAtIndex:indexPath.row] objectForKey:#"weather_desc"], [[feed objectAtIndex:indexPath.row] objectForKey:#"weather_temp"]];
} else {
journey.text = [NSString stringWithFormat:#"%#", [[[feed objectAtIndex:indexPath.row] objectForKey:#"journey"] objectForKey:#"name"]];
}
journey.frame = CGRectMake(journey.frame.origin.x, 10 + title.frame.size.height, 240, 15);
if ([[feed objectAtIndex:indexPath.row] objectForKey:#"latitude"] != [NSNull null]) {
pin.image = [UIImage imageNamed:#"LocationPin.png"];
} else {
pin.image = [UIImage imageNamed:#"Pin.png"];
}
if ([[feed objectAtIndex:indexPath.row] objectForKey:#"image_file_size"] != [NSNull null]) {
NSString * text = [NSString stringWithFormat:#"%#", [[feed objectAtIndex:indexPath.row] objectForKey:#"comment"]];
CGFloat height = [text sizeWithFont:[UIFont systemFontOfSize:13] constrainedToSize:CGSizeMake(250, 1500) lineBreakMode:UILineBreakModeWordWrap].height;
UIImage * myImage = [images objectForKey:[NSString stringWithFormat:#"%i", indexPath.row]];
UIButton * button = [[UIButton alloc] initWithFrame:CGRectZero];
[button setBackgroundImage:myImage forState:UIControlStateNormal];
[button setFrame:CGRectMake(title.frame.origin.x + 55.0f, 40.0f + height, 250.0f, myImage.size.height)];
[button setTag:10 + indexPath.row];
[button addTarget:self action:#selector(imagePressed:) forControlEvents:UIControlEventTouchUpInside];
[cell addSubview:button];
UIView * backView = (UIView *) [cell viewWithTag:4];
[backView setFrame:CGRectMake(title.frame.origin.x + 50.0f, 35.0f + height, 260.0f, myImage.size.height + 10.0f)];
} else {
UIView * backView = (UIView *) [cell viewWithTag:4];
[backView setFrame:CGRectZero];
[backView setBackgroundColor:[UIColor clearColor]];
}
comments.text = [NSString stringWithFormat:#"%i", [[[feed objectAtIndex:indexPath.row] objectForKey:#"comments"] count]];
UIImage * background = [UIImage imageNamed:#"CellBackground.png"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:background];
imageView.contentMode = UIViewContentModeScaleToFill;
[cell setBackgroundView:imageView];
return cell;
}
- (void)tableView:(UITableView *)tv didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self.tableView deselectRowAtIndexPath:indexPath animated:NO];
MilestoneView * milestoneView = [[MilestoneView alloc] initWithNibName:#"MilestoneView" bundle:nil];
[milestoneView setMilestone:[feed objectAtIndex:indexPath.row]];
[self.navigationController pushViewController:milestoneView animated:YES];
}
- (CGFloat)tableView:(UITableView *)tv heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString * text = [NSString stringWithFormat:#"%#", [[feed objectAtIndex:indexPath.row] objectForKey:#"comment"]];
CGFloat height = [text sizeWithFont:[UIFont systemFontOfSize:13] constrainedToSize:CGSizeMake(240, 1500) lineBreakMode:UILineBreakModeWordWrap].height;
if ([[feed objectAtIndex:indexPath.row] objectForKey:#"image_file_size"] != [NSNull null]) {
UIImage * myImage = [images objectForKey:[NSString stringWithFormat:#"%i", indexPath.row]];
height += myImage.size.height + 15.0f;
}
return height + 37;
}
I am also using Apple's inbuilt 'ARC' with iOS 5.0.
Kind regards,
Dominic

Answer 1

In this code you add button in cellForRowAtIndexPath , hence this is happen....
so , you add the code for button , backView in getCellContentView and fetch images from array in getCellContentView.
UIImage *myImage = [images objectForKey:[NSString stringWithFormat:#"%i", indexPath.row]];
then,
UIButton *button = [[UIButton alloc] initWithFrame:CGRectZero];
[button setBackgroundImage:myImage forState:UIControlStateNormal];
[button setFrame:CGRectMake(55.0f, 40.0f, 250.0f, myImage.size.height)];
change height , width & x,y co-or. what u want and
set cell index to button.
[button setTag:indexPath.row];
[button addTarget:self action:#selector(imagePressed:) forControlEvents:UIControlEventTouchUpInside];
[cell.contentView addSubview:button];
Let me know if you have any problem....
Replace following function header
- (UITableViewCell *) getCellContentView:(NSString *)cellIdentifier {
.
.
}
with this function
- (UITableViewCell *) getCellContentView:(NSString *)cellIdentifier indexPathForButtonTag:(NSIndexPath*)indexPath {
.
.
}
Replace following line in cellForRowAtIndex
cell = [self getCellContentView:CellIdentifier];
With the
cell = [self getCellContentView:CellIdentifier indexPathForButtonTag:indexPath];

Answer 2

You dont need each button to have a different tag. You should not be adding any subviews to the cell in cellForRowAtIndexPath because you will inevitably end up adding subview on top of subview. I notice you are also adding an image view as the cell's background in this method - you should only do this when you are creating a new cell.
Im going to assume there is a good reason you are not using a xib file for this cell layout, so just add the button in your contentView method and give it a known tag.
In your button's action method you can find out which row of the table the button was in by using the locationInView: and indexPathForRowAtPoint: methods:
CGPoint hit = [sender locationInView:self.tableView];
NSIndexPath *hitRow = [self.tableView indexPathForRowAtPoint:hit];
Also, note that setting a view's .hidden property to YES is probably less effort that setting its frame to CGRectZero.

Answer 3

Ended up fixing the solution by doing the following simple code:
NSIndexPath *indexPath = [self.tableView indexPathForCell:(UITableViewCell *)[[sender superview]superview]];
I used the UIButton sender to get the cell that it was within. I also pulled out all the modifications of the .tag's and kept them at the same number.