UI初级之表视图UITableView自定义单元格

内容概要：  表视图之自定义单元格

 一、直接在cell.contentView上添加组件来自定义cell

//返回cell
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSString *id = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:id];

    if (cell ==nil) {

    //调用自定义方法：在此方法中我们在cell上添加了各种组件

     cell = [self myCellView];

    }

  //调用自定义方法：为组件中的属性赋值

   [self setCell:indexPath UITableViewCell:cell];

   return cell;

 

}

//自定义方法：返回添加了各种组件的cell

- (UITableViewCell *)myCellView{ 

   //设置id

    NSString *id = @"Cell";

    UITableViewCell *cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:id];

    //显示图片的组件

    UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 10, 37*2, 60*2)];
    imgView.tag = 100;

    [cell.contentView addSubview:imgView];

}

//自定义方法：为cell设置参数

- (void)setCell:(NSIndexPath *)indexPath UITableViewCell:(UITableViewCell*)cell{

    //取出当前字典（即数据源）

    NSDictionary *dic = _dataArr[indexPath.row];
    //设置属性值
    UIImageView *imgView1 = (UIImageView *)[cell.contentView viewWithTag:100];

    imgView1.image = [UIImage imageNamed:[dic objectForKey:@"image"] ];

}

二、xib文件自定义单元格

1.创建空的MyCell.xib文件，拖进TableViewCell组件，为其设置id(“Cell")

2在cell组件中添加各种需要的组件，并为其设置tag值，便于在代码中取出为其设置实际的值

3.由于cell的高度不能在xib文件中设置，需要在代码中指定高度

4.在返回单元格的方法中通过如下方法获取并复用单元格

    NSString *id = @"Cell";

          //通过id来获取可复用的单元格

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:id];

          //如果没有获取到可用的单元格，就从xib中获取一个自定义的单元格

    if (cell ==nil) {

    //使用xib方法

     cell = [[[NSBundle mainBundle] loadNibNamed:@"MyCell" owner:niloptions:nil] lastObject];

}

    //获取单元格后，通过tag值获取cell中的组件，并设置单元格中的值

     ... 

     //最后返回单元格

    return cell;

}

三、storyBoard结合面向对象的思想复用单元格

第一步：storyBoard中的处理

1.通过storyBoard在视图控制器上添加一个Table View组件，并且连接代理到视图控制器，再添加一个复用单元格，

2.在单元格上添加各种自己需要的组件（不需要设置tag值）但是要设置id属性（以便在视图控制器中取出复用单元格）

第二步：自定义cell类中的处理

1.创建自定义的MyCell类，使其继承于3TableViewCell子类

2.将在story的cell上面组件后拖进MyCell的.h文件中，作为自定义cell的成员变量，在MyCell类中还要添加数据源属性如下：

@property (weak, nonatomic) IBOutlet UIImageView *imgView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *yearLabel;
@property (weak, nonatomic) IBOutlet UILabel *ratingLabel;
//数据源
@property (nonatomic, strong) NSDictionary *dataDic;

3.使用继承后的子类有下面的方法

- (void)awakeFromNib {

  //当视图从xib或者storyboard中加载时，走这个方法,相当于初始化方法

}

4.在tableView返回单元格的房中，我们调用了单元格设置数据源的方法，也就是如下的方法，这样cell中各组件的属性值就都有了

//通过set方法，设置了数据源也设置了其他属性

- (void)setDataDic:(NSDictionary *)dataDic
{
    if (_dataDic != dataDic) {
        _dataDic = dataDic;
    }
    //此时能够确保值已经传过来了

    self.imgView.image = [UIImage imageNamed:[self.dataDicobjectForKey:@"image"]];

    self.titleLabel.text = [self.dataDic objectForKey:@"title"];

    self.yearLabel.text = [self.dataDic objectForKey:@"year"];

    self.ratingLabel.text = [self.dataDic objectForKey:@"rating"];

}

第三步：视图控制器中对返回单元格的操作

//1.设置数据源

//2.返回行数（和组数）
//3.返回单元格的高度（在storyboard中设置单元格高度无效）
//  这里设置高度有两种方法
//  (1)在story中为tableView设置tag值，然后在此控制器中取出设置行高
//  (2)通过代理方法返回行高
//4.返回单元格
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //V(View)：单元格
    //通过面向对象的方法，把stroryBoard中的cell封装成了TableViewCell的子类，所以在这里就使用了子类MovieCell

    MovieCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"forIndexPath:indexPath];

    //在控制器中，我们不应该太多去设置视图自己需要显示的内容，控制器充当MVC架构模式中的C，需要做的应该是把M－－－》V

    //M(Model)：数据源
    NSDictionary *contentDic = self.data[indexPath.row];
    //contentDic----> Cell
    //dataDic是自定义单元格对象的属性，在设置单元格的这个属性的时候，通过set方法也会初始化cell中的各种属性值
    cell.dataDic = contentDic;
    return cell;

}

四、MVC架构模式来使用单元格

MVC的架构思想：

Model数据层：从资源文件中获取数据，并取出数据将其封装为Model对像

View显示层：自定义cell对象，在其中添加各种组件，并且包含了资源

Control控制层：将显示层与数据层联系，调用view层方法，设置资源

封装Cell的写法：

#import "MovieCell.h"

@implementation MovieCell
//覆写了父类的初始化方法
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        [self _initViews];
     }
    return self;
}

- (void)awakeFromNib {
    [super awakeFromNib];
    [self _initViews];
}

//初始化各组件
- (void)_initViews{
    //图片
    UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 100, 120)];
    imgView.tag = 100;
    imgView.image = [UIImage imageNamed:_model.imgName];
    [self.contentView addSubview:imgView];
   
    //标题
    UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(120, 10, 300, 30)];
    titleLabel.tag = 101;
    titleLabel.textAlignment = NSTextAlignmentLeft;
    titleLabel.font = [UIFont boldSystemFontOfSize:20];
    titleLabel.textColor =[UIColor orangeColor];
    [self.contentView addSubview:titleLabel];
   
    //年份
    UILabel *yearLabel = [[UILabel alloc] initWithFrame:CGRectMake(120, 50, 300, 20)];
    yearLabel.tag =102;
    yearLabel.textAlignment = NSTextAlignmentLeft;
    yearLabel.font = [UIFont boldSystemFontOfSize:16];
    [self.contentView addSubview:yearLabel];
   
    //评分
    UILabel *ratingLabel = [[UILabel alloc] initWithFrame:CGRectMake(120, 90, 300, 20)];
    ratingLabel.tag =103;
    ratingLabel.textAlignment = NSTextAlignmentLeft;
    ratingLabel.font = [UIFont boldSystemFontOfSize:16];
    [self.contentView addSubview:ratingLabel];
   
}

//当子视图重新布局的时候调用此方法

- (void)layoutSubviews{

    [super layoutSubviews];

    //获取组件，赋值
    UIImageView *imgview = (UIImageView *)[self.contentView viewWithTag:100];
    imgview.image = [UIImage imageNamed:_model.imgName];
   
    UILabel *titleLabel = (UILabel *)[self.contentView viewWithTag:101];
    titleLabel.text  = _model.title;
   
    UILabel *yearLabel = (UILabel *)[self.contentView viewWithTag:102];

    yearLabel.text  = _model.year;

  

    UILabel *ratingLabel = (UILabel *)[self.contentView viewWithTag:103];
    ratingLabel.text  = _model.rating;

}


//设置数据源，同时设置属性
- (void)setModel:(MovieModel *)model{
    if (_model != model) {
        _model = model;
        [self setNeedsLayout];
    }
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];
 }

@end