無限循環:
我們都知道UIScrollView 有一種很流暢的切換效果,結合UIPageControl的輔助展示效果,就可以完成一個很不錯的產品介紹功能頁面。那么像一些購物APP中,商品展示頁面無限滾動效果是如何實現的呢?
方法一:
前后 +1 的方法,這也是最常見的一種做法。假如我們有四張需要展示的圖片;我們創建了一個數組來保存圖片名字,此時數組中保存的是按順序1.png、2.png、3.png、4.png,這四個圖片的名字。要想實現無限循環的效果,我們需要改動下這個數組為:4.png、1.png、2.png、3.png、4png、1.png,我們發現在原來的數組的前后分別加入了一個圖片的名字,即將要循環展示的下一張圖片的名字。當你滑動到4.png的時候,下一張會是1.png。當你在 1.png往回滑動的時候,將要出現4.png。
核心內容:
我們發現目前數組中有6個圖片,當我們從3.png滑動到4.png,又從4.png 滑到1.png 的時候,我們要神不知鬼不覺的迅速切換到排在第二位的1.png。反像滑到的時候也是如此,從1.png滑到4.png的時候,我們要神不知鬼不覺的切換排到倒數第二位的4.png。那么怎么樣才能實現神不知鬼不覺呢?
看下面這兩個UIScrollView的實例方法
- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; // animate at constant velocity to new offset
- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated; // scroll so rect is just visible (nearest edges). nothing if rect completely visible
這兩個方法可以在animated參數為NO 的時候,幫我們迅速的切換視圖。
當每一次滑到結束的時候,UIScrollViewDelegate 會有一個回調方法:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView
此時我們來檢測是否滑到我們將要出發的1.png和4.png,如果是的話,那么就悄悄調用上面的兩個方法中的任意一個來實現視圖切換。
實現代碼如下所示:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView
{
if (currentPageIndex==0) {
[_scrollView setContentOffset:CGPointMake(([imageArray count]-2)*viewSize.size.width, 0)];
}
if (currentPageIndex==([imageArray count]-1)) {
[_scrollView setContentOffset:CGPointMake(viewSize.size.width, 0)];
}
}
方法二:
瞞天過海,此方法中無論數據源有多少個,UIScrollView只保留其中的三個視圖,其實這是方法一的變種。當你滑動UIScrollView的時候,無非是向前滑動,或者是向后滑動,所以能夠組成無限循環的基本條件就是前、中、后三個視圖。當你每次滑動的時候我都神不知鬼不覺的切換一下這三個視圖。
這也是和方法一的最主要區別。
區別:
#pragma mark 滾動停止事件
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//重新加載圖片
// [self reloadImage];
//移動到中間
[_scrollView setContentOffset:CGPointMake(_scrollView.frame.size.width, 0) animated:NO];
}
我們發現每一次滑動完成后,UIScrollView總是重新切換默認的中這一個視圖。下面這個代理方法將要實現重置這三個視圖:
#pragma mark 重新加載圖片
- (void)reloadImage
{
[self resumeTimerWithDelay] ;
int leftImageIndex,rightImageIndex ;
CGPoint offset = [_scrollView contentOffset] ;
if (offset.x > self.frame.size.width)
{ //向右滑動
_currentImageIndex = (_currentImageIndex + 1) % _imageCount ;
}
else if(offset.x < self.frame.size.width)
{ //向左滑動
_currentImageIndex = (_currentImageIndex + _imageCount - 1) % _imageCount ;
}
_centerImageView.image = [UIImage imageNamed:_imglist[_currentImageIndex]];
// NSLog(@"manual move at index : %d",_currentImageIndex) ;
//重新設置左右圖片
leftImageIndex = (_currentImageIndex + _imageCount - 1) % _imageCount ;
rightImageIndex = (_currentImageIndex + 1) % _imageCount ;
_leftImageView.image = [UIImage imageNamed:_imglist[leftImageIndex]] ;
_rightImageView.image = [UIImage imageNamed:_imglist[rightImageIndex]] ;
}
方法三(這里就不講解了):
原理:利用CollectionView來實現,代碼也非常簡單。一次性給數據源傳入 images.count * 1000,然后默認加載的時候,跳轉到 (images.count * 1000)/2.0 + ((images.count * 1000)/2.0) % images.count的位置就實現了
自動無限循環
剛才講解了無限循環的兩種不同實現方法,下面來講解下讓它自動滑動,我想大家都用過NSTime,沒錯,用他來實現簡單的計時器最好不過了。
至于你怎么繪圖就是你的事情了,這里只是簡單的分析一下。