效果圖
** 測試環(huán)境 : **Xcode8.1 iOS10.1
現(xiàn)在看到好多應(yīng)用都有類似上面滑動懸停的效果，我之前也寫過類似的慎宾，現(xiàn)在新項目又有這種效果，之前寫得也有點亂，所以就趁這次重寫的機會把寫這種效果的思路再重新整理一遍惧所。當然我只是為實現(xiàn)這種效果提供一種比較笨的思路，如果大家有更好更簡單的思路可以留言绪杏。
實現(xiàn)思路挺簡單下愈，但是寫起來挺麻煩的，先看層級圖：
UI層級圖.png
- 設(shè)置主內(nèi)容View（backView）
- 首先在控制器view上面添加一個scrollowView蕾久，它是用來左右滑動以顯示不現(xiàn)的內(nèi)容tableView
- 再在scrollowView上面添加多個（按自己需求）tableView势似，從左到右依次布局這些tableView，并設(shè)置每個tableView的tableHeadView（此處設(shè)置tableHeadView只是用來占位用僧著，沒有顯示的作用）（注意：所有tableView的headView的高度一定要相同）
// scrollView
UIScrollView* scrollView = [[UIScrollView alloc] init];
[self.view addSubview:scrollView];
scrollView.backgroundColor = [UIColor whiteColor];
self.scrollView = scrollView;
scrollView.pagingEnabled = YES;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.delegate = self;
scrollView.contentSize = CGSizeMake(kScreenWidth * 3, 0);
[scrollView makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
UIView* headView = [[UIView alloc] init];
headView.frame = CGRectMake(0, 0, 0, self.headViewHeight + TitleHeight);
self.tableViewHeadView = headView;
headView.backgroundColor = [UIColor greenColor];
CFContentTableView* table1 = [[CFContentTableView alloc] init];
table1.delegate = self;
self.table1 = table1;
table1.tableHeaderView = headView;
[scrollView addSubview:table1];
[table1 makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(scrollView);
make.width.equalTo(kScreenWidth);
make.top.equalTo(self.view);
make.bottom.equalTo(self.view);
}];
CFContentTableView* table2 = [[CFContentTableView alloc] init];
table2.delegate = self;
self.table2 = table2;
table2.tableHeaderView = headView;
[scrollView addSubview:table2];
[table2 makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(scrollView).offset(kScreenWidth);
make.width.equalTo(table1);
make.top.bottom.equalTo(table1);
}];
CFContentTableView* table3 = [[CFContentTableView alloc] init];
table3.delegate = self;
self.table3 = table3;
table3.tableHeaderView = headView;
[scrollView addSubview:table3];
[table3 makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(scrollView).offset(kScreenWidth*2);
make.width.equalTo(table1);
make.top.bottom.equalTo(table1);
}];
- 設(shè)置頭部View（headView）
- 創(chuàng)建需要懸停的headView（非tableHeadView）履因，headView包含懸停view，并把headView添加到控制器View上面盹愚，使其正好覆蓋在tableHeadView上栅迄。
- 監(jiān)聽tableView的滑動位置（contentOffset），并根據(jù)滑動位置去設(shè)置headView的frame皆怕，還要設(shè)置其它tableView的contentOffset毅舆，判斷如果tableView滑動將要使懸停View超出目標懸停位置時則固定住懸停view西篓。
- (void)setupHeadView
{
UIView* headBackView = [[UIView alloc] init];
headBackView.backgroundColor = [UIColor blueColor];
headBackView.frame = CGRectMake(0, 0, kScreenWidth, self.headViewHeight + TitleHeight);
[self.view addSubview:headBackView];
self.headBackView = headBackView;
CFTitleBar* titleBarView = [[CFTitleBar alloc] init];
[headBackView addSubview:titleBarView];
self.titleBarView = titleBarView;
titleBarView.backgroundColor = [UIColor whiteColor];
[titleBarView makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(headBackView);
make.bottom.equalTo(headBackView.mas_bottom);
make.height.equalTo(TitleHeight);
}];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView == self.scrollView || !scrollView.window)
{
return;
}
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat originY = 0;
CGFloat otherOffsetY = 0;
if (offsetY <= self.headViewHeight)
{
originY = -offsetY;
if (offsetY < 0)
{
otherOffsetY = 0;
}else{
otherOffsetY = offsetY;
}
}else{
originY = -self.headViewHeight;
otherOffsetY = self.headViewHeight;
}
self.headBackView.frame = CGRectMake(0, originY, kScreenWidth, self.headViewHeight+TitleHeight);
for ( int i = 0; i<self.titleBarView.titles.count; i++ )
{
if (i != self.titleBarView.selectedIndex)
{
UITableView* contentView = self.scrollView.subviews[i];
CGPoint offset = CGPointMake(0, otherOffsetY);
if ([contentView isKindOfClass:[UITableView class]])
{
if (contentView.contentOffset.y < self.headViewHeight || offset.y < self.headViewHeight)
{
[contentView setContentOffset:offset animated:NO];
}
}
}
}
}
以上就是整體的思路，看起來也不難但是?寫起來有些麻煩憋活，如果再加上實際應(yīng)用中的各種邏輯就會更亂一些岂津，而且對于界面跳轉(zhuǎn)會有很多問題，我也在陸續(xù)填坑悦即，如果大家在開發(fā)這種效果時遇到了坑歡迎留言一起探討吮成。
更新（2016年10月11日）
昨天看了簡書的個人頁面，感覺做得更好一些盐欺，關(guān)鍵是它的headView部分也可以接收滑動赁豆，而我之前做的由于headView擋住了tableView導致無法接受滑動。經(jīng)過昨天半天的各種嘗試目前的實現(xiàn)基本和簡書效果一致冗美，headView也可以滑動了魔种。
具體實現(xiàn)自己看代碼吧，雖然實現(xiàn)起來挺簡單的粉洼，但是尋找這種解決方法還是費了不少時間节预。
最后奉上demo地址
