效果图不是很明显,有兴趣的同学可以自行到UC首页查看scrollView的效果,实际效果未必是我这样实现的~先说明一下UC的效果和一般的有何不同.一般的效果是当向左滑或者向右滑的时候,下一个视图会显示最开始的画面或者最后的后面,UC的效果是从中间开始.
一般的pageScrollView的层级是一个接着一个,属于平行关系.UC首页的层级稍显不同,第二个视图X坐标开始比普通的要小半个屏幕.所以当最初开始向左滑的时候,第二个视图显示的是刚好一半的界面.可能很多人一开始都觉得只有改变当前视图的X位置就可以了,这里值得注意的是,偏移量达到一个屏幕的宽度才变换一整个界面,如果只改变当前视图的X位置和偏移量相同的话,会导致只需要滑动半个屏幕的宽度的时候,下一个视图就已经换完整个视图了.
这个是一般情况下scrollView的层级关系,和偏移量达到一个屏幕宽度时候的层级关系,绿色代表scrollView,蓝色,橙色和红色代表三个视图,灰色代表的window.
要解决滑动一个屏幕的宽度,视图才偏移半个屏幕,所以X的改变量是偏移量的1/2,同时也要改变下一个视图的X的值.假设scrollView向左滑动,那么当前视图的X就应该加偏移量的1/2,同时下一个视图的X就应该减偏移量的1/2.
最重要的一步解决了,下面的问题也就迎刃而解了,当滑动的时候,到底哪个视图的层级在上面呢,如果当前视图层级一直在上面,那怎么让下一个视图的层级慢慢显现出来呢,我是把当前视图的layer的width慢慢变小,同时把多出来给裁剪掉,相当于达到一个遮罩的效果,为什么是选择layer和不是直接把视图frame的width变小呢.因为直接把视图的frame变小,会导致自动布局的视图也跟着改变,所以选择的是layer层.
CGFloat offsetX = scrollView.contentOffset.x;
NSInteger curretnPage = offsetX/WIDTH;
UIView *currentView = self.controllers[curretnPage].view;
currentView.layer.masksToBounds = YES;
currentView.layer.frame = CGRectMake(curretnPage *WIDTH/2 + offsetX/2, 0, WIDTH - (offsetX - curretnPage*WIDTH)/2, HEIGHT);
[currentView layoutSubviews];
if (curretnPage < self.controllers.count - 1 ) {
UIView *nextView = self.controllers[curretnPage + 1].view;
nextView.layer.masksToBounds = YES;
nextView.layer.frame = CGRectMake((curretnPage +1) * WIDTH/2 +offsetX/2, 0, WIDTH, HEIGHT);
[nextView layoutSubviews];
}
主要代码就这些,当然,还有其他的小坑,有兴趣的可以尝试一下~
