放松的时候看看知乎,生活不解的时候问问知乎,这貌似已经成为了生活中的一种习惯,它独特翻页方式也是本人喜欢的一个原因,通过上划与下滑进行页面的翻页,不必返回再进入下一个页面,显得非常的简介并且人性化,这里就模拟知乎进行一次模拟滚动换页,希望能给想做这种效果的人一种思路,实现的大体思路就是在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