登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

iOS-多个UIScrollView滑动嵌套(仿微博、抖音、网易云个人详情...

[复制链接]
来自: QuintGao 分类: iOS精品源码 上传时间: 2019-2-13 11:32:53
Tag:

项目介绍:

前言

最近做项目遇到要实现如微博个人详情页的滑动效果,通过查找资料最终完成了GKPageScrollView,可实现如微博、抖音、网易云等个人详情页的滑动效果。

该库的实现方式参考了JXPagingView,效果可能更好更全点。

主要功能

  • 支持上下滑动、左右滑动,手势返回等

  • 支持如UITableView的sectionView的悬停效果

  • 支持多种分页控件,如JXCategory,WMPageController

  • 可实现导航栏颜色渐变、头图下拉放大等效果

  • 支持主页、列表页下拉刷新,上拉加载

效果图

说明效果图
微博个人主页wb.gif
网易云歌手页wy.gif
抖音个人主页dy.gif
主页下拉刷新mainRefresh.gif
列表下拉刷新listRefresh.gif

实现

GKPageScrollView的结构为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;
    
    // 根据偏移量判断是否上滑到临界点
    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) {
            // 未达到临界点,mainScrollview可滑动,需要重置所有listScrollView的位置
            [[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 {
            // 未到达临界点,mainScrollview不可滑动,固定其位置
            scrollView.contentOffset = CGPointMake(0, criticalPoint);
        }
    }
}

具体是实现还需要看代码了解

使用

1、创建GKPageScrollView,并实现其代理方法

// 1、创建GKPageScrollView
self.pageScrollView = [[GKPageScrollView alloc] initWithDelegate:self];
self.pageScrollView.frame = self.view.bounds;
[self.view addSubview:self.pageScrollView];

// 2、实现代理方法
#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中实现GKPageListViewDelegate代理方法,listView可以是UIView,UIViewController

#pragma mark - GKPageListViewDelegate
- (UIScrollView *)listScrollView {
    return self.tableView;
}

- (void)listViewDidScrollCallback:(void (^)(UIScrollView * _Nonnull))callback {
    self.listScrollViewScrollBlock = callback;
}

这样就可实现仿微博个人主页的效果了。

3、如果想要实现导航栏渐变、头图下拉放大效果,需要在下面方法中做处理

- (void)mainTableViewDidScroll:(UIScrollView *)scrollView {
    // 导航栏显隐
    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

相关源码推荐:

我来说两句
*滑动验证:
所有评论(21)
ff12345 2019-2-14 09:43:35
相当不错,感谢无私分享精神!
回复
op568f 2019-2-14 09:43:37
学习...学习...
回复
应用安卓 2019-2-14 09:43:40
感谢分享,楼主V5~
回复
phoiu 2019-2-14 09:43:59
内容很好,棒棒哒
回复
android小哥 2019-2-14 09:44:04
写的真的很不错
回复
kengsir 2019-2-14 09:44:05
内容很好,棒棒哒
回复
code4app热心网友 2019-2-14 10:05:12
我只是路过打酱油的。
回复
xukaiv5 2019-2-14 10:05:25
我只是路过打酱油的。
回复
xukaiv5 2019-2-14 10:05:29
精华内容,楼主V5!
回复
123下一页
提取码:  下载次数:84 状态:已购或VIP 售价:0(原价:15)金钱 下载权限:初级码农 
1505 0 84
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表