前言: UIScrollerView 设置PageEnable,
每页滚动的偏移量是 UIScrollerView的frame.width的宽度,使用pageEnable控制page每次偏移量只能通过控制 frame解决
需求：
gif5新文件.gif
方案1:
使用UIScrollerView 通过代理控制一次滑动的滚动距离实现pageSize效果
根据滑动状态来调整 仿 pageEnable的效果
这里就不多介绍了 直接上代码:(查看了一些资料大部分的实现都基本是基于这段代码)
#pragma mark <UIScrollViewDelegate>
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
_startY = scrollView.contentOffset.y;
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (decelerate) return;
[selfdealPageEnableWithScrollView:scrollView];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
[selfdealPageEnableWithScrollView:scrollView];
}
#pragma mark 处理scrollView翻页效果
- (void)dealPageEnableWithScrollView:(UIScrollView *)scrollView{
static CGFloat halfH;
halfH = halfH ? halfH : scrollView.bounds.size.height;
NSLog(@"-----------------%zi%zi%zi",scrollView.contentOffset.y > (_otherPageStartY - halfH),_startY < scrollView.contentOffset.y,_startY < (_otherPageStartY - halfH));
NSLog(@"*****************%zi%zi%zi",scrollView.contentOffset.y < _otherPageStartY,_startY > scrollView.contentOffset.y,_startY >= _otherPageStartY);
if (scrollView.contentOffset.y > (_otherPageStartY - halfH +60) &&
_startY < scrollView.contentOffset.y &&
_startY < _otherPageStartY
// _isSecondPage) {//此处还可以用一个BOOL类型来记录是否是处在第一页,代替后面两个判断
[UIViewanimateWithDuration:0.5animations:^{
[scrollView setContentOffset:CGPointMake(0,_otherPageStartY)];
} completion:^(BOOL finished) {
NSLog(@"进入第二页------->%f",scrollView.contentOffset.y);
}];
}
else if (scrollView.contentOffset.y < (_otherPageStartY -30) &&
_startY > scrollView.contentOffset.y &&
_startY >= (_otherPageStartY - halfH)
// !_isSecondPage){
[UIViewanimateWithDuration:0.5animations:^{
[scrollView setContentOffset:CGPointZero];
} completion:^(BOOL finished) {
NSLog(@"进入第一页------->%f",scrollView.contentOffset.y);
}];
}
缺点:
效果死板, 每页切换的时候,流畅度不够, 甚至可以说略微的卡顿 , 只支持缓慢拖动, 当手势轻扫的时候甚至不能识别
方案2:
使用UICollectionView
可能很多人的第一想法就是使用 UICollectionView, 一波操作下来问题还是挺明显
- 创建UICollectionView的视图
- 主要属性设置: 将frame.width值 小于屏幕的宽
collectionView.pageEnable = YES
collectionView.clipsToBounds = NO
优点:
即是有很多的item也能正常显示出来, 并且不会有打的内存资源消耗
缺点:
cell会被重用和销毁, 一个pageSize中只能显示两个cell, 但是相较于中间放大的这种需求明显是不合适的,不管网那个方向滑动 都有有一个是消失的,
暂时没有想到解决方案, 有兴趣的可以自己去研究下
这里有个链接有兴趣的可以看看
方案3:
使用UIScroller + pageEnable 实现(个人感觉比较简单方便,推荐)
主要利用系统pageEnable滑动一页,该一页其实就是当前scroller的frame 宽或者高 是frame不是contentSize 不要搞错
实现逻辑:
- 中间放大两侧缩小显示逻辑:
- 将UIScrollerView的frame小于屏宽,具体小于多少取决于到时候左右要显示的多少
- 设置UISCrollerView的pageEnable = YES
clipsToBounds = NO;//不裁剪 - 关于子视图间距 Doem中将最大设置成1 那么最小的就小于1 当视图缩小的时候本身就会产生间距, 该间距取决于视图缩放程度,自己把握吧
-
无限滚动实现逻辑:
主要利用scrolle, 将contentSzie设置成很大, 但是其中子视图的创建和item数组有关,通过在滚动过程中不断调整 对应item的frame 值, 来实现无限滚动
主要类介绍
- ZPScrollerScaleViewConfig pageSize大小, 缩放大小, 子视图间距大小等配置信息
- ZPScrollerScaleView 实现无限滚动和滚动缩放的主要类,所有功能都是在这个类中实现完成
- 三个重要属性:
items: 子视图数组, 将要时间轮播的视图数组. 要求大于2个
defalutIndex:视图展示的收个视图位于数组的下标
currentIndex:当前界面居中显示的下标值(readonly)
ZPScrollerScaleViewConfig:
配置属性:
1. pageSize //自定义的pagesize大小
2. ItemMaingin //子视图间距
3. scaleMin //最小缩放比
4. scaleMax //最大缩放比 建议设置为1 , 当大于1的时候 子视图会产生缩放导致失真
ZPScrollerScaleView
- 设置默认显示 当默认值较小和较大的时候制造循环轮播条件
/**当默认值较小和较大的时候制造循环轮播条件*/
- (void)configDefult:(NSInteger)defultIndex{
NSInteger currentIndex = 0;
NSInteger needMoveIndex = 0;
NSInteger currentIndex2 = 0;
NSInteger needMoveIndex2 = 0;
CGFloat shouldOffset = 0;
if(_defalutIndex <= 1){ //将最大和第二大的视图调整位置
currentIndex = 0;
needMoveIndex = self.items.count -1;
currentIndex2 = self.items.count -1;
needMoveIndex2 = self.items.count -2;
shouldOffset = -self.config.pageSize.width;
}else if(_defalutIndex >= self.items.count -2){//将最小和第二小的视图调整位置
currentIndex = self.items.count -1;
needMoveIndex = 0;
currentIndex2 = 0;
needMoveIndex2 = 1;
shouldOffset = self.config.pageSize.width;
}
UIView * currentView = [self.contentView viewWithTag:BaseTag + currentIndex];
UIView * needMoveView = [self.contentView viewWithTag:BaseTag + needMoveIndex];
needMoveView.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
needMoveView.center = CGPointMake(currentView.center.x + shouldOffset, needMoveView.center.y);
UIView * currentView2 = [self.contentView viewWithTag:BaseTag + currentIndex2];
UIView * needMoveView2 = [self.contentView viewWithTag:BaseTag + needMoveIndex2];
needMoveView2.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
needMoveView2.center = CGPointMake(currentView2.center.x + shouldOffset, needMoveView2.center.y);
}
- 添加需要参与轮播的子View
- (void)setItems:(NSArray<UIView *> *)items{
_items = items;
CGSize pageSize = self.config.pageSize;
//将视图摆在中间, 并且消除求余误差
CGFloat centerIetm = self.contentView.contentSize.width * 0.5;
NSInteger pageIndex = centerIetm/pageSize.width;
NSInteger pageOffsetIndex = pageIndex % self.items.count;
centerIetm = centerIetm - pageOffsetIndex * pageSize.width;
for(int i =0; i < items.count;i++){
UIView * view = items[I];
view.tag = BaseTag + I;
view.frame = CGRectMake(i * pageSize.width + self.config.ItemMaingin + centerIetm, 0, pageSize.width-self.config.ItemMaingin*2, pageSize.height);
[_contentView addSubview:view];
view.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
}
//这是默认显示
UIView * view = [self.contentView viewWithTag:self.defalutIndex+BaseTag];
view.transform = CGAffineTransformMakeScale(self.config.scaleMax, self.config.scaleMax);
[self.contentView setContentOffset:CGPointMake(centerIetm + pageSize.width*self.defalutIndex, 0)];
[self configDefult:self.defalutIndex];
}
无限滚动实现代码:
- (void)itemViewStartAnimationWithContentOffset:(CGFloat)contentOffsetX{
CGFloat pageSizeW = [UIScreen mainScreen].bounds.size.width - self.pageMagin*2;
NSInteger pageIndex = contentOffsetX/pageSizeW;
CGFloat scrale = (contentOffsetX/pageSizeW - pageIndex);
if(scrale >= 0.99){
[self exchangeItemViewPosition]; //完成一次显示, 调整子视图位置
}
if(scrale <= 0){
return;
}
//视图(左)
NSInteger currentIndex = (pageIndex%self.items.count);
NSInteger nextIndex = ((currentIndex+1)>(self.items.count-1)?0:(currentIndex+1));;
//视图缩放值(左)
CGFloat scraleCurrent = self.config.scaleMax - (self.config.scaleMax-self.config.scaleMin)*scrale;
CGFloat scraleNext = (self.config.scaleMax-self.config.scaleMin) *scrale +self.config.scaleMin;
if (contentOffsetX < _lastContentOffset ){ //向右
currentIndex = currentIndex +1 >= self.items.count?0:currentIndex +1;
nextIndex = ((currentIndex-1)<0?self.items.count-1:(currentIndex-1));
scraleCurrent = (self.config.scaleMax-self.config.scaleMin) *scrale +self.config.scaleMin;
scraleNext = self.config.scaleMax - (self.config.scaleMax-self.config.scaleMin)*scrale;
}
UIView * subViewCurrent = [self.contentView viewWithTag:currentIndex+BaseTag];
subViewCurrent.transform = CGAffineTransformMakeScale( scraleCurrent, scraleCurrent);
UIView * subViewNext = [self.contentView viewWithTag:nextIndex+BaseTag];
subViewNext.transform = CGAffineTransformMakeScale(scraleNext, scraleNext);
}
- 当scrollerView快速滚动的时候, 此时获取contentOffset是不连续的, 如过根据偏移量连续去处理滚动比例, 会导致缩放比例乃至视图显示不正确,此时采用_lastOffsetX 记录上一次的滚动, 与当前偏移量比较并+1加到当前偏移量,每次+1都会执行一次滚动计算,耗点性能但是丝般流畅,通过调试工具测试对性能影响不大.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
//首次显示
if (_lastOffsetX == 0) {
[self itemViewStartAnimationWithContentOffset:scrollView.contentOffset.x];
_lastOffsetX = scrollView.contentOffset.x;
return;
}
if(_lastOffsetX > scrollView.contentOffset.x){ //向左滑动
for (CGFloat i = _lastOffsetX; i >= scrollView.contentOffset.x; i--) {
[self itemViewStartAnimationWithContentOffset:i];
}
}else{//向右滑动
for (CGFloat i = _lastOffsetX; i < scrollView.contentOffset.x; i++) {
[self itemViewStartAnimationWithContentOffset:i];
}
}
_lastOffsetX = scrollView.contentOffset.x;
}
- 判断滚动一页完成, 调整子视图位置
- (void)exchangeItemViewPosition{
self.pageIndex = self.contentView.contentOffset.x/([UIScreen mainScreen].bounds.size.width - self.pageMagin*2);
CGSize pageSize = self.config.pageSize;
self.contentView.contentSize = CGSizeMake(self.contentView.contentSize.width + pageSize.width, pageSize.height);
if (self.contentView.contentOffset.x < _lastContentOffset ){
//向右
NSInteger currentIndex = (self.pageIndex%self.items.count);
NSInteger needMoveIndex = currentIndex-2 < 0?self.items.count+(currentIndex-2):currentIndex-2;
UIView * subView = [self.contentView viewWithTag:BaseTag + needMoveIndex];
subView.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
subView.center = CGPointMake((self.pageIndex-2) * pageSize.width+pageSize.width/2, subView.center.y);
}else{
//向左
NSInteger currentIndex = (self.pageIndex%self.items.count);
NSInteger needMoveIndex = currentIndex+2 > self.items.count-1?(currentIndex+2 -self.items.count):currentIndex+2;
UIView * subView = [self.contentView viewWithTag:BaseTag + needMoveIndex];
subView.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
subView.center = CGPointMake((self.pageIndex+2) * pageSize.width+pageSize.width/2, subView.center.y);
}
}
