MVC模式下通过xib自定义cell

前言

我会分两篇文章来总结UITableView的简单使用，这一篇总结xib方式自定义UITableViewCell，并且采用MVC模式为controller瘦身

• xib的优点：简单易用速度快，直接拖曳搭建界面
• xib的缺点：新建cell的高度是固定的，不能根据内容调节
  针对xib的缺点，由下一篇文章总结的通过代码自定义cell来解决

本篇文章就以Demo中 图书馆->我的借阅 的界面为例

首先看一下我们最终实现的样子

屏幕快照 2015-10-15 21.50.01.png

通过xib自定义cell

• 1.新建Borrow类继承自NSObject。Borrow.h文件中添加cell中的属性

  @property (nonatomic, copy) NSString *image; // 封面
  @property (nonatomic, copy) NSString *title; // 书名
  @property (nonatomic, copy) NSString *author; // 作者
  @property (nonatomic, copy) NSString *publish; // 出版社
  @property (nonatomic, copy) NSString *number; // 索书号
  @property (nonatomic, copy) NSString *place; // 馆藏地
  @property (nonatomic, copy) NSString *time; // 时间
  @property (nonatomic, copy) NSString *bill; // 超时计费
  

Borrow.m中重写init方法
- (id)initWithDict:(NSDictionary *)dict {
if (self = [super init]) {
// 解析字典属性
self.image = dict[@"image"];
self.title = dict[@"title"];
self.author = dict[@"author"];
self.publish = dict[@"publish"];
self.number = dict[@"number"];
self.place = dict[@"place"];
self.time = dict[@"time"];
self.bill = dict[@"bill"];
}
return self;
}
并在Borrow.m中提供一个类方法
+ (id)borrowWithDict:(NSDictionary *)dict {
return [[self alloc] initWithDict:dict];
}

• 2.新建BorrowCell类继承自UITableViewCell

• 3.新建BorrowCell.xib。 注意：一定在xib的cell中设置重用标识，如图：

  
  
  

  重用标识Identifier设为：BorrowCell
  
  

  描述cell的样子，拖曳UIImageView放书本封面，拖曳label放置书名、作者、出版社等信息。cell中黑色字体为固定内容，灰色字体为根据数据显示出的内容

  
  
  

  BorrowCell.xib
  最终：将xib高度设定为200

• 4.修改xib中cell的类名（class）为BorrowCell

  
  
  

  修改xib中cell的类名（class）为BorrowCell

• 5.在BorrowCell中拥有xib中的所有子控件（声明属性、进行连线）

  
  
  

  屏幕快照 2015-10-15 20.20.06.png

• 6.给BorrowCell增加模型属性
  @property (nonatomic, strong) Borrow *borrow;

• 7.重写BorrowCell的setBorrow方法，在这个方法中根据模型数据设置cell内部子控件的属性
  - (void)setBorrow:(Borrow *)borrow {
  _borrow = borrow;

  // 封面
  NSString *imageStr = [borrow.image stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
  NSURL *url = [NSURL URLWithString:imageStr];
  [_image sd_setImageWithURL:url placeholderImage:[UIImage imageNamed:@"book.png"]];
  
  // 书名
  _title.text = borrow.title;
  
  // 作者
  _author.text = borrow.author;
  
  // 出版社
  _publish.text = borrow.publish;
  
  // 索书号
  _number.text = borrow.number;
  
  // 馆藏地
  _place.text = borrow.place;
  
  // 时间
  _time.text = borrow.time;
  
  // 超时计费
  _bill.text = borrow.bill;
  }
  

注：setBorrow方法中若是直接加载封面图片，界面会卡顿。所以这里采用第三方库SDWebImage中的方法，如果不想使用第三方库，也可以采用下面的多线程方法：
// 封面
_image.image = [UIImage imageNamed:@"book.png"]; // 放置一张加载完成前的默认图片
// 1.获取一个全局队列
dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
// 2.把任务添加到队列中执行
dispatch_async(queue, ^{
// 3.从网络上下载图片
NSURL *urlstr = [NSURL URLWithString:borrow.image];
NSData *data = [NSData dataWithContentsOfURL:urlstr];
UIImage *image = [UIImage imageWithData:data];
// 4.回到主线程，展示图片
dispatch_async(dispatch_get_main_queue(), ^{
_image.image = image;
});
});

• 8.给BorrowCell提供一个类方法，返回从xib中创建好的cell对象
  + (id)borrowCell {
  return [[NSBundle mainBundle] loadNibNamed:@"BorrowCell" owner:nil options:nil][0];
  }
  注：加载xib文件的两种方法
  方法一：
  NSArray *objects = [[NSBundle mainBundle] loadNibName:"BorrowCell" owner:nil options:nil];
  方法二：
  UINib *nib = [UINib nibWithName:@"BorrowCell" bundle:nil];
  NSArray *objects = [nib instantiateWithOwner:nil options:nil];
• 9.在BorrowCell中给xib中的cell添加一个重用标识（比如BorrowCell）提供一个类方法，返回重用标识
  + (NSString *)ID {
  return @"BorrowCell";
  }

BorrowViewController中显示的内容

• 1.添加UITableView
  _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStyleGrouped];
  _tableView.dataSource = sel f;
  [self.view addSubview:_tableView];

• 2.给cell设置高度，因为cell的高度一致所以采用以下方法
  // 高度固定
  _tableView.rowHeight = 200;

• 3.添加本地数据
  NSArray *array = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"Borrow.plist" ofType:nil]];
  _borrows = [NSMutableArray array];
  for (NSDictionary *dict in array) {
  [_borrows addObject:[Borrow borrowWithDict:dict]];
  }

• 4.遵守UITableViewDataSource，实现UITableViewDataSource方法
  - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
  return 1; // 此方法默认为1，可省略
  }

  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
  return _borrows.count;
  }
  
  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
  // 1.缓存池取出cell，[BorrowCell ID]返回重用标识
  BorrowCell *cell = [tableView dequeueReusableCellWithIdentifier:[BorrowCell ID]];
  // 2.如果缓存池中没有cell就用BorrowCell创建
  if (!cell) {
    cell = [BorrowCell borrowCell];
  }
  // 从数组中取出模型
  Borrow *borrow = _borrows[indexPath.row];
  //3.传递模型
  cell.borrow = borrow;
  return cell;
  }
  

遵从MVC模式，controller瘦身成功,减轻了controller的工作量，交给它的模型去做。

后记

小白出手，请多指教。
如言有误，还望斧正！

• 转载请保留原文地址：http://www.jianshu.com/p/9917cb6888b0
• Demo的GitHub地址：QLU-BlogDemo
• 有兴趣的读者欢迎关注我的微博：与佳期