无限轮播图片的实现原理
無限輪播圖相信是很多開發人員常用的一個功能,這里總結一下常用的兩種方式的實現原理
一、使用UIScrollview實現無限輪播 用UIScrollView實現,在scrollView上添加3個UIImageView,分別用來顯示上一張圖片,當前顯示的圖片,下一張圖片。scrollView在不滑動的時候永遠顯示當前圖片(第二張圖片)即contentOffset = CGPointMake(scrollViewW,0),在滑動的時候可以預覽部分上一張圖片或下一張圖片。現在以向左滑動為例,因為已經設置好三張圖片,我們向左滑動可以看到下一張圖片的一部分(此時屏幕顯示著部分當前圖片和部分下一張圖片)。如果完成了向左滑動,在UIScrollView的代理方法 scrollViewDidEndDecelerating:里 將三個UIImageView上顯示的圖片更換(下標一次+1),此時第二個imageView顯示的就是之前的第三個imageView上的圖片,最后將scrollView的偏移量拉回到第二張圖片上[scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO]- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
? ? NSInteger leftIndex;
? ? NSInteger rightIndex;
? ? if (scrollView.contentOffset.x == bannerScrollViewW * 2) {
? ? ? ? /** 向左滑? 計算 左 中 右 的下標索引*/
? ? ? ? leftIndex = self.centerIndex % self.imageNames.count;
? ? ? ? self.centerIndex = (self.centerIndex+1) % self.imageNames.count;
? ? ? ? rightIndex = (self.centerIndex +1) % self.imageNames.count;
? ? ? ? //NSLog(@"往左滑");
? ? }else if (scrollView.contentOffset.x == 0) {
? ? ? ? /** 向右滑? 計算 左 中 右 的下標索引*/
? ? ? ? rightIndex = self.centerIndex;
? ? ? ? self.centerIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);
? ? ? ? leftIndex = (self.centerIndex - 1) < 0?(self.imageNames.count - 1):(self.centerIndex - 1);
? ? ? ? //NSLog(@"往右滑");
? ? }else{
? ? ? ? // 沒有滑走 什么都不做,直接return
? ? ? ? return;
? ? }
? ? /** 設置圖片 */
? ? self.leftImageView.image = [UIImage imageNamed:self.imageNames[leftIndex]];
? ? self.centerImageView.image = [UIImage imageNamed:self.imageNames[self.centerIndex]];
? ? self.rightImageView.image = [UIImage imageNamed:self.imageNames[rightIndex]];
? ? /** 設置pageControl currentPage? 因為永遠顯示中間的圖片,故此currentPage=centerIndex */
? ? self.pageControl.currentPage = self.centerIndex;
? ? // 將 bannerScrollView 拉回到中間圖片的位置 顯示圖片
? ? [scrollView setContentOffset:CGPointMake(bannerScrollViewW, 0) animated:NO];
}
二、使用UICollectionView實現無限輪播 N張照片把contentsSize設置為N+2個圖片的寬度,例子如下,兩端填充如圖,當處于一端時,且即將進入循環狀態的時候,如第二張圖,從狀態1滑動到狀態2,在滑動結束的時候,將當前的位置直接轉到狀態3,直接setContentOffset神不知鬼不覺,視覺上是循環的。 注意:這里不能使用- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;當我們滑動cell是是無法觸發這個函數的,雖然它是動畫結束后就可以觸發,但是它指的動畫是系統原生動畫,如我們的手動滑動是無法觸發該函數的。 總結源自: http://www.jianshu.com/p/7123a07cc552轉載于:https://www.cnblogs.com/jingxin1992/p/7144729.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的无限轮播图片的实现原理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: The podfile
- 下一篇: 封装一个jquery库