近期公司的项目全然仿了蘑菇街client的框架,自己从网上找了一下,没有发现源代码。问遍各大QQ群也没有结果。上周五晚上一直在思考这个框架怎样搭建,周六早上有了灵感。写了一半。今天接着完好了一下。
在这里和大家分享一下。
我先把效果让大家看一下。然后结合效果说一下自己的实现思路吧。
效果图:
首先呢。最上面的小猫图片,这个将来能够是一张图片或者是一个轮播都能够的,这里临时称作headerView。在ViewController 中设置一个最底端的mainTableView。让mainTableView的tableViewHeaderView指向headerView。接下来再看红色部分。这个部分是一个滚动栏上面有一些类目能够供用户选择,这里就暂且用一个UIView的实例segmentBack实现一下。
大家依据动画效果能够发现segmentBack事实上是mainTableView的sectionHeaderview所以,我们能够通过例如以下代码实现:
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section{
UIView *segmentBack =[[UIView alloc] initWithFrame:CGRectMake(0, 0, kDeviceWidth, 40)];
segmentBack.backgroundColor =[UIColor redColor];
return segmentBack;
}
我们接着再往以下看左右滑动首先我们让mainTableView的单元格数量为1。section数量为1。然后在第一个单元格上加入containScroll实现左右滑动。
为了切换几个smallTableview这里为了把代码模块化,每一个切换的页面用VC.view来实现。
然后在为其加入tableView作为子视图。并将VC.view加入到containScroll上。这样子思路差点儿相同了。能够了么。哈哈,当然不能够,由于我们还没有考虑到手势的冲突呢。
我们发现上下滑动的话。最底层的mainTableView的须要识别上下滑动的手势,还有就是VC.view上的smallTableview的也须要识别上下滑动的手势。
怎么办呢,我们都知道UITableView继承自UIScrollView, 在这里就能够使用UIScrollviewDelegate的-(void)scrollViewDidScroll:(UIScrollView *)scrollView 这种方法,用来对当前的smallTableview的偏移量进行推断,假设偏移量达到某个点。当前smallTableview不能够滑动,相同的道理。对于mainTableView我们也使用这个代理方法来对mainTableView的偏移量进行推断。这样子就攻克了手势的冲突了。
smallTableview的关键代码例如以下:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
[delegate judgeScrollViewWhenScroll:scrollView];
}
-(void)judgeScrollViewWhenScroll:(UIScrollView *)scrollView{
if (scrollView.contentOffset.y==0) {
mainTableView.scrollEnabled =YES;
scrollView.scrollEnabled =NO;
NSLog(@"scroll conentOffsetY %f",scrollView.contentOffset.y);
}
}
mainTableView的关键代码例如以下:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (mainTableView.contentOffset.y==140) {//这个140是有headerview和section的headerView的高度之和来决定,大家到时候能够改动
targetVC.mainTableView.scrollEnabled =YES;
mainTableView.scrollEnabled =NO;
NSLog(@"TableView conentOffsetY %f",mainTableView.contentOffset.y);
}
}
demo下载地址:蘑菇街框架
大家哪位朋友假设积分不够的话,能够在博客下留言写下邮箱。我发给大家,私信我也能够哦^_^。
不好意思。前一段时间分享的demo有点小bug。我修复了以后本来打算把原来的那个给删掉的,发现删不了了。好苦恼。我把最新的demo分享给大家,大家能够比較下哦。
修复后的demo下载地址:demo