iOS用GKPageScrollView實現微博發現頁滑動效果

前言

近期發現微博的發現頁有這樣一個功能，頁面總體能夠下拉刷新，當中間的標籤上滑到頂部導航欄位置後，標籤欄固定不動，下方列表頁能夠下拉刷新，上拉加載，導航欄左邊出現返回按鈕，當點擊返回按鈕後，頁面回到初始位置。

因而我用我寫的一個庫GKPageScrollView實現了相應的效果，先來看下效果圖：

實現

一、首先建立GKPageScrollView

- (GKPageScrollView *)pageScrollView {
    if (!_pageScrollView) {
        _pageScrollView = [[GKPageScrollView alloc] initWithDelegate:self]; // 建立並設置代理
        _pageScrollView.ceilPointHeight = GK_STATUSBAR_HEIGHT;  // 設置臨界點高度
        _pageScrollView.isAllowListRefresh = YES;  // 容許列表刷新
        _pageScrollView.isDisableMainScrollInCeil = YES;  // 禁止mainScrollView在到達臨界點後繼續滑動
    }
    return _pageScrollView;
}
複製代碼

二、實現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;
}
複製代碼

三、返回按鈕點擊處理

- (void)backAction {
    if (self.isMainCanScroll) { 
        [self.navigationController popViewControllerAnimated:YES];
    }else { // 到達臨界點狀態，滑動到原點
        [self.pageScrollView scrollToOriginalPoint];
        self.backBtn.hidden = YES;
        self.topView.alpha = 0;
    }
}
複製代碼

四、右滑返回原點（要實現此功能可本身添加滑動手勢或集成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