一、方案背景
有这么一个需求，需要做一个展示信息详情页，内容可能会比较多，超过一屏，最终还需要生成一张完整的详情页截图（UIImage）， 如果我们直接基于UIScrollView（UITableView）去截屏，只会生成UIScrollView的frame的size大小的图片，不能生成contentSize大小的图片，所以，我们需要基于UIView去实施截图，有人可能会问，再UIView上再去放一个UIScrollView（UITableView），要知道截屏操作本身就是一个性耗比较大的操作，经测试验证，直接基于UIView去截屏性耗比最小。所以，需要采取UIScrollView+UIView去设计这个页面的层级。待内容页展示完成，可以直接对UIView去截屏。 内容详情页页一般设计信息较多、布局复杂、开发工作量大，所以模块化划分这个页面十分有必要。按照已有的模块化思想，创建一个ViewCtroller统一管理它要展示的子模块，管理包括统一数据刷新、统一布局等；
二、方案的设计与实现
截止这篇wiki开始，所有的代码都已经开发完成，并已经在公司的很多项目中实践，完整的组件代码地址如下：
https://github.com/lizitao000/MDViewModules.git
读者可以自己去下载并debug，下面我来简单介绍一下这个组件的原理与使用。
基类：MDBaseModuleViewController，在基类VC中有个contentBgView，在这个contentBgview中，我们批量将模块化的子view进行添加，如下：
- (NSArray *)loadContentViews
{
return @[@"MDDemoHeadModuleView",
@"MDDemoBottomModuleView",
@"MDDemoMiddleModuleView",
@"MDDemoHeadModuleView",
@"MDDemoMiddleModuleView",
];
}
既然要统一管理这些模块，就需要抽象出一层模块的基类，包含一些必须的公共操作，如下：
在这些公共操作中，有统一刷新布局（替代layoutsubviews）、有统一分发数据的操作，为了便于管理，还给每个模块统一标示了一个index。所以我们的模块基类MDBaseModuleView只需要实现这个protocol，并实现它的公共操作；为什么要统一封装这些操作？目的其实很简单，是因为layoutsubviews或者viewdidlayoutsubviews都会有一些不必要执行，大量的布局代码写到其中，是一种不明智的做法。
当然，有了基类的另一个好处，就是我们可以将一些模块反复使用的、重复的代码封装到基类中去，精简代码。
2、所有modules共享一份model数据
模块通过- (void)loadViewWithData:(id)model;方法将model带入每个模块，每个模块取自己需要的数据。如果模块需要“留存”一些value给下次操作来用，建议单独创建并赋值给property变量。
三、刷新布局的优化
当VC的model数据拿到时，所有的页面模块都会共享一份model，每个子模块从model中取自己需要的数据，计算自己的布局，如下：
- (void)loadAllSubviewsData
{
[self.contentBgView.subviews enumerateObjectsUsingBlock:^(__kindof UGCPBaseModuleView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
if ([obj conformsToProtocol:@protocol(UGCPBaseModuleDelegate)]) {
[obj configViewWithIndex:idx];
[obj loadViewWithData:self.model];
}
}];
[self bindAllSubViewsHeight];
}
- (void)layoutAllSubviews
{
__block CGFloat layoutOffestY = 0.0;
@weakify(self);
[self.contentBgView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
@strongify(self);
if ([obj conformsToProtocol:@protocol(UGCPBaseModuleDelegate)]) {
[obj layoutViewWithWidth:[self contentBgViewWidth]];
obj.top = layoutOffestY + [self spacingBetweenSubviews];
obj.left = [self leftSpacingOfSubviews];
layoutOffestY = floor(obj.bottom);
}
}];
self.contentBgView.frame = CGRectMake(0, 0, self.view.width, layoutOffestY);
}
我们在起始可以统一调用这两个方法，但是仅仅这样统一操作是不够的。如果某个模块中有异步数据（图片或者子接口请求等），需要再次刷新这个模块布局，也就是我们可以像tableview的reloadData一样，再次执行layoutAllSubviews方法，把整个页面的所有模块再次刷新一遍，此时模块复杂度为O(n)。事实上，每个模块的布局变化，并不总是需要刷新整个布局，如下：
页面的各个模块，固定的宽度、固定的x坐标、top依赖上个模块的bottom：
当其中一个模块（Module 1）的布局发生变化时（高度height增加或减少，bottom改变），如下：
我们只需要按需更新那些依赖module 1的模块（modile 1下面的modules）的布局即可，如下：
此时刷新模块布局的平均复杂度为O(n/2)。
具体实现时候，我们首先要给每个模块一个唯一的标示index（0、1、2、3），通过protocol方法初始化时带进每个模块：
- (void)configViewWithIndex:(NSUInteger)index;
其次，还需要给每个模块构造一个可以监控模块height变化的信号RACSignal（RACSubject包含发送信号操作），我们只需要在模块里面构造height变化的信号，
这个信号要发送到主VC类，通知VC类哪个模块（index）的高度发生了变化，从而“定向”按需刷新页面布局，模块绑定信号如下：
- (void)configViewWithIndex:(NSUInteger)index
{
self.index = index;
[[[[RACObserve(self, height) distinctUntilChanged] skip:1] deliverOnMainThread] subscribeNext:^(id x) {
[self.heightChangeSignal sendNext:[NSNumber numberWithInteger:index]];
}];
}
VC类负责
merge这些信号，并处理：
- (void)bindAllSubViewsHeight
{
__block RACSignal *signal = [RACSubject subject];
[self.contentView.subviews enumerateObjectsUsingBlock:^(__kindof MDBaseModuleView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
RACSubject *s = obj.heightChangeSignal;
if (idx == 0) {
signal = s;
} else {
signal = [signal merge:s];
}
}];
@weakify(self);
[[[signal distinctUntilChanged] skip:0] subscribeNext:^(id x) {
@strongify(self);
NSLog(@"---------->%@",x);
}];
}
拿到height变化的模块index之后，我们就可以轻松根据index布局这个页面了：
- (void)relayoutSubViewsWithIndex:(NSUInteger)index
{
__block CGFloat layoutOffestY = [self.contentBgView.subviews objectAtIndex:index].bottom;
[self.contentBgView.subviews enumerateObjectsUsingBlock:^(__kindof UIView * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
if (idx > index) {
obj.top = layoutOffestY + [self spacingBetweenSubviews];
layoutOffestY = floor(obj.bottom);
}
}];
self.contentBgView.frame = CGRectMake(0, 0, self.view.width, layoutOffestY);
}
四、支持Module后端动态可配
最新的代码支持模块化后台动态可配，只需要实现如下三个方法即可：
- (BOOL)isSupportDynamicConfigration
- (NSArray *)dynamicModules
- (NSDictionary *)allDynamicModules
如果你的页面模块有需要将各个模块进行动态管理（添加、删除、调整顺序等），这个将是个很好的选择。你可以从后端接口中获取模块的Identify序列，这个功能会根据此序列生成各个模块类。当然，所有的模块与identify的字典需要提前在App中注册好。
五、总结
总结一下，此组件具有以下特点：
1、统一化的模块化管理，继承基类，开发者无需投入太多时间在页面布局上，开发效率高；代码复用性高，代码比起传统开发较少；
2、大量的子view的布局代码无需写在layoutSubviews与viewdidlayoutSubviews中，提升页面布局效率；
3、按需“定向”刷新布局（平均复杂度O(n/2)）性能高于传统统一刷新效率平均复杂度（O(n)）；