IOS UI初级-表视图单元格定制

1.表视图控制器的基本使用方法

①UITableViewController继承UIViewController,它的创建可以极大的简化表视图的创建，默认的实现了常用的数据源方法和代理方法。

②创建UITableViewController不需要我们设置数据源方法和代理方法，如果需要访问表视图，通过self.tableView

③如果覆盖loadView方法，注意确保调用父类的loadView方法，因为父类的loadView方法需要初始化UITableView方法

2.UITableViewController常用属性

2.系统内置单元格的使用

- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath {
    NSString *identifier = @"Cell" ;
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier :identifier];
    if (cell == nil ) {
        /*
         UITableViewCellStyleDefault, //textlable + image
         UITableViewCellStyleValue1, //textlable + image + detail(right)
         UITableViewCellStyleValue2, //textlable + detail(right)
         UITableViewCellStyleSubtitle //textlable + image + detail(down)
         */
        cell = [[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleSubtitle reuseIdentifier :identifier];
    }
    cell. textLabel . text = self . data [indexPath. row ];
    // 单元格中插入视图
    cell. imageView . image = [ UIImage imageNamed : self . data [indexPath. row ]];
    // 插入详情信息

    cell.detailTextLabel.text = @"如果你是一朵美丽的小花朵";

2.定制单元格

第一种方式：

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier :identifier];
    if (cell == nil ) {
        cell = [[ UITableViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :identifier];
        // 注意：控件的创建应该跟 cell 初始化放在一起，确保 cell 当中只有自己创建的这一个控件，不会出现控件的叠加（共有）
        // 图片
        UIImageView *imageView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 20 , 15 , 80 , 120 )];
        imageView. tag = 100 ;
        // 添加到 contentVIew

        [cell.contentView addSubview:imageView];

  // 对控件的赋值放到外面
//    取到每一个单元格中的字典
    NSDictionary *dataDic = self . data [indexPath. row ];
    // 图片
    UIImageView *imageView = ( UIImageView *)[cell. contentView viewWithTag : 100 ];

    imageView.image = [UIImage imageNamed:[dataDic objectForKey:@"image"]];

第二种方式 xib

if (cell == nil ) {
        // 从 xib 文件中取得 cell
        cell = [[[ NSBundle mainBundle ] loadNibNamed : @"MyCell" owner : nil options : nil ] lastObject ];
    }
    // 取到数据部分的字典
    NSDictionary *dicData = self . data [indexPath. row ];
    // 用 tag 值传过来各个控件，再添加数据
    // 图片
    UIImageView *imageView = ( UIImageView *)[cell. contentView viewWithTag : 100 ];

    imageView.image = [UIImage imageNamed:[dicData objectForKey:@"image"]];

第三种方式 MVC

Model类用于数据

ViewCell 做视图

Controller 总的管理

①创建Model类，用于存储数据

// 创建 model 时 确定 view 上视图的个数来确定 model 有几个属性
@property ( nonatomic , copy ) NSString *img;
@property ( nonatomic , copy ) NSString *titile;
@property ( nonatomic , copy ) NSString *year;

@property ( nonatomic , copy ) NSString *rating;

在ViewController中将源数据给model

// 先将数据源装到一个数组中
    NSArray *dataArr = [ NSArray arrayWithContentsOfFile :[[ NSBundle mainBundle ] pathForResource : @"Films.plist" ofType : nil ]];
    self . data = [ NSMutableArray array ];
    // 创建一个可变数组 用来装 model
//    NSMutableArray *mArr = [NSMutableArray array];
    // 遍历数据源数组 取出每个字典
    for ( NSDictionary *dic in dataArr) {
        // 创建 Model 对象，源数据中的字典中的数据传给 Model
        Model *model = [[ Model alloc ] init ];
        // 图片
        NSString *img = [dic objectForKey : @"image" ];
        model. img = img;
        //title
        NSString *title = [dic objectForKey : @"title" ];
        model. titile = title;
        //year
        NSString *year = [dic objectForKey : @"year" ];
        model. year = year;
        //rating
        NSString *rating = [dic objectForKey : @"rating" ];
        model. rating = rating;
       
        // 将 model 装到可变数组中
        [ self . data addObject :model];
       

    }

②子类化ViewCell 将所有的视图都在这个类中取完成

#import "Model.h"
@interface ViewCell : UITableViewCell

// 视图中要有数据， V 中要有 M, 所有 V 中要有 M 的对象

@property ( nonatomic , strong ) Model *model;

// 重写初始化方法
- ( instancetype )initWithStyle:( UITableViewCellStyle )style reuseIdentifier:( NSString *)reuseIdentifier
{
    self = [ super initWithStyle :style reuseIdentifier :reuseIdentifier];
    if ( self ) {
        // 在初始化的时候 就创建视图
        [ self _initView ];
       
    }
    return self ;

}

// 只有 xib 或者 stroyboard 走下面的方法

- ( void )awakeFromNib {
    // Initialization code
    [ super awakeFromNib ];
    // 最好也写上
    [ self _initView ];
   

}

// 在调用 model 的 set 方法的时候   将数据传到视图上
- ( void )setModel:( Model *)model
{
    if ( _model != model) {
        _model = model;
        // 调用 layout 方法
        [ self setNeedsLayout ];
    }

}

- ( void )_initView
{
    // 图片
    UIImageView *imgView = [[ UIImageView alloc ] initWithFrame : CGRectMake ( 20 , 15 , 100 , 120 )];
    imgView. tag = 100 ;
    imgView. backgroundColor = [ UIColor greenColor ];

    [self.contentView addSubview:imgView];

}

// 当子视图重新布局时调用
- ( void )layoutSubviews
{
    // 一定要调用父类的这个方法
    [ super layoutSubviews ];
    UIImageView *imgView = ( UIImageView *)[ self . contentView viewWithTag : 100 ];

    imgView.image = [UIImage imageNamed:self.model.img];

}

③控制cell的显示

- ( UITableViewCell *)tableView:( UITableView *)tableView cellForRowAtIndexPath:( NSIndexPath *)indexPath
{
    NSString *identifier = @"Cell" ;
    // 子类化 UITableViewCell
    ViewCell *cell = [tableView dequeueReusableCellWithIdentifier :identifier];
    if (cell == nil ) {
        cell = [[ ViewCell alloc ] initWithStyle : UITableViewCellStyleDefault reuseIdentifier :identifier];
    }
    // 把数据传过去
    cell. model = self . data [indexPath. row ];
    return cell;
}