• iOS 无限轮播图的两种实现


    首先说一下实现的思想:

    1. 用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];
      }
    2. 就用一个UIImageView来实现,给imageView添加swipe手势(左右都添加),在手势绑定的方法里更换图片,只是在设置下一张图片后要添加一个过渡动画 CATransition;利用过度动画的过度效果让图片产生翻页的效果;只是这种方式没有UISCrollView的那种交互性,不能中途终止翻页;
      - (void)swipeGestureRight:(UISwipeGestureRecognizer *)gesture {
          
          self.centerIndex = (self.centerIndex+1) % self.imageNames.count;
          
          self.centerImageView.image = [UIImage imageNamed:self.imageNames[self.centerIndex]];
          
          CATransition *animation=[CATransition animation];
          animation.delegate = self;
          animation.type = @"push";
          animation.subtype = @"fromRight";
          animation.duration = 1;
          animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
          
          [self.centerImageView.layer addAnimation:animation forKey:@"cube"];
          
          /** 设置pageControl currentPage  因为永远显示中间的图片,故此currentPage=centerIndex */
          self.pageControl.currentPage = self.centerIndex;
          NSLog(@"right");
      }
      
      
      - (void)animationDidStart:(CAAnimation *)anim {
          self.isAnimation = YES;
          [self.timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:3]];
      }
      
      
      - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
          self.isAnimation = NO;
      }
      
      
      - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
          return !self.isAnimation;
      }

      完整的代码:http://pan.baidu.com/s/1c1u6NCG

  • 相关阅读:
    13. Spring—AOP—JDK 的动态代理
    12. Spring — AOP 面向切面编程
    28-1 父组件传递数据给子组件 — props基本用法—驼峰命名说明
    【洛谷 1596】湖计数
    【洛谷 1280】尼克的任务
    【洛谷 3884】二叉树问题
    【洛谷 3384】模板树链剖分
    【洛谷 2089】烤鸡
    【洛谷 1706】全排列问题
    【洛谷 2692】覆盖
  • 原文地址:https://www.cnblogs.com/CyanStone/p/5076718.html
Copyright © 2020-2023  润新知