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

效果描述：

在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滑动到顶部，悬浮不动

最后编辑于：2019.12.27 15:02:21