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

2019-12-27  本文已影响0人  Eugene_iOS

效果描述:

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

上一篇 下一篇

猜你喜欢

热点阅读