一个基于MVVM的TableView组件化实现方案
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元素的配置放在
1
|
- (void)AIConfigureWithModel:(DemoNameCellModel *)model1 |
并在类方法
1
|
+ (CGFloat)AIHeightWithModel:(id)model1 |
返回你的cell的高度。
比如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#import "DemoTableViewNameCell.h" #import "AITableViewProtocal.h" #import "DemoNameCellModel.h" @interface DemoTableViewNameCell () @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 |
2、接下来去写一个能够唯一对应这个cell的cellModel,它可以继承自任何基类,也不需实现任何Protocal。但是需要保证的是,cell可以根据它所唯一对应的cellModel完成所有配置。
需要特别注意的是,每个CellModel类,对应且唯一对应一个Cell类,也即不同的Cell Class 不能对应同一个CellModel类。
完成cell对应的cellModel后,使用下面的方法,去绑定他们。
1
2
3
4
|
//AITableView.h - (void)bindModelClass:(Class)modelClass withCellClass:(Class)cellClass; - (void)bindModelClass:(Class)modelClass withCellNibClass:(Class)cellNibClass;1234 |
特别的,如果一个cell的逻辑不依赖外部的变化而变化,那么他可能不需要一个cellModel去控制。那么有下面的特别方法去绑定它们。
当然其实我并不建议这么做,因为从长远组建CellModel库的角度来讲,拥有一个唯一的cellModel可能更容易管理和使用。
1
2
3
4
|
//AITableView.h - (void)bindStaticCellWithCellClass:(Class)cellClass; - (void)bindStaticCellWithCellNibClass:(Class)cellNibClass;1234 |
3、最后使用下面的方法就可以更新你的TableView了。
1
|
[self.tableview updateTabelViewWithModels:@[model, sModel, sModel, model]];1 |
4、如果你需要包含不同的section,或者需要headview footerview,那么你可以使用:
AITableViewSection 去构建。
1
2
3
4
5
6
7
8
9
|
@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;@end1234567891011 |
并且使用下面的方法去更新TableView
[self.tableview updateTableViewWithSections:@[aiSection, aiSection, aiSection]];1
5、更多的请参看完整示例代码。
如何接收cell 点击事件?
提供了三种方式:
AITableView的 delegate
AITableView的 Block
model 的 protocal block(可以方便的配置在model身上)
具体请看示例代码。
一个基于MVVM的TableView组件化实现方案的更多相关文章
- 一个基于swoole的作业调度组件,已经实现了redis和rabitmq队列消息存储。
https://github.com/kcloze/swoole-jobs 一个基于swoole的作业调度组件,已经实现了redis和rabitmq队列消息存储.参考资料:swoole https:/ ...
- iOS组件化实现方案
作者原文iOS组件化 - 路由架构从0到1实战 合伙呀 1.CTMediator作为路由中间件 2.基础UI组件以pod形式引入,并且能够独立运行调试 3.基础工具组件以pod形式引入,并且能够独立 ...
- 痞子衡嵌入式:kFlashFile v1.0 - 一个基于Flash的掉电数据存取方案
大家好,我是痞子衡,是正经搞技术的痞子.今天给大家带来的是痞子衡的个人小项目 - kFlashFile. 痞子衡最近在参与一个基于 i.MXRT1170 的项目,项目有个需求,需要在 Flash 里实 ...
- Yoshino: 一个基于React的可定制化的PC组件库
Github: https://github.com/Yoshino-UI... Docs: https://yoshino-ui.github.io/#/ Cli-Tool: https://git ...
- 设计一个基于svg的涂鸦组件(一)
基于svg写了一个涂鸦组件,说项目之前先附上几张效果图: 项目地址:SVGraffiti 由于篇幅问题,本文先总体介绍一下项目的大概情况,重点介绍一下组件间的通信方式. 一.项目说明 该项目是基于we ...
- 基于 SOA 的组件化业务基础平台
业务基础平台是业务逻辑应用和基础架构平台之间的一个中间层,解决 “应用软件的业务描述和操作系统平台.软件基础架构平台之间的交互与管理问题”.操作系统平台解决了“应用软件系统与硬件之间的交互与管理问题” ...
- 基于SOA的组件化业务基础平台[转]
转自https://www.ibm.com/developerworks/cn/webservices/1111_xiaojg_soa/index.html 业务基础平台是业务逻辑和基础架构平台之间的 ...
- 使用webpack4搭建一个基于Vue的组件库
组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- django入门教程(下)
在两篇文章帮你入门Django(上)一文中,我们已经做了一个简单的小网站,实现了保存用户数据到数据库,以及从后台数据库读取数据显示到网页上这两个功能. 看上去没有什么问题了,不过我们可以让它变得更加完 ...
- bzoj 3527: [Zjoi2014]力 快速傅里叶变换
题意: 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi,求Ei. fft的那一堆东西还是背不到啊...这次写虽说完全自己写的,但是还是在参见了以前fft程序的情况下调了很久,主要在如下几点 ...
- 《转》SQL Server 2008 数据维护实务
SQL Server 2008 数据维护实务 http://blog.csdn.net/os005/article/details/7739553 http://www.cnblogs.com/xun ...
- CF_225B _Well-known Numbers
Numbers k-bonacci (k is integer, k > 1) are a generalization of Fibonacci numbers and are determi ...
- 简析LIVE555中的延时队列
http://www.cnblogs.com/nightwatcher/archive/2011/04/10/2011158.html 最近在看LIVE555的源码,感觉其中的延时队列写的不错,于是就 ...
- android ListView异步加载图片(双缓存)
首先声明,参考博客地址:http://www.iteye.com/topic/685986 对于ListView,相信很多人都很熟悉,因为确实太常见了,所以,做的用户体验更好,就成了我们的追求... ...
- Yii modules中layout文件的调用
在YII中,如果我们使用了modules区分了前后台,那么在不同的modules中需要使用各自的layout文件,在使用中发现经常会调用不到modules中的layout,下面介绍一下如何才能正确的调 ...
- PHP curl传输文件的版本兼容性
/** * 存储文件到远程服务器 * * @param string $filePath * 文件绝对路径 * @param string $fileSaveUrl * 存储的远程目标地址 * @pa ...
- 转载:MyEclipse中防止代码格式化时出现换行的情况的设置
转载出处:http://www.cnblogs.com/yjhrem/articles/2310013.html 编辑完成代码,用MyEclipse的代码格式化后,本来不长的代码也被自动转成了多行. ...
- IIS支持net.tcp
绑定 高级设置 http和net.tcp用逗号分隔 //擦擦擦,见鬼了,下面的是tcp.net导致我找了好久,都找不出这个错误 //一定要注意,不要写错了. 否则会收到提示:找不到具有绑定 NetT ...