無限循環(huán):
我們都知道UIScrollView 有一種很流暢的切換效果奄侠,結(jié)合UIPageControl的輔助展示效果镰踏,就可以完成一個很不錯的產(chǎn)品介紹功能頁面怜庸。那么像一些購物APP中上煤,商品展示頁面無限滾動效果是如何實現(xiàn)的呢?
方法一:
前后 +1 的方法他匪,這也是最常見的一種做法。假如我們有四張需要展示的圖片夸研;我們創(chuàng)建了一個數(shù)組來保存圖片名字邦蜜,此時數(shù)組中保存的是按順序1.png、2.png亥至、3.png悼沈、4.png,這四個圖片的名字姐扮。要想實現(xiàn)無限循環(huán)的效果絮供,我們需要改動下這個數(shù)組為:4.png、1.png茶敏、2.png壤靶、3.png、4png睡榆、1.png,我們發(fā)現(xiàn)在原來的數(shù)組的前后分別加入了一個圖片的名字萍肆,即將要循環(huán)展示的下一張圖片的名字袍榆。當(dāng)你滑動到4.png的時候,下一張會是1.png塘揣。當(dāng)你在 1.png往回滑動的時候包雀,將要出現(xiàn)4.png。
核心內(nèi)容:
我們發(fā)現(xiàn)目前數(shù)組中有6個圖片亲铡,當(dāng)我們從3.png滑動到4.png才写,又從4.png 滑到1.png 的時候,我們要神不知鬼不覺的迅速切換到排在第二位的1.png奖蔓。反像滑到的時候也是如此赞草,從1.png滑到4.png的時候,我們要神不知鬼不覺的切換排到倒數(shù)第二位的4.png吆鹤。那么怎么樣才能實現(xiàn)神不知鬼不覺呢厨疙?
看下面這兩個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參數(shù)為NO 的時候,幫我們迅速的切換視圖疑务。
當(dāng)每一次滑到結(jié)束的時候沾凄,UIScrollViewDelegate 會有一個回調(diào)方法:
- (void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView
此時我們來檢測是否滑到我們將要出發(fā)的1.png和4.png,如果是的話知允,那么就悄悄調(diào)用上面的兩個方法中的任意一個來實現(xiàn)視圖切換撒蟀。
實現(xiàn)代碼如下所示:
- (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)];
}
}
方法二:
瞞天過海,此方法中無論數(shù)據(jù)源有多少個温鸽,UIScrollView只保留其中的三個視圖保屯,其實這是方法一的變種。當(dāng)你滑動UIScrollView的時候涤垫,無非是向前滑動姑尺,或者是向后滑動,所以能夠組成無限循環(huán)的基本條件就是前雹姊、中股缸、后三個視圖。當(dāng)你每次滑動的時候我都神不知鬼不覺的切換一下這三個視圖吱雏。
這也是和方法一的最主要區(qū)別敦姻。
區(qū)別:
#pragma mark 滾動停止事件
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//重新加載圖片
// [self reloadImage];
//移動到中間
[_scrollView setContentOffset:CGPointMake(_scrollView.frame.size.width, 0) animated:NO];
}
我們發(fā)現(xiàn)每一次滑動完成后,UIScrollView總是重新切換默認的中這一個視圖歧杏。下面這個代理方法將要實現(xiàn)重置這三個視圖:
#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) ;
//重新設(shè)置左右圖片
leftImageIndex = (_currentImageIndex + _imageCount - 1) % _imageCount ;
rightImageIndex = (_currentImageIndex + 1) % _imageCount ;
_leftImageView.image = [UIImage imageNamed:_imglist[leftImageIndex]] ;
_rightImageView.image = [UIImage imageNamed:_imglist[rightImageIndex]] ;
}
方法三(這里就不講解了):
原理:利用CollectionView來實現(xiàn)镰惦,代碼也非常簡單。一次性給數(shù)據(jù)源傳入 images.count * 1000,然后默認加載的時候犬绒,跳轉(zhuǎn)到 (images.count * 1000)/2.0 + ((images.count * 1000)/2.0) % images.count的位置就實現(xiàn)了
自動無限循環(huán)
剛才講解了無限循環(huán)的兩種不同實現(xiàn)方法旺入,下面來講解下讓它自動滑動,我想大家都用過NSTime,沒錯茵瘾,用他來實現(xiàn)簡單的計時器最好不過了礼华。
至于你怎么繪圖就是你的事情了,這里只是簡單的分析一下拗秘。