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 delegate:SimilarZHPullDownViewDelegate?/// 标签上写的Title
var headerTitle = "上一篇"
var footerTitle = "下一篇"
var title = "Title"/// 类型
var type:SimilarZHPullDownType = .Default

相关的类型属性通过枚举来完成，枚举格式如下:

//滑动响应的方式
enum PullType
{case PullTypeUp   //上翻页case PullTypeDown //下翻页
}//视图的类型
enum SimilarZHPullDownType
{case Default    //默认中间页case Header     //第一页case Footer     //尾页
}

Swift是可以实现init方法的多态模式的，只不过需要用convenience 关键字来修饰一下init方法，并且这个关键词只能修饰init方法，只不过参数不一样而已，因此下面的就是便利构造方法:

//MARK: - FUNCTION
override init(frame: CGRect) {    super.init(frame: frame)
}/**
*  便利构造方法
*/
@available(iOS 8.0,*)
convenience init(frame: CGRect ,custom:UIView)
{self.init(frame:frame)self.customView = custom
}/**
*  便利构造方法
*/
@available(iOS 8.0,*)
convenience init(custom:UIView)
{self.init(frame:CGRectNull,custom:custom)
}/**
*  便利构造方法
*/
@available(iOS 8.0,*)
convenience init(custom:UIView,title:String)
{self.init(custom:custom)self.title = title
}

在加载视图的时候添加上底层的scrollView,用self.scrollView实现懒加载的实现

override func layoutSubviews(){self.addSubview(self.bottomScrollView)
}

最后这个视图的最重要的，通过底层ScrollView的代理方法，获得偏移量的垂直偏移量，通过偏移量的大小判断是否进行滚动以及滚动的方式

//MARK: -UIScrollView Delegatefunc scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {//获得偏移量let contentOffsetY = scrollView.contentOffset.y//当前响应的高度，因为下拉，所以响应距离为负数let beforeHeight = self.responseHeight * (-1)if(contentOffsetY < beforeHeight){print("我是DownView,上一页!")//表示上一页self.delegate?.similarZHPullDownView(self, pullType: .PullTypeUp)}//偏移量是视图左上角，所以垂直坐标需要-滚动视图的高度else if(contentOffsetY > (scrollView.contentSize.height - scrollView.bounds.size.height + self.responseHeight)){print("我是DownView,下一页!")//表示下一页self.delegate?.similarZHPullDownView(self, pullType: .PullTypeDown)}}

对外的传值和之前一样，用的是Delegate(委托) 传值，但是这里依旧可以使用闭包传值，以后可以尝试，定义的协议如下

protocol SimilarZHPullDownViewDelegate : class
{ /***  需要翻页进行的回调*/@available(iOS 8.0,*)func similarZHPullDownView(similarZHPullDownView : SimilarZHPullDownView , pullType:PullType)
}

这样视图就基本完成了

YSimilarZHPullDownMainView

这个视图是一个过渡作用的视图，是负责存储并且展示SimilarZHPullDownView的一个容器

定义两个对外的属性，提供默认值，第一个是第一个视图下拉出现的标签显示的String字段，第二个是最后一篇上拉出现标签显示的String字段，在外也可以通过设置来更改这两个存储属性

/***  第一篇上划以及最后一篇下滑显示的默认字样，可修改 ***/
var headerTitle:String = "已是第一篇"
var footerTitle:String = "最后一篇"

创建底层进行切换的ScrollView,这个ScrollView不能响应手动滚动，必须通过SimilarZHPullDownView的Delegate回调方法来更新contentOffset，达到切换的效果

/// 存放滚动页的主滚动页
lazy var scrollView:UIScrollView = {var scrollView:UIScrollView = UIScrollView(frame: CGRectMake(0,self.titleLabel.bounds.size.height,self.bounds.size.width,self.bounds.size.height - 50 - 64))scrollView.pagingEnabled = true//分页显示scrollView.showsVerticalScrollIndicator = false //不显示垂直滚条scrollView.scrollEnabled = false //不能滚动return scrollView
}()

在SimilarZHPullDownView上面显示title属性的标签，就是Demo中显示测试I的视图

/// 显示标题的标题
lazy var titleLabel:UILabel = {var label:UILabel = UILabel(frame: CGRectMake(0,0,self.bounds.size.width,50))label.textAlignment = .Centerreturn label
}()

存储SimilarZHPullDownView对象的数据源，并在设置新值得时候进行数据的处理，是存储属性，willSet相当于Objcetive-C中的KVO,监听属性的新值

