ios UITableView封装之下拉-上提-图片异步加载

写在前面

做过移动端开发的人都知道，列表控件是最常用的控件之一。iOS里的列表控件是UITableView，其实Apple的开发人员对于UITableView的设计已经够好的了(简单易用，扩展性非常强等等)。

但对于展示逻辑单一的移动端系统软件，你还是能感觉到有些繁琐(或许是程序员天生就有些懒惰的毛病吧)。

来看看它到底繁琐在哪儿了。首先，它的使用频率太高了；第二，它通常不是只呈现一下数据就完事了，一般都会跟随下拉刷新、上提加载更多功能，当然通常还要跟网络下载数据、图片打交道；第三，MVC模式是ios开发的惯用模式，随之而来的是一大堆协议的实现(无论你是再写一次也好，拷贝也罢，反正做这些工作都让人觉得索然无味)。

冲着这些，今天就把UITableView常见的使用模式封装了一下。具体做了以下几件事：

1、 内嵌了下拉刷新(EGORefreshTableHeaderView)、上提加载更多(LoadMoreTableFooterView)

2、 内置实现了UITableViewDataSource、UITableViewDelegate这两个通常必须实现的协议，对于自实现的逻辑以Block的形式对客户代码开放

3、 内置实现了1中提到的两个组件的回调协议，同上，自实现的逻辑以Block的形式对外开放

4、 内置实现了EGORefreshTableHeaderView、LoadMoreTableFooterView与UITableView交互必须实现的UIScrollViewDelegate协议

5、 内置实现了异步图片下载(可选)

你可以到我的Github上，查看源码。称它为ELTableViewController是取了EGORefreshTableHeaderView以及LoadMoreTableFooterView的首字母。

这份代码中包含了一个示例程序以及三个必备组件：

1、 EGORefreshTableHeaderView

2、 LoadMoreTableFooterView(修改版，原版不能适应任何尺寸的高度)

3、 Apple官方提供的异步下载UITableView中的图片的示例组件(IconDownLoader)，这个只适用于下载类似于社交网络中的用户头像，不建议使用它来下载那些大图片，因为它甚至都没有缓存(如果图片很大，推荐使用SDImage)

代码解读

它已经内置实现了这些协议，所以在你使用它的时候，无需设置和实现。

[cpp] view plain copy

1. @interfaceELTableViewController:UIViewController
2. <
3. UITableViewDelegate,
4. UITableViewDataSource,
5. EGORefreshTableHeaderDelegate,
6. LoadMoreTableFooterDelegate,
7. IconDownloaderDelegate
8. >

对于不断变化的业务逻辑，这里提供了所有需要实现的block：

[cpp] view plain copy

1. //blocksforUITableViewdelegate
2. typedefUITableViewCell*(^cellForRowAtIndexPathDelegate)(UITableView*,NSIndexPath*);
3. typedefCGFloat(^heightForRowAtIndexPathDelegate)(UITableView*,NSIndexPath*);
4. typedefvoid(^didSelectRowAtIndexPathDelegate)(UITableView*,NSIndexPath*);
6. //blocksforrefreshandloadmore
7. typedefvoid(^refreshDataSourceFunc)(void);
8. typedefvoid(^loadMoreDataSourceFunc)(void);
10. typedefvoid(^refreshDataSourceCompleted)(void);
11. typedefvoid(^loadMoreDataSourceCompleted)(void);
12. //usetoloadimage(async)
13. typedefvoid(^loadImagesForVisiableRowsFunc)(void);
14. typedefvoid(^appImageDownloadCompleted)(NSIndexPath*);

它们以属性的形式对外公开：

[cpp] view plain copy

