Objective-c UITableView Cell image superimpose - ios

Question

i'm working on UITableView who display entry with a price range value for each.
i'm using a loop to display the price range. and i searching where is my mystake because, when i'm scrolling up and down and each cells who have been display,hidden and redisplay again, superimpose the image of the "dollar" and it ugly, see the picture.
how i set init my cell :
PoiAllTableCell *cell = (PoiAllTableCell *)[tableView dequeueReusableCellWithIdentifier:#"PoiAllCell" forIndexPath:indexPath];
i'm using this code to display dollar imageview :
for (int i =0; i < 4;) {
PriceRangeImageView *img = [PriceRangeImageView new];
if (i < _currentPoi.priceRange) {
[img initWithXMultiple:i withColor:_appDelegate.mainColor];
}
else{
[img initWithXMultiple:i withColor:_appDelegate.blackColor];
}
[cell.priceRangeView addSubview:img];
i++;
}
how i display the image :
#import "PriceRangeImageView.h"
#implementation PriceRangeImageView
- (void)initWithXMultiple:(int)xMultiple withColor:(UIColor *)color{
if (self.image == nil) {
self.frame = CGRectMake(xMultiple*16,0,16,16);
self.image = [UIImage imageNamed:#"dollar_icon"];
self.image = [self.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
self.tintColor = color;
}
}
#end
here is my cell:
#import <UIKit/UIKit.h>
#import "PriceRangeView.h"
#interface PoiAllTableCell : UITableViewCell
#property (weak, nonatomic) IBOutlet UILabel *poiTitleLabel;
#property (weak,nonatomic) IBOutlet UIImageView *poiImageView;
#property (weak, nonatomic) IBOutlet UILabel *distanceLabel;
#property (weak, nonatomic) IBOutlet UILabel *kmStaticLabel;
#property (weak, nonatomic) IBOutlet UILabel *separatorLabel;
#property (weak, nonatomic) IBOutlet UILabel *categoriesLabel;
#property (weak, nonatomic) IBOutlet UIView *priceRangeView;
#property (nonatomic) CGSize distanceLabelSize;
#property (nonatomic) CGFloat distanceLabelWidth;
#end
i'm thinking than at every scroll cell add dollar imageview on the cell, i want to know how to avoid this. if somebody can suggest me a better way ?

Answer 1

because you using
UITableViewCell *cell = [tableView dequeueReusableHeaderFooterViewWithIdentifier:identifier];
So the cell is reusing and it have already an imageview. So use this code to add image view
for (int i =0; i < 4;) {
[[cell.priceRangeView viewWithTag:i] removeFromSuperview];
PriceRangeImageView *img = [PriceRangeImageView new];
img.tag = i;
if (i < _currentPoi.priceRange) {
[img initWithXMultiple:i withColor:_appDelegate.mainColor];
}
else{
[img initWithXMultiple:i withColor:_appDelegate.blackColor];
}
[cell.priceRangeView addSubview:img];
i++;
}

Answer 2

You should not be init a new img every time you are adding one on top of the other. You should make a property for image and call a method to set or set in the setter if the initWith.. code is not too long. But, don't create a new instance overtime it goes off screen.
#property(strong,nonatomic)PriceRangeImageView* img;
-(PriceRangeImageView*)img{
if(!_img){
_img = PriceRangeImageView *img = [PriceRangeImageView new];
}
//do what you need to do to prepare it here.. omg = some image or whatever
return img;
}
then just use self.img as your variable

Answer 3

i found this solution and it works good, i juste remove all subview on my priceRangeView before adding new imageView.
[cell.priceRangeView.subviews makeObjectsPerformSelector:#selector(removeFromSuperview)];
//affichage priceRange
for (int i =0; i < 4;) {
PriceRangeImageView *img = [PriceRangeImageView new];
if (i < _currentPoi.priceRange) {
[img initWithXMultiple:i withColor:_appDelegate.mainColor];
}
else{
[img initWithXMultiple:i withColor:_appDelegate.blackColor];
}
[cell.priceRangeView addSubview:img];
i++;
}