前言
我会分两篇文章来总结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
- 有兴趣的读者欢迎关注我的微博：与佳期
网友评论