一、最終效果
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