美文网首页
记录一个View吸顶效果的实现思路

记录一个View吸顶效果的实现思路

作者: Eugene_iOS | 来源:发表于2019-12-27 14:49 被阅读0次

    效果描述:

    在UITableView滑动时,UITableView上某个位置的View向上滑动到视图顶部然后吸顶;下滑到某个位置,该吸顶view跟随UITableView的contenView变化而变化。 吸顶效果图

    思路描述:

    1、定义个吸顶View,将该View和UITableView具有相同的父视图(self.view),但注意要将吸顶View放到TableView上层。
    2、确定吸顶View所在的cell
    3、根据吸顶View所在的cell的偏移量,来实现吸顶效果


    关键步骤:

    第一步:UI布局

    // 定义个吸顶DropMenuView
    [self.view insertSubview:self.dropMenuView aboveSubview:self.tableView];
    

    第二步: 获取悬浮视图所在cell的frame

    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
        // 当然这里的条件也可以根据明确的indexPath来判断。另外,如果吸顶View的位置你确定在某个indexPath处,可以直接在scrollViewDidScroll:获取偏移量,进行吸顶效果处理,这一步可以略过。
        if ([cell isKindOfClass:[xxCell class]]) {
            // 获取悬浮视图所在cell的frame 
            CGRect frame = [tableView rectForRowAtIndexPath:indexPath];
            // 获取悬浮视图在TabelView上的Y坐标
            CGFloat menuTop = CGRectGetMaxY(frame) - CGRectGetHeight(self.menu.frame);
            // 避免在滑动中频繁改变menuView的Y值,造成menuView视图闪屏
            if (self.dropMenuViewTop != menuTop) {
                // 全局变量保存吸顶View的Y坐标
                self.dropMenuViewTop = menuTop;
    
                CGRect menuViewFrame = self.dropMenuView.frame;
                menuViewFrame.origin.y = self.dropMenuViewTop + CGRectGetMinY(tableView.frame);
                self.dropMenuView.frame = menuViewFrame;
            }
        }
    }
    

    第三步:根据TableView的偏移量,来实现吸顶效果

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
        // 获取悬浮视图在self.view上的Y
        CGFloat menuViewOffsetY = self.dropMenuViewTop;
        // 获得tableView偏移量
        CGFloat offsetY = self.tableView.contentOffset.y;
        // 更新悬浮视图Y
        CGRect stickFrame = self.menu.frame;
        if (offsetY >= menuViewOffsetY) {
            // 悬浮视图固定顶部
            stickFrame.origin.y = 64;
            self.menu.frame = stickFrame;
        } else {
            // 悬浮视图的frame随tableView变化
            stickFrame.origin.y = CGRectGetMinY(self.tableView.frame) + menuViewOffsetY - offsetY;
            self.menu.frame = stickFrame;
        }
    }
    

    写在最后:

    1、了解TabelView各个代理的调用很重要,这篇文章写的很明了
    2、参考文章:UICollectionViewCell滑动到顶部,悬浮不动

    相关文章

      网友评论

          本文标题:记录一个View吸顶效果的实现思路

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