前言
最近做一个电商类项目，产品要求实现一个类似美团点餐的分类列表，主要需求为：
- 左边点击某个大分类，视图动态展开显示子分类，缩起已展开的大分类。
- 左边点击某个小分类，右边自动滑到该分类详细数据。
- 右边滑动列表时，左边根据右边滑动的商品信息自动展开或收起
要实现上述功能，需要两个UITableview,左边tableview负责展开和收起以及通知右边滑动，右边tableview负责滑动并通知左边应该展开哪一组。
先上最终效果图 <br />
blank.png
左侧TableView结构如下
HDLeftTableSectionHeaderView |
|---|
HDLeftTableViewCell |
HDLeftTableViewCell |
HDLeftTableSectionHeaderView |
HDLeftTableViewCell |
HDLeftTableViewCell |
- 上图（表）一共有2个Section,每个Section有一个HeaderView两个Cell，展开收起Section分两种情况
1.*SectionHeaderView的点击事件需要展开当前Section，并关闭其余Section，同时右边触发自动滑动；
2.* 滑动右边时需要展开对应Section,并关闭其余Section，右边不会触发自动滑动；
因此SectionHeaderView需要两个BOOL值来判断当前Section的展开状态:isExpended以及是否为用户点击操作isUserTapped
关键代码：
//HeaderView将状态代理出来交给LeftViewModel实现展开、收起功能
-(void)classifyListHeaderView:(HDLeftTableHeaderView *)classifyHeaderView isExpended:(BOOL)isExpended isUserTapped:(BOOL)isUserTapped;
//展开
[self.tableView insertRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationAutomatic];
//收起
[self.tableView deleteRowsAtIndexPaths:indexArray withRowAnimation:UITableViewRowAnimationAutomatic];
//将滚动功能代理出去交由RightViewModel实现
if ([self.delegate respondsToSelector:@selector(classifyLeftTableViewModel:didSelectedAtIndexPath:)]) {
[self.delegate classifyLeftTableViewModel:self didSelectedAtIndexPath:self.selectedIndexPath];
}
- 右侧
TableView结构如下
HDRightTableViewSectionCells |
|---|
HDRightTableViewSectionCells |
HDRightTableViewSectionCells |
HDRightTableViewSectionCells |
- 右侧共有4个Section每个Section拥有自己的Cells,在左侧Cell的
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath方法里滑动右边TableView
//滑动到选中Section的第一个Cell
[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:self.currentSelectedSection] atScrollPosition:UITableViewScrollPositionTop animated:YES];
- 同左侧
SectionHeaderView一样，右边的UITableview同样需要BOOL值来区分滑动请求是否是用户发起的，还是左边ViewModel请求的isRequestedFromLeft
当右侧滑动时，可以利用UITableview的self.tableView.indexPathsForVisibleRows.firstObject.section来判断当前展示的Section
关键代码：
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
if (self.currentSelectedSection != self.tableView.indexPathsForVisibleRows.firstObject.section) {
NSInteger row = self.tableView.indexPathsForVisibleRows.firstObject.row;
NSInteger section = self.tableView.indexPathsForVisibleRows.firstObject.section;
self.currentSelectedSection = section;
if (self.isRequestedFromLeft == NO) {
if ([self.delegate respondsToSelector:@selector(rightViewModel:didScrollToIndexPath:)]) {
[self.delegate rightViewModel:self didScrollToIndexPath:[NSIndexPath indexPathForRow:row inSection:section]];
}
}
}
}
最后只需要循环数据源将左右两边的IndexPath对应好就可以完成想要的功能了。
使用方法
本工程已上传至Cocoapods共有仓库，使用时编辑Podfile并添加：
pod "HDClassifyTable"<br />
来个总结
之前用了特别多的开源项目，充分享受到了开源带来的便利，这次终于可以为开源社区做出点自己的贡献了，第一次写文章，还请各位大师斧正。
最后，感谢HandyFrame的作者Casa Taloyum,本工程页面的主要布局都通过HandyFrame实现，特别的好用,在此强烈推荐。另外这个工程也离不开他的帮助与指导,他的个人主页http://casatwy.com/
网友评论