iOS--自動無限循環(huán)UIScrollView

無限循環(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)簡單的計時器最好不過了礼华。
至于你怎么繪圖就是你的事情了,這里只是簡單的分析一下拗秘。


run.png

HYBLoopScrollView

&SDCycleScrollView


隨手點個喜歡 吧~

關(guān)注我

QQ -- iOS交流群:107548668

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末圣絮,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子雕旨,更是在濱河造成了極大的恐慌扮匠,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件凡涩,死亡現(xiàn)場離奇詭異棒搜,居然都是意外死亡,警方通過查閱死者的電腦和手機活箕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門力麸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人讹蘑,你說我怎么就攤上這事末盔。” “怎么了座慰?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長翠拣。 經(jīng)常有香客問我版仔,道長,這世上最難降的妖魔是什么误墓? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任蛮粮,我火速辦了婚禮,結(jié)果婚禮上谜慌,老公的妹妹穿的比我還像新娘然想。我一直安慰自己,他們只是感情好欣范,可當(dāng)我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布变泄。 她就那樣靜靜地躺著,像睡著了一般恼琼。 火紅的嫁衣襯著肌膚如雪妨蛹。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天晴竞,我揣著相機與錄音蛙卤,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛颤难,可吹牛的內(nèi)容都是我干的神年。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼行嗤,長吁一口氣:“原來是場噩夢啊……” “哼已日!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起昂验,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤捂敌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后既琴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體占婉,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年甫恩,在試婚紗的時候發(fā)現(xiàn)自己被綠了逆济。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡磺箕,死狀恐怖奖慌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情松靡,我是刑警寧澤简僧,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布,位于F島的核電站雕欺,受9級特大地震影響岛马,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜屠列,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一啦逆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧笛洛,春花似錦夏志、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蝌诡,卻和暖如春溉贿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背浦旱。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工宇色, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓宣蠕,卻偏偏與公主長得像例隆,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子抢蚀,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,914評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫镀层、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,103評論 4 62
  • 第七章 大型程序架構(gòu) 雖然在一個腳本里完成一個web應(yīng)用很便利皿曲,但是這也意味著它很難擴展唱逢。當(dāng)程序不斷增長,越來越復(fù)...
    易木成華閱讀 918評論 0 1
  • 近期與友人聊天。他說劫樟,每天朝九晚五的生活令他崩潰痪枫,每天做一樣的事同一樣的人交談,拿死工資叠艳,沒有一點進步和動力奶陈,他想...
    吳希道閱讀 5,312評論 0 8