前言
近期发现微博的发现页有这样一个功能，页面整体可以下拉刷新，当中间的标签上滑到顶部导航栏位置后，标签栏固定不动，下方列表页可以下拉刷新，上拉加载，导航栏左边出现返回按钮，当点击返回按钮后，页面回到初始位置。
于是我用我写的一个库GKPageScrollView实现了相应的效果，先来看下效果图：
仿微博发现页
实现
1、首先创建GKPageScrollView
- (GKPageScrollView *)pageScrollView {
if (!_pageScrollView) {
_pageScrollView = [[GKPageScrollView alloc] initWithDelegate:self]; // 创建并设置代理
_pageScrollView.ceilPointHeight = GK_STATUSBAR_HEIGHT; // 设置临界点高度
_pageScrollView.isAllowListRefresh = YES; // 允许列表刷新
_pageScrollView.isDisableMainScrollInCeil = YES; // 禁止mainScrollView在到达临界点后继续滑动
}
return _pageScrollView;
}
2、实现GKPageScrollView的代理
#pragma mark - GKPageScrollViewDelegate
- (UIView *)headerViewInPageScrollView:(GKPageScrollView *)pageScrollView {
return self.headerView;
}
- (UIView *)pageViewInPageScrollView:(GKPageScrollView *)pageScrollView {
return self.pageView;
}
- (NSArray<id<GKPageListViewDelegate>> *)listViewsInPageScrollView:(GKPageScrollView *)pageScrollView {
return self.childVCs;
}
- (void)mainTableViewDidScroll:(UIScrollView *)scrollView isMainCanScroll:(BOOL)isMainCanScroll {
self.isMainCanScroll = isMainCanScroll;
if (!isMainCanScroll) {
self.gk_navLeftBarButtonItem = self.backItem; // 到达临界点后显示返回按钮
self.gk_popDelegate = self;
}else {
self.gk_navLeftBarButtonItem = nil;
self.gk_popDelegate = nil;
}
// topView透明度渐变
// contentOffsetY GK_STATUSBAR_HEIGHT-64 topView的alpha 0-1
CGFloat offsetY = scrollView.contentOffset.y;
CGFloat alpha = 0;
if (offsetY <= GK_STATUSBAR_HEIGHT) { // alpha: 0
alpha = 0;
}else if (offsetY >= 64) { // alpha: 1
alpha = 1;
}else { // alpha: 0-1
alpha = (offsetY - GK_STATUSBAR_HEIGHT) / (64 - GK_STATUSBAR_HEIGHT);
}
self.topView.alpha = alpha;
}
3、返回按钮点击处理
- (void)backAction {
if (self.isMainCanScroll) {
[self.navigationController popViewControllerAnimated:YES];
}else { // 到达临界点状态，滑动到原点
[self.pageScrollView scrollToOriginalPoint];
self.backBtn.hidden = YES;
self.topView.alpha = 0;
}
}
4、右滑返回原点（要实现此功能可自己添加滑动手势或集成GKNavigationBarViewController）
这里以GKNavigationBarViewController为例：
// 滑动到临界点时，设置代理
if (!isMainCanScroll) {
self.backBtn.hidden = NO;
self.gk_popDelegate = self;
}else {
self.backBtn.hidden = YES;
self.gk_popDelegate = nil;
}
// 实现代理方法
#pragma mark - GKViewControllerPopDelegate
// 右滑手势结束后会调用此方法
- (void)viewControllerPopScrollEnded {
[self backAction];
}
通过上面的步骤，就能实现微博发现页的效果了，当然还有一些其他细节处理，具体看demo。
最后
上面所说的demo都在GKPageScrollView中，需要的可以下载查看。
另外推荐下我的图片浏览器GKPhotoBrowser
