UITableView 高级

自定义Cell

1.创建UITableViewCell的子类

2.将添加到UITableViewCell的子视图设置为属性 同时将数据类也作为属性 方便给子视图进行赋值

#import <UIKit/UIKit.h>
#import "CellModel.h"
@interface NewsTableViewCell : UITableViewCell

@property (nonatomic ,retain) UILabel *titleLabel;

@property (nonatomic, retain) UILabel *summaryLabel;
// 选中图片
@property (nonatomic, retain) UIImageView *imageV;

@property (nonatomic, retain) CellModel *model;

@end

3.重写自定义初始化方法

- (instancetype) initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {

        [self addLabel];
    }
    return self;
}

// 添加子视图
- (void)addLabel
{
    self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake((kScreenWidth - 300) / 2, 20, 300, 40)];
    self.titleLabel.backgroundColor = [UIColor orangeColor];
    self.titleLabel.numberOfLines = -1;
    self.titleLabel.font = [UIFont systemFontOfSize:16];
    // 注意给UITableViewCell及其子类添加子视图时 需要添加到self.contentView上
    [self.contentView addSubview:self.titleLabel];
    [_titleLabel release];

    self.summaryLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.titleLabel.left, self.titleLabel.bottom + 10, self.titleLabel.width, self.titleLabel.height)];
    self.summaryLabel.backgroundColor = [UIColor grayColor];
    // 多行显示
    self.summaryLabel.numberOfLines = -1;
    // 设置字体大小
    self.summaryLabel.font = [UIFont systemFontOfSize:16];
    [self.contentView addSubview:self.summaryLabel];
    [_summaryLabel release];

    self.imageV = [[UIImageView alloc] initWithFrame:CGRectMake(340, self.titleLabel.top + 5, 30, 30)];

    [self.contentView addSubview:self.imageV];
    [_imageV release];
}

4.重写model属性的setter方法

- (void)setModel:(CellModel *)model
{
    if (_model != model) {
        [_model release];
        _model = [model retain];
    }
    // 在给model赋值的同时 给子视图进行赋值
    self.titleLabel.text = model.title;
    self.summaryLabel.text = model.summary;

    // 在赋值的同时 改变label的高度(见下文)
    // 获取字符串高度
    CGFloat summaryHeight = [NewsTableViewCell cellHeightForModel:model];
    // 改变一下label的高度
    self.summaryLabel.height = summaryHeight;

}

5.在添加cell的方法中用该类初始化对象cell

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *identifier = @"MyCell";
    NewsTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    if (cell == nil) {
        cell = [[[NewsTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:identifier] autorelease];
    }
    CellModel *model = self.arrData[indexPath.row];
    // 直接赋值 将具体赋值过程封装在NewsTableViewCell类中进行
    cell.model = model;


    return cell;
}

计算字符串完全显示需要的高度

用于改变存放字符串的label的高度, 通常在UITableViewCell的子类中实现

// 计算字符串的高度(类方法)
+ (CGFloat)cellHeightForModel:(CellModel *)model
{
    // 创建字体大小的字典
    // 这里设置了字体大小后 需要label的font属性做相应的改变
    NSDictionary *fontDic = @{NSFontAttributeName: [UIFont systemFontOfSize:16]};
    CGRect textRect = [model.summary boundingRectWithSize:CGSizeMake(300, CGFLOAT_MAX) options:NSStringDrawingUsesLineFragmentOrigin attributes:fontDic context:nil];
    return textRect.size.height;
}

当然 不光要改变label的高度 同时需要改变cell的高度

// 行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    CellModel *model = self.arrData[indexPath.row];
    CGFloat tempHeight = [NewsTableViewCell cellHeightForModel:model];
    // 上边距 + tilteLabel + 中间距离 + summaryLabel + 下边距
    return 20 + 40 + 10 + tempHeight + 20;
}

点击cell 改变cell上的子视图

给cell 添加一个UIImageView 点击cell时 UIImageView.image 变成选中图片 再次点击cell 时UIImageView.image 变回未选中图片

当然不能直接在方法中更改图片 这样子再次点击无法变回未选中图片

因此需要给model添加 isSelected 属性 来记录对应的cell的点击状态

在tableView 用 CellModel 类 “获取” 数据文件的字典数据的同时 应该给model.isSelected属性赋一个初值 而cell一开始应该显示未选中图片 所以:model.isSelect = NO;

- (void)setUpData
{
    NSString *path = [[NSBundle mainBundle] pathForResource:@"NewsData" ofType:@"plist"];
    NSDictionary *dic = [NSDictionary dictionaryWithContentsOfFile:path];
    NSArray *values = dic[@"news"];
    self.arrData = [NSMutableArray array];
       for (int i = 0; i < values.count; i++) {
          CellModel *model = [[CellModel alloc] init];
          [model setValuesForKeysWithDictionary:values[i]];
           ***model.isSelect = NO;***
          [self.arrData addObject:model];
          [model release];
    }
}

当然此时为了使cell在程序运行开始时呈现未选中图片 需要在给cell.model 赋值的同时 给 imageView添加一个图片 但是并不是直接给他一张未选中图片 如果这样做了 那么从重用集合中取出的cell即使是选中状态 也会在 重新赋值时变回未选中状态

我们不想在屏幕上滑时出现这样的问题 所以需要在赋值过程中判断一下(赋值过程当然还在cell的子类中进行)

- (void)setModel:(CellModel *)model
{
    if (_model != model) {
        [_model release];
        _model = [model retain];
    }
    // 利用model中的点选状态 解决cell复用的问题
    // 需要每次被复用的cell 再进行一次与状态对应的赋值
    if (model.isSelect == YES) {
        self.imageV.image = [UIImage imageNamed:@"select"];
    }else{
        self.imageV.image = [UIImage imageNamed:@"cancel"];
    }

}

在点击方法中根据选中属性model.isSelect 来给cell 的 ImageView 更换图片

// cell 点击的方法
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // 取出被点击的cell
    // 更改cell 图片
    NewsTableViewCell *cell = (NewsTableViewCell *)[tableView cellForRowAtIndexPath:indexPath];
    CellModel *model = self.arrData[indexPath.row];

    // 更改点击的状态
    model.isSelect = !model.isSelect;

    if (model.isSelect == YES) {
        cell.imageV.image = [UIImage imageNamed:@"select"];
    }else{
        cell.imageV.image = [UIImage imageNamed:@"cancel"];
    } 
}