一個基于MVVM的TableView組件化實現方案——AITableView
來自: http://www.chentoo.com/?p=250
AITableView
https://github.com/chentoo/AITableView
cocoapods:
pod ‘AITableView’
做什么用?
這是一個簡化UITableView使用方式的一個嘗試,不需要再實現UI TableView繁多的delegate和datasource方法,不需要重復實現繁多的cell的if else / switch 邏輯,只需要簡單的配置過程,你就可以輕松的駕馭和布局TableView。
這是一個基于MVVM思想的嘗試,并且最終拼裝成為TableView的元素不再是一個個的cell,而是一個個輕量的ViewModel(我們暫且叫他CellModel)。每個CellModel對應值唯一的一種cell,CellModel只擁有屬性, 且每一個屬性都將直接決定Cell的展示效果。
長遠來看,你可以輕松的組建一個你自己的CellModel庫。在同一個TableView的不同的邏輯情況下,或者不同的TableView中,你可以根據自己的需求選出合適的CellModel,配置屬性,拼裝組建即可。
怎么使用?
首先使用AITabelView,你不需要更改你原本的Cell的基類和model的基類,只需根據需要實現特定的Protocal即可。
1、 你的每個Cell需要實現AITableViewCellProtocal,并實現對應方法。你應該把你所有的Cell UI元素的配置放在
Objective-C
- (void)AIConfigureWithModel:(DemoNameCellModel *)model
- (void)AIConfigureWithModel:(DemoNameCellModel *)model</div>
并在類方法
Objective-C
+ (CGFloat)AIHeightWithModel:(id)model
+ (CGFloat)AIHeightWithModel:(id)model</div>
返回你的cell的高度。
比如:
Objective-C
#import "DemoTableViewNameCell.h"import "AITableViewProtocal.h"
import "DemoNameCellModel.h"
@interface DemoTableViewNameCell () <AITableViewCellProtocal>
@property (nonatomic, strong) UILabel *nameLabel;
@end
@implementation DemoTableViewNameCell
pragma mark - AITableViewCellProtocal
(void)AIConfigureWithModel:(DemoNameCellModel *)model { self.nameLabel.text = model.name; }
(CGFloat)AIHeightWithModel:(id)model { return 30.0f; }
@end</pre>
#import "DemoTableViewNameCell.h"import "AITableViewProtocal.h"
import "DemoNameCellModel.h"
@interface DemoTableViewNameCell () <AITableViewCellProtocal> @property (nonatomic, strong) UILabel *nameLabel; @end @implementation DemoTableViewNameCell
pragma mark - AITableViewCellProtocal
- (void)AIConfigureWithModel:(DemoNameCellModel *)model { self.nameLabel.text = model.name; }
(CGFloat)AIHeightWithModel:(id)model { return 30.0f; } @end </pre> </div>
2、接下來去寫一個能夠唯一對應這個cell的cellModel,它可以繼承自任何基類,也不需實現任何Protocal。但是需要保證的是,cell可以根據它所唯一對應的cellModel完成所有配置。
需要特別注意的是,每個CellModel類,對應且唯一對應一個Cell類,也即不同的Cell Class 不能對應同一個CellModel類。
完成cell對應的cellModel后,使用下面的方法,去綁定他們。
Objective-C
//AITableView.h
(void)bindModelClass:(Class)modelClass withCellClass:(Class)cellClass;
- (void)bindModelClass:(Class)modelClass withCellNibClass:(Class)cellNibClass;</pre>
//AITableView.h
- (void)bindModelClass:(Class)modelClasswithCellClass:(Class)cellClass;
(void)bindModelClass:(Class)modelClasswithCellNibClass:(Class)cellNibClass; </pre> </div>
特別的,如果一個cell的邏輯不依賴外部的變化而變化,那么他可能不需要一個cellModel去控制。那么有下面的特別方法去綁定它們。
當然其實我并不建議這么做,因為從長遠組建CellModel庫的角度來講,擁有一個唯一的cellModel可能更容易管理和使用。
Objective-C
//AITableView.h
(void)bindStaticCellWithCellClass:(Class)cellClass;
- (void)bindStaticCellWithCellNibClass:(Class)cellNibClass;</pre>
//AITableView.h
- (void)bindStaticCellWithCellClass:(Class)cellClass;
(void)bindStaticCellWithCellNibClass:(Class)cellNibClass; </pre> </div>
3、最后使用下面的方法就可以更新你的TableView了。
Objective-C
[self.tableview updateTabelViewWithModels:@[model, sModel, sModel, model]];
[self.tableviewupdateTabelViewWithModels:@[model, sModel, sModel, model]];
</div>4、如果你需要包含不同的section,或者需要headview footerview,那么你可以使用:AITableViewSection 去構建。
Objective-C
@interface AITableViewSection : NSObject
@property (strong, nonatomic) id headerModel; @property (strong, nonatomic) id footerModel; @property (strong, nonatomic) NSArray *cellModels;
- (instancetype)sectionWithHeaderModel:(id)sectionHeaderModel
footerModel:(id)sectionFooterModel cellModels:(NSArray *)cellModels;
@end</pre>
@interfaceAITableViewSection: NSObject @property (strong, nonatomic) id headerModel; @property (strong, nonatomic) id footerModel; @property (strong, nonatomic) NSArray *cellModels;
(instancetype)sectionWithHeaderModel:(id)sectionHeaderModel footerModel:(id)sectionFooterModel cellModels:(NSArray *)cellModels; @end </pre> </div>
并且使用下面的方法去更新TableView
Objective-C
[self.tableview updateTableViewWithSections:@[aiSection, aiSection, aiSection]];
[self.tableviewupdateTableViewWithSections:@[aiSection, aiSection, aiSection]];
</div>5、更多的請參看完整示例代碼。
如何接收cell 點擊事件?
提供了三種方式:
- AITableView的 delegate
- AITableView的 Block
- model 的 protocal block(可以方便的配置在model身上)
具體請看示例代碼。
</div>本文由用戶 sdf1392010 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
相關經驗
sesese色