效果描述:
在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滑动到顶部,悬浮不动
网友评论