UITableView scrolling becomes choppy - ios

Question

I have a UITableView with paging enabled. At first I can scroll very smoothly between cells. However, after scrolling back and forth a few times, it becomes rather choppy. Am I not creating/reusing my cells properly?
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"Cash-Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
[cell setSelectionStyle:UITableViewCellSelectionStyleNone];
UIImageView *image = [[UIImageView alloc] initWithFrame:CGRectMake(20, 40, cell.frame.size.width-40, cell.frame.size.width-40)];
Purchase *purch = (Purchase *)self.purchases[indexPath.row];
[image setImage:[UIImage imageWithData:purch.image]];
image.contentMode = UIViewContentModeCenter;
image.contentMode = UIViewContentModeScaleAspectFill;
image.clipsToBounds = YES;
[self setMaskTo:image byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight];
[cell addSubview:image];
UIView *price = [[UIView alloc] initWithFrame:CGRectMake(20, 40+cell.frame.size.width-40, cell.frame.size.width-40, 60)];
UILabel *priceLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, price.frame.size.width, price.frame.size.height)];
[priceLabel setText:#"$10.0"];
[priceLabel setTextAlignment:NSTextAlignmentCenter];
[priceLabel setFont:[UIFont boldSystemFontOfSize:25.0f]];
[self setMaskTo:price byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight];
[price addSubview:priceLabel];
[price setBackgroundColor:[UIColor whiteColor]];
[cell addSubview:price];
return cell;
}

Answer 1

If you want to reuse them then make sure you add the content to your UITableViewCell only once and on reusing it just update it (e.g. update the image and the price accordingly).
Otherwise, what you get with your implementation is adding subviews price and image everytime (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath gets called. Just try debugging the number of subviews your cell has to see if I am right.
You could go this way:
if ( ! [cell viewWithTag: 1])
{
UIImageView *image = [[UIImageView alloc] initWithFrame:CGRectMake(20, 40, cell.frame.size.width-40, cell.frame.size.width-40)];
image.tag = 1;
image.contentMode = UIViewContentModeCenter;
image.contentMode = UIViewContentModeScaleAspectFill;
image.clipsToBounds = YES;
[self setMaskTo:image byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight];
[cell addSubview:image];
}
if ( ! [cell viewWithTag: 2])
{
UIView *price = [[UIView alloc] initWithFrame:CGRectMake(20, 40+cell.frame.size.width-40, cell.frame.size.width-40, 60)];
UILabel *priceLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, price.frame.size.width, price.frame.size.height)];
priceLabel.tag = 2;
[priceLabel setTextAlignment:NSTextAlignmentCenter];
[priceLabel setFont:[UIFont boldSystemFontOfSize:25.0f]];
[self setMaskTo:price byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight];
[price addSubview:priceLabel];
[price setBackgroundColor:[UIColor whiteColor]];
[cell addSubview:price];
}
Purchase *purch = (Purchase *)self.purchases[indexPath.row];
UIImage *image = [cell viewWithTag: 1];
[image setImage:[UIImage imageWithData:purch.image]];
UILabel *priceLabel = [cell viewWithTag: 2];
[priceLabel setText:#"$10.0"];

Answer 2

This is because - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath is being called each time the cell comes into the view. Add the images to an array (in viewDidLoad or somewhere), and you'll get a smoother result.

Answer 3

You are not reusing the cells, which causes the lag/choppy scrolling.
suggestion:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *CellIdentifier = #"Cash-Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
if(cell == nil){
UIImageView *image = [[UIImageView alloc] initWithFrame:CGRectMake(20, 40, cell.frame.size.width-40, cell.frame.size.width-40)];
Purchase *purch = (Purchase *)self.purchases[indexPath.row];
[image setImage:[UIImage imageWithData:purch.image]];
image.contentMode = UIViewContentModeCenter;
image.contentMode = UIViewContentModeScaleAspectFill;
image.clipsToBounds = YES;
image.tag = 10;
[self setMaskTo:image byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight];
[cell.contentView addSubview:image];
UIView *price = [[UIView alloc] initWithFrame:CGRectMake(20, 40+cell.frame.size.width-40, cell.frame.size.width-40, 60)];
UILabel *priceLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, price.frame.size.width, price.frame.size.height)];
[priceLabel setText:#"$10.0"];
[priceLabel setTextAlignment:NSTextAlignmentCenter];
[priceLabel setFont:[UIFont boldSystemFontOfSize:25.0f]];
[self setMaskTo:price byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight];
[price addSubview:priceLabel];
[price setBackgroundColor:[UIColor whiteColor]];
price.tag = 11;
[cell.contentView addSubview:price];
}
//update the value here
UIImageView *imgV = (UIImageView *)[self.contentView viewWithTag:10];
// update the imageView here
//imgV.image = image
UIView *vv = (UIView *)[self.contentView viewWithTag:11];
// Update the UIView here
//vv.text = #"text here";
//Put setselection style here to allow the cell to be loaded before setting the property value
cell.selectionStyle = UITableViewCellSelectionStyleNone;
return cell;
}