前言: 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);
}
}
