登录 立即注册
金钱:

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

iOS用GKPageScrollView实现微博发现页滑动效果

[复制链接]
来自: QuintGao 分类: iOS精品源码 上传时间: 2019-3-8 13:18:25
Tag:

项目介绍:

前言

近期发现微博的发现页有这样一个功能,页面整体可以下拉刷新,当中间的标签上滑到顶部导航栏位置后,标签栏固定不动,下方列表页可以下拉刷新,上拉加载,导航栏左边出现返回按钮,当点击返回按钮后,页面回到初始位置。

于是我用我写的一个库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

相关源码推荐:

我来说两句
*滑动验证:
所有评论(11)
逆鳞九霄 2019-3-11 10:03:42
楼主用心了,内容非常精彩。
回复
逆鳞九霄 2019-3-11 10:05:14
感谢分享,Code4App有你更精彩:)
回复
ou大神 2019-3-11 10:06:06
code4app好的代码demo真的很多,谢谢啦~
回复
一人无 2019-3-11 10:06:08
mark,收藏了
回复
t8569 2019-3-11 10:06:27
code4app好的内容真的很多~赞
回复
Yf8546 2019-3-11 10:06:42
感谢大神分享,必须顶!
回复
kengsir 2019-3-11 10:07:01
mark,收藏了
回复
pp美景 2019-3-11 10:07:07
感谢分享,楼主V5~
回复
end_cancel 2019-3-15 14:17:20
很厉害,关注了
回复
12下一页
1137 3 0
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

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

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

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