1. //propertyforblocks
2. @property(nonatomic,copy)cellForRowAtIndexPathDelegatecellForRowAtIndexPathDelegate;
3. @property(nonatomic,copy)heightForRowAtIndexPathDelegateheightForRowAtIndexPathDelegate;
4. @property(nonatomic,copy)didSelectRowAtIndexPathDelegatedidSelectRowAtIndexPathDelegate;
6. @property(nonatomic,copy)loadMoreDataSourceFuncloadMoreDataSourceFunc;
7. @property(nonatomic,copy)refreshDataSourceFuncrefreshDataSourceFunc;
8. @property(nonatomic,copy)refreshDataSourceCompletedrefreshDataSourceCompleted;
9. @property(nonatomic,copy)loadMoreDataSourceCompletedloadMoreDataSourceCompleted;
11. @property(nonatomic,copy)loadImagesForVisiableRowsFuncloadImagesForVisiableRowsFunc;
12. @property(nonatomic,copy)appImageDownloadCompletedappImageDownloadCompleted;

对于上提加载更多、下拉刷新、图片异步加载这几个功能都是可选的，它们以组件的形式存在。比如，在实例化该controller的时候你就可以设置上提和下拉是否可用。而对于图片下载，你只要不实现其相应得block，它也不会对你造成额外的负担。

[cpp] view plain copy

1. -(id)initWithRefreshHeaderViewEnabled:(BOOL)enableRefreshHeaderView
2. andLoadMoreFooterViewEnabled:(BOOL)enableLoadMoreFooterView;
4. -(id)initWithRefreshHeaderViewEnabled:(BOOL)enableRefreshHeaderView
5. andLoadMoreFooterViewEnabled:(BOOL)enableLoadMoreFooterView
6. andTableViewFrame:(CGRect)frame;

[cpp] view plain copy

