前言
近期發(fā)現(xiàn)微博的發(fā)現(xiàn)頁有這樣一個功能眶拉，頁面整體可以下拉刷新罗晕，當(dāng)中間的標簽上滑到頂部導(dǎo)航欄位置后济欢，標簽欄固定不動，下方列表頁可以下拉刷新小渊，上拉加載法褥，導(dǎo)航欄左邊出現(xiàn)返回按鈕，當(dāng)點擊返回按鈕后酬屉，頁面回到初始位置半等。
于是我用我寫的一個庫GKPageScrollView實現(xiàn)了相應(yīng)的效果，先來看下效果圖：
仿微博發(fā)現(xiàn)頁
實現(xiàn)
1呐萨、首先創(chuàng)建GKPageScrollView
- (GKPageScrollView *)pageScrollView {
if (!_pageScrollView) {
_pageScrollView = [[GKPageScrollView alloc] initWithDelegate:self]; // 創(chuàng)建并設(shè)置代理
_pageScrollView.ceilPointHeight = GK_STATUSBAR_HEIGHT; // 設(shè)置臨界點高度
_pageScrollView.isAllowListRefresh = YES; // 允許列表刷新
_pageScrollView.isDisableMainScrollInCeil = YES; // 禁止mainScrollView在到達臨界點后繼續(xù)滑動
}
return _pageScrollView;
}
2杀饵、實現(xiàn)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 { // 到達臨界點狀態(tài)谬擦，滑動到原點
[self.pageScrollView scrollToOriginalPoint];
self.backBtn.hidden = YES;
self.topView.alpha = 0;
}
}
4切距、右滑返回原點（要實現(xiàn)此功能可自己添加滑動手勢或集成GKNavigationBarViewController）
這里以GKNavigationBarViewController為例：
// 滑動到臨界點時，設(shè)置代理
if (!isMainCanScroll) {
self.backBtn.hidden = NO;
self.gk_popDelegate = self;
}else {
self.backBtn.hidden = YES;
self.gk_popDelegate = nil;
}
// 實現(xiàn)代理方法
#pragma mark - GKViewControllerPopDelegate
// 右滑手勢結(jié)束后會調(diào)用此方法
- (void)viewControllerPopScrollEnded {
[self backAction];
}
通過上面的步驟惨远，就能實現(xiàn)微博發(fā)現(xiàn)頁的效果了谜悟，當(dāng)然還有一些其他細節(jié)處理，具體看demo北秽。
最后
上面所說的demo都在GKPageScrollView中葡幸，需要的可以下載查看。
另外推薦下我的圖片瀏覽器GKPhotoBrowser
