卡布奇诺.jpg
前言
目前工作中正在维护的有三个项目、项目中充斥着大量的静态的界面。由于项目并没有采用storyboard而是使用的xib文件，所以没有办法直接使用storyboard自带的静态cell拖拽实现功能。静态TableView界面存在着功能复杂、样式多样、权限删减等复杂多变的操作。基本上每一个cell都所属独立功能、直接实现需要做大量的if或者Switch判断。故写了一个简单的通用的处理框架，规范此类页面的书写方式。
APP中静态界面一般包含有：
"我"、"设置"、"个人信息"、"通用"、"权限"、"隐私"、"消息通知"等模块。例如：微信、支付宝中此类页面大约有20个不同类型但均属于静态的界面。故而、需要提供规范写法、将通用代码封装起来，保证开发效率与代码整洁性。
示例图
-
微信
微信部分示例图.png
-
支付宝
支付宝部分示例图.png
框架实现效果
CommonTable.gif
实现原理
- 封装UITableView的协议事件并剥离到单独类
ZWCommonTableDelegate - 封装通用数据模型、允许用户配置Section、Cell模板、拓展信息等。
- 允许用户自定义Cell、并提供协议方法。
- 允许用户自定义Cell数据模型、提供协议绑定对应自定义Cell.
- JSON式配置数据源、点击事件、Cell模板、快速实现页面。
核心代码解析
- 为UITableView绑定封装好的协议，并提供数据模型
-(ZWCommonTableDelegate *)tableAdapter{
if (!_tableAdapter) {
_tableAdapter = [[ZWCommonTableDelegate alloc] initWithTableData:^NSArray *{
return self.dataSourceArr;;
}];
}
return _tableAdapter;
}
self.mTable.delegate = self.tableAdapter;
self.mTable.dataSource = self.tableAdapter;
- JSON方式配置Model
-(void)setData{
WeChatInfoModel *infoModel = [[WeChatInfoModel alloc] init];
infoModel.headerImage = @"WechatIMG2";
infoModel.name = @"wang_ziwu";
infoModel.weChatName = @"KingWeChat";
ZWStaticSwitchModel *msgValidModel = [[ZWStaticSwitchModel alloc] init];
msgValidModel.title = @"消息验证";
msgValidModel.actionSwitchName = @"actionSwitch:";
ZWStaticSwitchModel *recommendModel = [[ZWStaticSwitchModel alloc] init];
recommendModel.title = @"像我推荐通讯录朋友";
self.dataSourceArr = @[
@{
SectionHeaderHeight :headerHeight,
SectionFooterHeight :footerHeight,
SectionRows :@[
@{
IsHiddenAccessory :@(NO),
CellRowHeight :@"100",
CellExtraInfo :infoModel
}
]
},
@{
SectionHeaderHeight :headerHeight,
SectionFooterHeight :footerHeight,
SectionRows :@[
@{
CellTitle :@"微信事例一",
CellImageName :@"MoreMyAlbum_25x25_",
CellPushVcClassName :@"WeChatMineCtr",
IsHiddenAccessory :@(NO)
},
@{
CellTitle :@"微信事例二",
CellImageName :@"MoreMyFavorites_25x25_",
CellActionSelName :@"actionToExampCtr",
IsHiddenAccessory :@(NO)
}
]
},
@{
SectionHeaderHeight :headerHeight,
SectionFooterHeight :footerHeight,
SectionRows :@[
@{
CellTitle :@"字体大小",
CellDetailTitle :@"小号字体",
},
@{
CellTitle :@"缓存大小",
CellDetailTitle :@"1000KB",
CellActionSelName :@"actionClearCach",
IsHiddenAccessory :@(NO)
}
]
},
@{
SectionHeaderHeight :headerHeight,
SectionFooterTitle :@"开启后，为你推荐已经开通微信的手机联系人",
SectionFooterHeight :@"50",
SectionRows :@[
@{
CellExtraInfo :msgValidModel
},
@{
CellExtraInfo :recommendModel
}
]
},
@{
SectionHeaderHeight :headerHeight,
SectionRows :@[
@{
CellTitle :@"退出",
CellRowHeight :@"40",
CellClassName :@"ZWStaticButtonCell",
CellActionSelName :@"actionExitLogin"
}
]
},
];
self.dataSourceArr = [ZWCommonTableSection sectionsWithData:self.dataSourceArr];
}
-
通用Cell事件绑定机制
通用Cell事件绑定机制.png
- CellClassName用来绑定自定义Cell,不赋值则默认使用UITableViewCell。
- CellActionSelName用来绑定Cell点击事件。优先级最高，默认到主控制器中寻找相同方法名的事件并触发执行。
- CellPushVcClassName配置直接Push的Controller。适用于通用Cell点击直接Push的类型。
- SectionHeaderHeight、CellRowHeight、IsHiddenAccessory、CellImageName等基本配置宏都可以在通用数据模型中找到注释方法。
- 自定义Cell模型数据事件绑定机制
- 自定义ZWStaticOptionCell、ZWStaticOptionModel
- 使用宏定义方法
ZWConfigCellModel()绑定
custCellModel.png
默认封装Cell类型、满足大部分APP静态界面
-
系统默认UITableViewCell、可以直接JSON化赋值设置。
默认类型.png
-
开关按钮配置类型
开关按钮配置类型.png
-
普通按钮类型
按钮类型.png
- 单行文本输入框类型
-
多行文本输入框类型
单行/多行文本输入框.png
关于通用Cell数据全局化配置
//------------------------redmine-----------------------//
//配置cell基本默认值
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#define ZWCommonShareConfig [ZWCommonConfig sharedConfig]
@interface ZWCommonConfig : NSObject
+ (instancetype)sharedConfig;
/**
* cell 默认高度
*/
@property (nonatomic, assign) CGFloat commonCellHeight;
/**
* title 字体大小
*/
@property (nonatomic, assign) CGFloat titleFontSize;
/**
* detailTitle 字体大小
*/
@property (nonatomic, assign) CGFloat detailTitleFontSize;
/**
* textView 内边距
*/
@property (nonatomic, assign) UIEdgeInsets textContainerInset;
@end
通过单例类ZWCommonConfig可以全局化定制Cell的默认取值。
快速使用教程
- 创建自定义控制器继承
ZWCommonTableCtr - 重写父类方法、并绑定数据源即可。
//override
- (NSArray *)staticDataArray{
return @[];
}
如何快速导入框架
强烈建议您使用pod导入，节省导入依赖的时间。
- 使用cocoaPods导入(如果发现搜索不到,执行pod repo update --verbose命令更新本地spec缓存（可能需要几分钟），然后再搜索就可以了.)
pod 'ZWCommonTable', '~> 1.0.0'
- 直接将文件ZWCommonTable拖入工程中
#import "ZWCommonTable.h"
多输入框UITableView的延伸
框架初期是为了实现RichCell模式界面、后面项目中发现有大量的信息录入界面、于是对框架进行升级改造、目前实现多输入模式也非常方便。可以参考Demo中
多输入类型界面。接下来我会单独写一篇文章介绍如何快速完成"多输入模式"的界面。
源码
源码放在GitHub上，欢迎指正，记得star哦！
网友评论