前言
最近做項目遇到要實現(xiàn)如微博個人詳情頁的滑動效果，通過查找資料最終完成了GKPageScrollView纺弊，可實現(xiàn)如微博牛欢、抖音、網(wǎng)易云等個人詳情頁的滑動效果淆游。
該庫的實現(xiàn)方式參考了JXPagingView傍睹，效果可能更好更全點隔盛。
主要功能
- 支持上下滑動、左右滑動拾稳，手勢返回等
- 支持如UITableView的sectionView的懸停效果
- 支持多種分頁控件吮炕，如JXCategory,WMPageController等
- 可實現(xiàn)導(dǎo)航欄顏色漸變、頭圖下拉放大等效果
- 支持主頁访得、列表頁下拉刷新来屠，上拉加載
效果圖
| 說明 | 效果圖 |
|---|---|
| 微博個人主頁 |  wb.gif
|
| 網(wǎng)易云歌手頁 |  wy.gif
|
| 抖音個人主頁 |  dy.gif
|
| 主頁下拉刷新 |  mainRefresh.gif
|
| 列表下拉刷新 |  listRefresh.gif
|
實現(xiàn)
GKPageScrollView的結(jié)構(gòu)為UITableView + tableHeaderView + 分頁控件。主要是在UIScrollview的代理方法scrollViewDidScroll方法中做處理震鹉，判斷是tableView滑動俱笛，還是listView滑動。主要代碼如下：
// 處理子頁面listScrollView滑動
- (void)listScrollViewDidScroll:(UIScrollView *)scrollView {
// 如果禁止listScrollview滑動传趾，則固定其位置
if (!self.isListCanScroll) {
scrollView.contentOffset = CGPointZero;
}
// 獲取listScrollview偏移量
CGFloat offsetY = scrollView.contentOffset.y;
// listScrollView下滑至offsetY小于0迎膜，禁止其滑動，讓mainTableView可下滑
if (offsetY <= 0) {
self.isMainCanScroll = YES;
self.isListCanScroll = NO;
scrollView.contentOffset = CGPointZero;
scrollView.showsVerticalScrollIndicator = NO;
}else {
if (self.isListCanScroll) {
scrollView.showsVerticalScrollIndicator = YES;
}
}
}
// 處理mainTableView滑動
- (void)mainScrollViewDidScroll:(UIScrollView *)scrollView {
// 獲取mainScrollview偏移量
CGFloat offsetY = scrollView.contentOffset.y;
// 臨界點
CGFloat criticalPoint = [self.mainTableView rectForSection:0].origin.y - self.ceilPointHeight;
// 根據(jù)偏移量判斷是否上滑到臨界點
if (offsetY >= criticalPoint) {
self.isCriticalPoint = YES;
}else {
self.isCriticalPoint = NO;
}
if (self.isCriticalPoint) {
// 上滑到臨界點后浆兰，固定其位置
scrollView.contentOffset = CGPointMake(0, criticalPoint);
self.isMainCanScroll = NO;
self.isListCanScroll = YES;
}else {
if (self.isMainCanScroll) {
// 未達(dá)到臨界點磕仅，mainScrollview可滑動，需要重置所有l(wèi)istScrollView的位置
[[self.delegate listViewsInPageScrollView:self] enumerateObjectsUsingBlock:^(id<GKPageListViewDelegate> _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
UIScrollView *listScrollView = [obj listScrollView];
listScrollView.contentOffset = CGPointZero;
listScrollView.showsVerticalScrollIndicator = NO;
}];
}else {
// 未到達(dá)臨界點簸呈，mainScrollview不可滑動榕订，固定其位置
scrollView.contentOffset = CGPointMake(0, criticalPoint);
}
}
}
具體是實現(xiàn)還需要看代碼了解
使用
1、創(chuàng)建GKPageScrollView蜕便，并實現(xiàn)其代理方法
// 1劫恒、創(chuàng)建GKPageScrollView
self.pageScrollView = [[GKPageScrollView alloc] initWithDelegate:self];
self.pageScrollView.frame = self.view.bounds;
[self.view addSubview:self.pageScrollView];
// 2、實現(xiàn)代理方法
#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;
}
2轿腺、在listView中實現(xiàn)GKPageListViewDelegate代理方法两嘴，listView可以是UIView，UIViewController
#pragma mark - GKPageListViewDelegate
- (UIScrollView *)listScrollView {
return self.tableView;
}
- (void)listViewDidScrollCallback:(void (^)(UIScrollView * _Nonnull))callback {
self.listScrollViewScrollBlock = callback;
}
這樣就可實現(xiàn)仿微博個人主頁的效果了族壳。
3憔辫、如果想要實現(xiàn)導(dǎo)航欄漸變、頭圖下拉放大效果仿荆，需要在下面方法中做處理
- (void)mainTableViewDidScroll:(UIScrollView *)scrollView {
// 導(dǎo)航欄顯隱
CGFloat offsetY = scrollView.contentOffset.y;
// 0-200 0
// 200 - KDYHeaderHeigh - kNavBarheight 漸變從0-1
// > KDYHeaderHeigh - kNavBarheight 1
CGFloat alpha = 0;
if (offsetY < 200) {
alpha = 0;
}else if (offsetY > (kDYHeaderHeight - kNavBarHeight)) {
alpha = 1;
}else {
alpha = (offsetY - 200) / (kDYHeaderHeight - kNavBarHeight - 200);
}
self.gk_navBarAlpha = alpha;
self.titleView.alpha = alpha;
// 頭圖下拉放大
[self.headerView scrollViewDidScroll:offsetY];
}
最后
項目地址：GKPageScrollView
另外推薦下我的圖片瀏覽器GKPhotoBrowser
