iOS 實(shí)現(xiàn)無限輪播圖

一、最終效果

image

二、原理說明

通過UICollectionView實(shí)現(xiàn)橫向滾動(dòng)輪播效果如下圖所示,當(dāng)移動(dòng)到左右邊緣后不可以繼續(xù)移動(dòng)

image

將CollectionView展開后的示意圖如下:

image

思考:要使CollectionView滾動(dòng)到左邊緣和右邊緣時(shí)均可以繼續(xù)滾動(dòng),并且從左邊緣向左滾動(dòng)時(shí)顯示的是最后一頁,從右邊緣向右滾動(dòng)時(shí)顯示的是第一頁,可以在左邊插入最后一頁,在右邊插入第一頁,這樣就可以滾動(dòng)了。

示意圖如下:

image

運(yùn)行效果

image

現(xiàn)在還差最后一步了,當(dāng)手動(dòng)滾動(dòng)到左側(cè)第一頁時(shí),讓CollectionView自動(dòng)滾動(dòng)到倒數(shù)第二頁:

image

運(yùn)行效果如下:

image

當(dāng)手動(dòng)滾動(dòng)到最后一頁時(shí),讓CollectionView自動(dòng)滾動(dòng)到正數(shù)第二頁:

image

運(yùn)行效果如下:

image

數(shù)據(jù)Setter方法如下:

-(void)setData:(NSArray<NSString *> *)data{
    _titles = [NSMutableArray arrayWithArray:data];
    //收尾分別插入一條數(shù)據(jù)
    [_titles addObject:data.firstObject];
    [_titles insertObject:data.lastObject atIndex:0];
    //_collectionView滾動(dòng)到第二頁的位置
    [_collectionView setContentOffset:CGPointMake(_collectionView.bounds.size.width, 0)];
    //設(shè)置_pageControl的顯示頁數(shù)
    _pageControl.numberOfPages = data.count;
}

通過代理方法更新CollectionView的滾動(dòng)位置和PageControl的顯示

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSInteger page = scrollView.contentOffset.x/scrollView.bounds.size.width;
    NSLog(@"滾動(dòng)到:%zd",page);
    if (page == 0) {//滾動(dòng)到左邊
        scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width * (_titles.count - 2), 0);
        _pageControl.currentPage = _titles.count - 2;
    }else if (page == _titles.count - 1){//滾動(dòng)到右邊
        scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
        _pageControl.currentPage = 0;
    }else{
        _pageControl.currentPage = page - 1;
    }
}

最終得到如下效果:

image

Github

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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