iOS开发------仿知乎上下滑动切换页面

放松的时候看看知乎,生活不解的时候问问知乎,这貌似已经成为了生活中的一种习惯,它独特翻页方式也是本人喜欢的一个原因,通过上划与下滑进行页面的翻页,不必返回再进入下一个页面,显得非常的简介并且人性化,这里就模拟知乎进行一次模拟滚动换页,希望能给想做这种效果的人一种思路,实现的大体思路就是在ScrollView中嵌套ScrollView来感应达到切换效果。利用工作之余就做了一个类似功能的小Demo,当然距离知乎还差得远,但是基本原理应该如此,如果有更好的思路,也请告知一下,在这里先初始化一个Thanks() O(∩_∩)O

如果有解析不详细的地方,也欢迎去Demo的GitHub下载一下本人的Demo:https://github.com/YRunIntoLove/YSimilarZHPullDownDemo

看一下效果图(因为图片太大,所以草草的滑动了几下,Sorry - -):

效果图


梳理层次(顺序:子视图 -> 父视图):

  • 响应滑动的ScrollView,搭载自定义的customView,能够响应滑动反馈进行上下翻页的回调,并通过Delegate告知superView进行怎么样的翻页操作,Demo中叫做SimilarZHPullDownView
  • 进行整体翻页的ScrollView,搭载SimilarZHPullDownView,通过感知上下翻页的回调,设置自身的ContentOffset更改偏移量达到翻页的效果,Demo中叫做YSimilarZHPullDownMainView


SimilarZHPullDownView

需要一个滚动视图(ScrollView)作为底层视图,响应滑动操作,加载的标签以及自定义的视图都贴到这个滚动视图上,通过代理中的相关回调获取偏移量,判断进行什么样子的滚动。
这里选择通过懒加载的方式加载这个属性,与Objective-C不太一样,正好熟悉一下Swift中的懒加载

/// 懒加载底层的滚动视图
lazy var bottomScrollView : UIScrollView  =
{
    //当前视图的宽度
    let width = self.bounds.size.width

    //初始化滚动视图
    var scrollView:UIScrollView = UIScrollView(frame:CGRectMake(0, 0, width, self.bounds.size.height))

    //添加自定义视图
    scrollView.addSubview(self.customView!)

    //自定义视图的的高度
    var height = self.customView?.bounds.size.height

    //头页
    scrollView.addSubview(self.createLable(CGRectMake(0,-1 * self.responseHeight,width,30), title: self.headerTitle))

    //尾页
    scrollView.addSubview(self.createLable(CGRectMake(0,height!,width,self.responseHeight), title:self.footerTitle))

    //设置ContentSize的高度,保证不小于视图的高度
    height = (height > self.bounds.size.height ? height : self.bounds.size.height)

    scrollView.contentSize = CGSize(width: self.bounds.size.width, height: height!)
    scrollView.delegate = self;

    return scrollView
}()

一个描述最小响应幅度大小的变量,上拉或者下拉达到切换状态的最小幅度,或者说上拉、下拉达到换页响应的最小幅度

/// 响应的高度,就是滑动响应的最小幅度
final let responseHeight = CGFloat(60)

一个自定义视图,将需要展示的视图赋值给这个属性即可,但是必须设置好frame

/// 中间位置的自定义视图
var customView:UIView?

其他的相关属性:

/// 代理
weak var 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值