Objective-c UITableView Cell图像叠加

Question

我正在开发 UITableView，它显示每个条目的价格范围值。 我正在使用循环来显示价格范围。我在寻找我的赌注在哪里，因为当我上下滚动时，每个已显示、隐藏和重新显示的单元格，叠加“美元”的图像，它丑陋，看图片。

我如何设置我的单元格：

 PoiAllTableCell *cell = (PoiAllTableCell *)[tableView dequeueReusableCellWithIdentifier:@"PoiAllCell" forIndexPath:indexPath];

我正在使用此代码显示美元图像视图：

 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++;
    }

我如何显示图像：

#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

这是我的牢房：

#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

我在想，不是在每个滚动单元格上添加美元图像视图，我想知道如何避免这种情况。如果有人可以建议我更好的方法？

Answer 1

因为你使用

UITableViewCell *cell = [tableView dequeueReusableHeaderFooterViewWithIdentifier:identifier];

所以单元格正在重用并且它已经有一个图像视图。所以使用此代码添加图像视图

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

您不应该每次在另一个之上添加一个新的 img。如果 initWith.. 代码不太长，您应该为图像创建一个属性并调用一个方法来设置或在 setter 中设置。但是，不要创建一个新的实例超时它会离开屏幕。

 @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;


  }

然后使用 self.img 作为变量

Answer 3

我找到了这个解决方案并且效果很好，我只是在添加新的 imageView 之前删除了我的 priceRangeView 上的所有子视图。

 [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++;
    }