美文网首页小知识点iOS 控件封装iOS头条干货
IOS 仿饿了么点餐页面效果—因时间原因界面不好看 但滑动效果已

IOS 仿饿了么点餐页面效果—因时间原因界面不好看 但滑动效果已

作者: 浪哇 | 来源:发表于2017-07-13 15:48 被阅读544次

    最近一个项目涉及到类似于饿了么的点餐页面,百度好久没找到合适的Demo 只好动手写一个。现在上代码,感兴趣的伙伴可以看一下,如出现BUG或有更好的建议欢迎提给我:1614056471

    1.先说下点餐页的难点:理清“主tableview”什么时候不能往上滑 什么时候不能往下滑  主tableview cell里面嵌套的tableView什么时候不能往下滑 什么时候不能往上滑 只要将上滑、下滑的限制条件理清,整个点餐功能就不难做了

    2.先看一下demo的整体结构:整个点餐功能分成了三个控制器(为了方便管理tableView代理)“点菜”的相关功能实现全部放到了“点餐控制器”,“商家”的相关功能实现全部放到了“商家控制器”  “主控制器”对另外两个字控制器进行管理。

    3.主控制器(ELeMeOrderPageViewMainController)里面的关键代码:/**

    UIScrollViewDelegate

    */

    - (void)scrollViewDidScroll:(UIScrollView*)scrollView {

    if([scrollViewisEqual:self.mainTableView]) {

    //

    //NSLog(@"%lf, %lf", scrollView.contentOffset.y, scrollView.contentSize.height-scrollView.bounds.size.height);

    if(scrollView.contentOffset.y>= (scrollView.contentSize.height-scrollView.bounds.size.height-0.5)) {//mainTableView滚动不能超过最大值

    self.offsetType=OffsetTypeMax;

    scrollView.contentOffset=CGPointMake(scrollView.contentOffset.x, scrollView.contentSize.height-scrollView.bounds.size.height);//(scrollView.contentSize.height-scrollView.bounds.size.height):mainTableView可以滚动的最大偏移距离超过等于最大偏移距离不可以再向上滑动

    _mainTableViewOldOffSet= scrollView.contentSize.height-scrollView.bounds.size.height;

    }elseif(scrollView.contentOffset.y<=0) {

    self.offsetType=OffsetTypeMin;

    }else{

    self.offsetType=OffsetTypeCenter;

    }

    if((self.levelListView.selectedIndex==0&&self.subLeftVC.offsetType!=OffsetTypeMin)&&(self.subLeftVC.rightTVScrollDown||(scrollView.contentOffset.y-_mainTableViewOldOffSet<0))) {//self.subLeftVC.offsetType != OffsetTypeMin时_mainTableView不能向下滑动(注释:当点菜页面显示并且商品列表tableView未达到最大偏移量之前,mainTableView不能向下滑动)

    scrollView.contentOffset=CGPointMake(scrollView.contentOffset.x,_mainTableViewOldOffSet);

    }

    if(self.levelListView.selectedIndex==1&&self.subRightVC.offsetType!=OffsetTypeMin) {//当商家页面显示时,商家信息tableview偏移量不是最小状态说明mainTableView已经滚动到了最大值在商家信息tableview偏移量未达到最小偏移量之前mainTableView需要保持原来的偏移量不变

    scrollView.contentOffset=CGPointMake(scrollView.contentOffset.x,_mainTableViewOldOffSet);

    }

    _mainTableViewOldOffSet= scrollView.contentOffset.y;

    }

    if([scrollViewisEqual:self.subScrollView]) {

    [self.levelListViewchangeLineViewOffsetX:self.subScrollView.contentOffset.x];

    }

    }

    4.点餐控制器(ELeMeOrderPageLeftViewController)关键代码:

    #pragma mark --- UIScrollViewDelegate ---

    - (void)scrollViewDidScroll:(UIScrollView*)scrollView {

    ELeMeOrderPageViewMainController*vc = (ELeMeOrderPageViewMainController*)[selfparentViewController];//父控制器

    NSLog(@"aaaaaaaaaaaaaa=====%f",scrollView.contentOffset.y);

    if(scrollView==self.rightTableView&&!_didSelectLeftTVCell) {

    if(scrollView.contentOffset.y<=0) {//rightTableView不能小于最小值(不能下滑的条件)

    self.offsetType=OffsetTypeMin;

    scrollView.contentOffset=CGPointZero;

    }else{

    self.offsetType=OffsetTypeCenter;

    }

    //联动逻辑:rightTableViews顶部section头消失出现实现leftTableView选择联动

    if(scrollView.contentOffset.y>_oldRightOffsetY) {

    _rightTVScrollUp=YES;

    _rightTVScrollDown=!_rightTVScrollUp;

    }elseif(scrollView.contentOffset.y<_oldRightOffsetY)

    {

    _rightTVScrollUp=NO;

    _rightTVScrollDown=!_rightTVScrollUp;

    }

    if(vc.offsetType!=OffsetTypeMax&&_rightTVScrollUp) {//vc.offsetType!= OffsetTypeMax时rightTableView不能向上滑动(不能上滑的条件)

    scrollView.contentOffset=CGPointMake(0,_oldRightOffsetY);

    }

    if(vc.offsetType==OffsetTypeMax) {

    }

    NSLog(@"ccccccccccc=====%f",scrollView.contentOffset.y);

    _oldRightOffsetY=floorf(scrollView.contentOffset.y);

    }

    }

    5.商家控制器里的关键代码与上面类似,不再累述,实现滑动效果还有一个重要的点:当滑动作用到商品列表tableView或商家信息tableview上时,主控控制器主tableview也必须能响应滑动,因此继承商品列表tableView 与商家信息tableview 都继承了LWGesturePenetrationTableView,LWGesturePenetrationTableView:里实现的方法#pragma mark --- other ---

    - (BOOL)gestureRecognizer:(UIGestureRecognizer*)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(nonnullUIGestureRecognizer*)otherGestureRecognizer

    {

    returnYES;

    }

    6.这是我目前想到的实现方法,要是有更好的实现欢迎分享,具体实现下载demo吧,纯原创 希望在git上给颗星。

    demo下载地址

    相关文章

      网友评论

      • yqc5521:想跟作者探讨一下,如果要实现选择面板下拉滑到底部如何实现?就是现在饿了么的那种效果
      • Torin76:非常棒,非常6
      • Super丶Hyman:我以前项目也仿照过美团的这种页面,但是当时虽然做好了 但是感觉没人家做的那样顺滑,现在打算重新做饿了么的这个页面,思路跟你差不多!!!

      本文标题:IOS 仿饿了么点餐页面效果—因时间原因界面不好看 但滑动效果已

      本文链接:https://www.haomeiwen.com/subject/idnwhxtx.html