先上效果图：
代码地址：https://github.com/huisaziru/BossHireDemo
最近正在找工作，然后用Boss直聘这个软件试了下，发现招聘详情页面上拉挺有意思的，很容易被迷惑；上拉时，拉到底再往上拉时能看到首页的view，而且滚动条好像是在下面那个view上；
一开始以为上面那个只是一个tableview添加在首页的那个view上，后面发现下面那个tabbarcontroller缩小了，并且返回的时候，和dissmiss一样，基本确定是首页present出来这个详情页；
分析上拉返回实现
详情页有一个tableview，tableview需要加在scrollview上，scrollview是横向滚动，用来获取其他招聘详情；
要实现这个效果，以下条件可以满足：
- scrollview在拖动的时候是透明，不拖动时为不透明，因为需要横向滚动
- tableview什么时候都透明，拉到底再往上拉的时候，如果不透明，就会出现tableview的背景色，就挡住了下面；
- menuview是和tableview同一级，一开始是不透明的，需要一个containerview包含它们，然后containerview加在scrollview上；因为tableview动的时候menuview不动，拉到底再往上拉时候才跟着动；所以menuview不在tableview上；
看上去这些就能实现这个功能，但是有个细节很重要，就是滚动条滚到menuview下面的时候，只有滚动条透过menuview
当时看到这个效果的时候有点懵，为什么只有滚动条可以透过menuview；按理讲要透明的话，应该全部都会透过去，看得到下面；这个是最难的地方；
后面想到了局部透明，随着往上拉，menuview慢慢的从上往下透明，刚好让进来的滚动条透出来，但是有个问题：透明出来的部分还是会把下面的东西透出来，不单单只透明滚动条；
这时我想到找一个背景view放在menuview局部透明位置的底下，让上面的透明区域被下面挡住；这里注意不能是menuview大小，要不然挡住了下面，但是这时会将滚动条挡住，真是纠结；
现在的问题是：底下的那个背景view怎么不挡住滚动条？
分析：滚动条是在tableview 上面的，所以可以从tableview入手，将背景view加到tableview底部：contentsize底部下面－－因为只有拉到底这个背景view才能出来；
验证一下：当拉倒底，再往上拉时，menuview慢慢透出上面，这时候背景view慢慢出来，刚好挡住透明部分，这时滚动条被menuview可以透过；到这里基本宣告成功！
menuview透出来
还有一个点没说：就是menuview怎么慢慢透出来，我想的办法是，menuview底下有一个白色不透明的maskview，上面就是放按钮的containerView，这个view的背景颜色带透明；
- 初始状态：上面透明部分被下面maskview挡住
- 拉到底往上拉时：maskview的y慢慢变大，高变成maskview.height - y,这样就能将上面的containerView慢慢透出来
- 当maskview的y等于maskview.height时，等于全透了，这时tableview的背景view刚好全出来了，完全挡住menu view；
我发现Boss直聘有一个bug，正是这个bug论证了我的猜想；当拉到底时，再往上拉一段距离，这时快速拉下来，神奇的现象就发生了：menuview已经不在底下了，最重要的是，它上部分是透明的，可以透过看到tableview的字；这个bug很好解决，就是突然下来导致的，没有过渡，只需在当前offset没有到底的时，将menuview的坐标复原就可以；
到这里终于是搞定了！！！
以下是上面主要的实现代码
背景view：这里要注意的是，因为boss直聘的详情页支持scrollview切换，这里只用一个tableview，当数据变化时，contentsize就会变，这时候需要更新背景view的frame，这里用kvo检测tableview的content size就可以实现这个；
//tableFooterBackGroundView作用：当tableview拉到底，再往上拉时，menuview 慢慢透出来的部分，如果底下没有view，会看到下面，所以添加此view，位置在tableview底部下面
self.tableFooterBackGroundView = [[UIView alloc] initWithFrame:CGRectMake(0, self.tableView.contentSize.height, frame.size.width, MenuHeight)];
self.tableFooterBackGroundView.backgroundColor = [UIColor whiteColor];
[self.tableView addSubview:self.tableFooterBackGroundView];
// 对tableView的contentSize 进行kvo,因为每次请求的数据不一样，conentSize不一样,更新tableFootBackGroundView的top
[self.tableView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
menuview:
/** 菜单view，和tableview同一级*/
- (UIView *)createMenuView:(CGRect)frame {
UIView *containerView = [[UIView alloc] initWithFrame:frame];
//遮罩view的作用：tableview上升时，遮罩view慢慢变小，让menuview透出来 tableFooterBackGroundView慢慢出来，刚好挡住了透明的部分，滚动条在tableview之上，所以可以透过menuview
self.contentMenuMaskView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
self.contentMenuMaskView.backgroundColor = [UIColor whiteColor];
[containerView addSubview:self.contentMenuMaskView];
UIView *menuView = [[[NSBundle mainBundle] loadNibNamed:@"MenuView" owner:self options:nil] firstObject];
menuView.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
menuView.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.8];
[containerView addSubview:menuView];
return containerView;
}
滚动处理：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (scrollView.contentSize.height > 0 && scrollView.tag == 0) {//拉到底
if (scrollView.contentOffset.y + scrollView.height > scrollView.contentSize.height) {
self.scrollView.backgroundColor = [UIColor clearColor];
CGFloat dy = scrollView.contentOffset.y + scrollView.height - scrollView.contentSize.height;
self.contentMenuView.y = self.view.height - self.contentMenuView.height - dy;
if (dy <= self.contentMenuView.height) {
self.contentMenuMaskView.y = dy;
self.contentMenuMaskView.height = self.contentMenuView.height - dy;
} else {
//防止menuview上升一部分后突然往上拉，上升高度大于menuview的高度，height还没变成0，所以需要设成0；
if (self.contentMenuMaskView.height != 0) {
self.contentMenuMaskView.height = 0;
}
}
} else {
self.scrollView.backgroundColor = [UIColor groupTableViewBackgroundColor];
//这个是boss直聘的bug
//防止从底下往上拉时，突然一下下来，因为没有过渡，所以contentMenuView的坐标还在上面，所以需要重置下
CGFloat originContentMenuY = self.view.height - self.contentMenuView.height;
if (self.contentMenuView.y != originContentMenuY) {
self.contentMenuView.y = originContentMenuY;
self.contentMenuMaskView.y = 0;
self.contentMenuMaskView.height = self.contentMenuView.height;
}
}
}
}
这个demo还有一些比如
-
UIViewControllerAnimatedTransitioning的用法,用来定制转场效果，实现demo中缩小tabbarcontroller的效果； - 还有一些keyframe动画，组合动画的应用;
- 还有scrollview的用法，只用一个tableview进行切换；
以上这些就不在这里讲了，可以直接看代码，注释很详细；
如果觉得写的还可以，帮忙star一下，谢谢～