/// 存放预览视图的数组,默认为空数组,为存储属性，设置KVO
var pullViews:[SimilarZHPullDownView] = []
{willSet{self.pullViews = newValue//开始做处理self.pullViews.first?.headerTitle = self.headerTitleself.pullViews.first?.type = .Headerself.pullViews.last?.footerTitle = self.footerTitleself.pullViews.last?.type = .Footer}
}

自定义的便利构造方法，require表示继承与该类的类必须实现这个init方法，当然这里可以不用加require，只是为了了解一下这个关键字而已(调皮0.0)

//MARK: - 构造方法
override init(frame: CGRect)
{super.init(frame: frame)self.addSubview(self.titleLabel)self.addSubview(self.scrollView)
}/***  便利构造方法*/
@available(iOS 8.0,*)
required convenience init(frame: CGRect,pullViews:[SimilarZHPullDownView])
{self.init(frame:frame)self.pullViews = pullViews
}

在加载该视图的时候，设置底层滚动视图容纳域的大小以及添加数据源中所有的SimilarZHPullDownView对象

override func layoutSubviews() {//设置自身的contentSizeself.scrollView.contentSize = CGSize(width: self.bounds.size.width, height: CGFloat(self.pullViews.count) * self.bounds.size.height)self.addChildView()
}

添加所有SimilarZHPullDownView视图的方法如下

//MARK: - 功能方法/**
*  添加子视图
*/
@available(iOS 8.0,*)
func addChildView()
{//获取当前视图的高度和宽度let height = self.bounds.size.heightlet width = self.bounds.size.widthfor(var i:Int = 0 ; i < self.pullViews.count; i++){//获取存储的SimilarZHPullDownView对象let pullDownView = self.pullViews[i]pullDownView.frame = CGRectMake(0, CGFloat(i) * height, width, height - 64 - 50)//设置代理pullDownView.delegate = self//添加视图self.scrollView.addSubview(pullDownView)}self.titleLabel.text = self.pullViews.first?.title
}

实现SimilarZHPullDownView Delegate的协议方法

// MARK: - SimilarZHPullDownView Delegate
func similarZHPullDownView(similarZHPullDownView: SimilarZHPullDownView, pullType: PullType)
{//获得当前的偏移量let contentOffset = self.scrollView.contentOffset//获得索引数let index = self.pullViews.indexOf(similarZHPullDownView)var paramNumber = CGFloat(1)switch pullType{case .PullTypeUp: //上翻页guard similarZHPullDownView.type == .Header else{paramNumber = CGFloat(-1)self.pullDone(paramNumber, contentOffset: contentOffset, index: index!)break}case .PullTypeDown://下翻页guard similarZHPullDownView.type == .Footer else{paramNumber = CGFloat(1)self.pullDone(paramNumber, contentOffset: contentOffset, index: index!)break}}
}

封装之后的滚动操作

/***  滚动操作*/
@available(iOS 8.0,*)
func pullDone(paramNumber:CGFloat,var contentOffset:CGPoint,index:Int)
{contentOffset.y += (paramNumber * self.bounds.size.height)self.scrollView.setContentOffset(contentOffset, animated: true)//显示即将出现的similarZHPullDownView对象的titleself.titleLabel.text = self.pullViews[index + Int(paramNumber)].title
}

在ViewController中进行加载过渡视图YSimilarZHPullDownMainView并作相关设置，Demo中的设置如下:

override func viewDidLoad() {super.viewDidLoad()self.navigationItem.title = "Yue"//创建DemoMainView对象//赋值/*** 设置表头与表位文字需要设置数据源之前 ***/demoMainView.headerTitle = "啦啦啦,我已经是第一篇了"demoMainView.footerTitle = "哈哈哈,我是最后一篇啦"demoMainView.pullViews = self.createPullDownViews()//添加视图self.view.addSubview(demoMainView)}

/***  创建测试PullDown视图*/
@available(iOS 8.0,*)
func createPullDownViews() -> [SimilarZHPullDownView]
{var views :[SimilarZHPullDownView] = []for(var i:Int = 0 ; i < 3; i++){let similarPullDownView = SimilarZHPullDownView(custom:self.createCustomView(),title:"测试\(i)")views.append(similarPullDownView)}return views
}

//随机创建UIView的对象
func createCustomView() -> UIView
{//初始化视图let view = UIImageView()//获得随机数//let count:UInt32 = arc4random_uniform(3) + UInt32(1)let count = 1//为了测试view.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height * CGFloat(count))view.image = UIImage(named: "testImage.jpg")view.contentMode = .ScaleToFillreturn view
}

这样功能基本就会像Demp中那样实现响应上下拉切换页面，理解不深，如果有错误，也请指点一下，Thanks()