1. #pragmamark-UITableViewDelegate-
2. -(NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section{
3. if(nil==self.dataSource){
4. return0;
5. }
7. return[self.dataSourcecount];
8. }
10. -(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath{
11. if(!self.cellForRowAtIndexPathDelegate){
12. @throw[NSExceptionexceptionWithName:@"FrameworkError"
13. reason:@"MustbesettingcellForRowAtIndexPathBlockforUITableView"userInfo:nil];
14. }
15. returnself.cellForRowAtIndexPathDelegate(tableView,indexPath);
16. }
18. -(CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath:(NSIndexPath*)indexPath{
19. if(!self.heightForRowAtIndexPathDelegate){
20. @throw[NSExceptionexceptionWithName:@"FrameworkError"
21. reason:@"MustbesettingheightForRowAtIndexPathDelegateforUITableView"userInfo:nil];
22. }
23. returnself.heightForRowAtIndexPathDelegate(tableView,indexPath);
24. }
26. -(void)tableView:(UITableView*)tableViewdidSelectRowAtIndexPath:(NSIndexPath*)indexPath{
27. if(self.didSelectRowAtIndexPathDelegate){
28. self.didSelectRowAtIndexPathDelegate(tableView,indexPath);
29. }
30. }
32. #pragmamark-LoadMoreTableFooterDelegateMethods-
33. -(void)loadMoreTableFooterDidTriggerRefresh:(LoadMoreTableFooterView*)view{
34. if(self.loadMoreDataSourceFunc&&self.loadMoreDataSourceCompleted){
35. self.loadMoreDataSourceFunc();
37. doubledelayInSeconds=3.0;
38. dispatch_time_tpopTime=dispatch_time(DISPATCH_TIME_NOW,delayInSeconds*NSEC_PER_SEC);
39. dispatch_after(popTime,dispatch_get_main_queue(),
40. self.loadMoreDataSourceCompleted);
41. }
42. }
44. -(BOOL)loadMoreTableFooterDataSourceIsLoading:(LoadMoreTableFooterView*)view{
45. returnself.isLoadingMore;
46. }
48. #pragmamark-EGORefreshTableHeaderDelegateMethods-
49. -(void)egoRefreshTableHeaderDidTriggerRefresh:(EGORefreshTableHeaderView*)view{
50. if(self.refreshDataSourceFunc&&self.refreshDataSourceCompleted){
51. self.refreshDataSourceFunc();
53. doubledelayInSeconds=3.0;
54. dispatch_time_tpopTime=dispatch_time(DISPATCH_TIME_NOW,delayInSeconds*NSEC_PER_SEC);
55. dispatch_after(popTime,dispatch_get_main_queue(),
56. self.refreshDataSourceCompleted);
57. }
58. }
60. -(BOOL)egoRefreshTableHeaderDataSourceIsLoading:(EGORefreshTableHeaderView*)view{
61. returnself.isRefreshing;
62. }
64. -(NSDate*)egoRefreshTableHeaderDataSourceLastUpdated:(EGORefreshTableHeaderView*)view{
65. return[NSDatedate];
66. }
68. #pragmamark-UIScrollViewDelegateMethods-
69. -(void)scrollViewWillBeginDecelerating:(UIScrollView*)scrollView{
70. self.currentOffsetPoint=scrollView.contentOffset;
71. }
73. -(void)scrollViewDidScroll:(UIScrollView*)scrollView{
74. CGPointpt=scrollView.contentOffset;
75. if(self.currentOffsetPoint.y<pt.y){
76. [self.loadMoreFooterViewloadMoreScrollViewDidScroll:scrollView];
77. }else{
78. [self.refreshHeaderViewegoRefreshScrollViewDidScroll:scrollView];
79. }
80. }
82. -(void)scrollViewDidEndDragging:(UIScrollView*)scrollViewwillDecelerate:(BOOL)decelerate{
83. CGPointpt=scrollView.contentOffset;
84. if(self.currentOffsetPoint.y<pt.y){
85. [self.loadMoreFooterViewloadMoreScrollViewDidEndDragging:scrollView];
86. }else{
87. [self.refreshHeaderViewegoRefreshScrollViewDidEndDragging:scrollView];
88. }
90. if(!decelerate&&self.loadImagesForVisiableRowsFunc){
91. self.loadImagesForVisiableRowsFunc();
92. }
93. }
95. -(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView{
96. if(self.loadImagesForVisiableRowsFunc){
97. self.loadImagesForVisiableRowsFunc();
98. }
99. }
101. #pragmamark-downloadimageasync-
102. -(void)appImageDidLoad:(NSIndexPath*)indexPath{
103. if(self.appImageDownloadCompleted){
104. self.appImageDownloadCompleted(indexPath);
105. }
106. }

ELTableViewController 的使用

创建一个新的controller继承自：ELTableViewController；

override父类的initBlocks方法：

[cpp] view plain copy

1. #pragmamark-privatemethods-
2. -(void)loadDataSource{
3. self.dataSource=[NSMutableArrayarray];
4. [self.dataSourceaddObject:@"dataSource_1"];
5. [self.dataSourceaddObject:@"dataSource_2"];
6. [self.dataSourceaddObject:@"dataSource_3"];
7. [self.dataSourceaddObject:@"dataSource_4"];
8. [self.dataSourceaddObject:@"dataSource_5"];
9. [self.dataSourceaddObject:@"dataSource_6"];
10. [self.dataSourceaddObject:@"dataSource_7"];
11. [self.dataSourceaddObject:@"dataSource_8"];
12. [self.dataSourceaddObject:@"dataSource_9"];
13. [self.dataSourceaddObject:@"dataSource_10"];
14. }
16. -(void)initBlocks{
17. __blockTestViewController*blockedSelf=self;
19. //loadmore
20. self.loadMoreDataSourceFunc=^{
21. [blockedSelf.dataSourceaddObject:@"loadMoreDataSourceBlock_1"];
22. [blockedSelf.dataSourceaddObject:@"loadMoreDataSourceBlock_2"];
23. [blockedSelf.dataSourceaddObject:@"loadMoreDataSourceBlock_3"];
24. [blockedSelf.dataSourceaddObject:@"loadMoreDataSourceBlock_4"];
25. [blockedSelf.dataSourceaddObject:@"loadMoreDataSourceBlock_5"];
27. blockedSelf.isLoadingMore=YES;
28. [self.tableViewreloadData];
30. NSLog(@"loadMoreDataSourceBlockwasinvoked");
31. };
33. //loadmorecompleted
34. self.loadMoreDataSourceCompleted=^{
35. blockedSelf.isLoadingMore=NO;
36. [blockedSelf.loadMoreFooterViewloadMoreScrollViewDataSourceDidFinishedLoading:self.tableView];
38. NSLog(@"afterloadMorecompleted");
39. };
41. //refresh
42. self.refreshDataSourceFunc=^{
43. blockedSelf.dataSource=[NSMutableArrayarray];
44. [blockedSelf.dataSourceaddObject:@"refreshDataSourceBlock_1"];
45. [blockedSelf.dataSourceaddObject:@"refreshDataSourceBlock_2"];
46. [blockedSelf.dataSourceaddObject:@"refreshDataSourceBlock_3"];
47. [blockedSelf.dataSourceaddObject:@"refreshDataSourceBlock_4"];
48. [blockedSelf.dataSourceaddObject:@"refreshDataSourceBlock_5"];
50. blockedSelf.isRefreshing=YES;
51. [self.tableViewreloadData];
53. NSLog(@"refreshDataSourceBlockwasinvoked");
54. };
56. //refreshcompleted
57. self.refreshDataSourceCompleted=^{
58. blockedSelf.isRefreshing=NO;
59. [blockedSelf.loadMoreFooterViewloadMoreScrollViewDataSourceDidFinishedLoading:self.tableView];
61. NSLog(@"afterrefreshcompleted");
62. };
64. self.cellForRowAtIndexPathDelegate=^(UITableView*tableView,NSIndexPath*indexPath){
65. staticNSString*cellIdentifier=@"cellIdentifier";
66. UITableViewCell*cell=[tableViewdequeueReusableCellWithIdentifier:cellIdentifier];
67. if(!cell){
68. cell=[[[UITableViewCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellIdentifier]autorelease];
69. }
71. cell.textLabel.text=[blockedSelf.dataSourceobjectAtIndex:indexPath.row];
73. NSLog(@"block:cellForRowAtIndexPathBlockhasbeeninvoked.");
75. returncell;
76. };
78. self.heightForRowAtIndexPathDelegate=^(UITableView*tableView,NSIndexPath*indexPath){
79. NSLog(@"block:heightForRowAtIndexPathBlockhasbeeninvoked.");
80. return60.0f;
81. };
83. self.didSelectRowAtIndexPathDelegate=^(UITableView*tableView,NSIndexPath*indexPath){
84. NSLog(@"block:didSelectRowAtIndexPathDelegatehasbeeninvoked.");
85. };
87. }

然后在ViewDidLoad中调用：

[cpp] view plain copy

1. [selfinitBlocks];
2. [selfloadDataSource];
3. [self.tableViewreloadData];

最后，你在实例化该controller的时候，可以指定是否使用上提和下拉

[cpp] view plain copy

1. self.viewController=[[[TestViewControlleralloc]initWithRefreshHeaderViewEnabled:YESandLoadMoreFooterViewEnabled:YES]autorelease];

写在最后

写完之后，我用它重构了一下快易博中，新浪微博的几个视图。也省掉了一些冗余代码，如果当初在开发的时候就使用它的话，感觉还是省了一些功夫的。

它其实也还是比较简单的封装，所以还不是很具有业务相关性，同时也可见它还有很多可继续增强的功能：

1、 封装增删改查功能

2、 封装加载、操作时动画

3、 封装网络加载的统一实现

……………….

先写到这里吧。

推荐两篇讲ios block非常不错的文章：

http://lldong.github.com/blog/2011/12/30/blocks/

http://yannickloriot.com/2011/11/working-with-blocks/

源码地址：

https://github.com/yanghua/ELTableViewController