近期公司的项目全然仿了蘑菇街client的框架,自己从网上找了一下,没有发现源代码。问遍各大QQ群也没有结果。上周五晚上一直在思考这个框架怎样搭建,周六早上有了灵感。写了一半。今天接着完好了一下。

在这里和大家分享一下。

我先把效果让大家看一下。然后结合效果说一下自己的实现思路吧。

效果图:

ios 组件化 蘑菇街 苹果蘑菇街怎么样小窗_ios 组件化 蘑菇街


首先呢。最上面的小猫图片,这个将来能够是一张图片或者是一个轮播都能够的,这里临时称作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