UITableView自定义单元格

完成下面的界面设计

UI.png

@interface ViewController ()
{
    UITableView *myTableView;
    // 保存数据
    NSMutableArray *dataArray;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 初始化 并指定样式
    myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 20, WIDTH, HEIGHT - 20) style:UITableViewStylePlain];
    [self.view addSubview:myTableView];

    // 设置表格行高 一般不采用这种方法
    //myTableView.rowHeight = 60;

    myTableView.dataSource = self;
    myTableView.delegate = self;
    // 加载数据模型
    [self loadDaModel];
    
    // 如果表格视图要使用自定义的单元格 需要提前注册可重用单元格
    // 自定义表格绘制在 GPNewsTableViewCell.xib文件中
    // [NSBundle mainBundle] 可以写成nil
    [myTableView registerNib:[UINib nibWithNibName:@"MyTableViewCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:@"CELL"];

}

- (UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CELL" forIndexPath:indexPath];
    
    // 创建模型对象
    AppListAppModel *model = dataArray[indexPath.row];
    cell.model = model;

    return cell;
}

#import 
#import "AppListAppModel.h"
#import "StartView.h"

@interface MyTableViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *appImageView;
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *timeLabel;
@property (weak, nonatomic) IBOutlet UILabel *priceLabel;
@property (weak, nonatomic) IBOutlet UILabel *typeLabel;
@property (weak, nonatomic) IBOutlet UILabel *countLabel;
@property (weak, nonatomic) IBOutlet StartView *startCurrentView;

// 关联模型数据
@property (nonatomic, strong) AppListAppModel *model;

@end

@implementation MyTableViewCell


// 重写model的setter方法
-(void) setModel:(AppListAppModel *)model{
    // 修改实例变量
    _model = model;
    
    // 修改视图
    [_appImageView sd_setImageWithURL:[NSURL URLWithString:_appModel.iconUrl] placeholderImage:[UIImage imageNamed:@"appproduct_appdefault"]];
    _nameLabel.text = _model.name;
    _timeLabel.text = _model.updateDate;
    // 实现多样式文本需要使用NSAttributedString
    // 参数1: 多样式文本
    // 参数2: 文本样式定义
    NSDictionary *attrDict = @{NSStrikethroughStyleAttributeName:@(2),
                               NSStrikethroughColorAttributeName:[UIColor blueColor]
                               };
    NSAttributedString *lastPrice = [[NSAttributedString alloc] initWithString:[NSString stringWithFormat:@"￥:%@.00",_model.lastPrice] attributes:attrDict];
    self.priceLabel.attributedText = lastPrice;
    _typeLabel.text = _model.categoryName;
    NSString *countStr = [NSString stringWithFormat:@"分享: %@次 下载: %@次 收藏: %@次",_model.shares,_model.downloads,_model.favorites];
    _countLabel.text = countStr;
    
    // 设置星标值
    _startCurrentView.value = [_model.starCurrent floatValue];
}

xib绘制结果

cell.png

在xib中需要将startView关联StartView视图

新建一个StartView类，继承UIView

#import 

@interface StartView : UIView

// 星标值
@property (nonatomic, assign) CGFloat value;

@end

实现部分

#import "StartView.h"

@implementation StartView{
    // 前景图
    UIImageView *_foregroundImageView;
    // 背景图
    UIImageView *_backgroundImageView;
}

// 重写初始化方法
-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        [self creatImageViews];
    }
    return self;
}

// 当使用xib或者Storyboard时 其中视图设置为自定义的类 需要重写该方法
// 在xib或者Storyboard加载时会调用此方法创建视图
-(id)initWithCoder:(NSCoder *)aDecoder{
    if (self = [super initWithCoder:aDecoder]) {
        [self creatImageViews];
    }
    return self;
}

// 创建图片视图
- (void) creatImageViews{
    _backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"StarsBackground"]];
    [self addSubview:_backgroundImageView];
    // 设置内容模式
    _backgroundImageView.contentMode = UIViewContentModeLeft;
    
    // 创建前景图
    _foregroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"StarsForeground"]];
    [self addSubview:_foregroundImageView];
    // 设置内容模式
    _foregroundImageView.contentMode = UIViewContentModeLeft;
    
    // 裁剪
    _foregroundImageView.clipsToBounds = YES;
}


// 设置星标视图的值
-(void)setValue:(CGFloat)value{
    _value = value;
    if (_value < 0 || _value > 5) {
        return;
    }
    // 修改前景图的frame 不能使用前景图 因为前景图有可能是修改过的
    CGRect rect = _backgroundImageView.frame;
    rect.size.width *= (value / 5.f);
    _foregroundImageView.frame = rect;
}

@end