简单的图片无限轮播器(要点提醒)

  1 #import "ViewController.h"
  2 #define kDeviceWidth [UIScreen mainScreen].bounds.size.width
  3 #define kDeviceHeight [UIScreen mainScreen].bounds.size.height
  4 #define   Kpage 3
  5 @interface ViewController ()<UIScrollViewDelegate>
  6 
  7 @property(nonatomic,strong)UIPageControl *pageCtrl;
  8 @property (nonatomic,weak) UIScrollView *scrollView;
  9 @property (nonatomic,weak) UIImageView *currentImageView; // 当前imageView
 10 @property (nonatomic,weak) UIImageView *nextImageView; // 下一个imageView
 11 @property (nonatomic,weak) UIImageView *preImageView; //上一个imageView
 12 @property (nonatomic,assign) BOOL isDragging; // 是否正在滚动
 13 @property (nonatomic,strong)NSTimer *timer;
 14 @end
 15 
 16 @implementation ViewController
 17 
 18 - (void)viewDidLoad {
 19     [super viewDidLoad];

 // 注意,在有导航栏的情况下,需要在viewDidLoad 中加上 self.automaticallyAdjustsScrollViewInsets = NO;不然会出现图片下移64的情况 ,scrollView.frame的高度要比图片的高度大64,不然,图片显示不全

 20     UIScrollView *scrollView =[[UIScrollView alloc] init];
 21     scrollView.frame = CGRectMake(0, 0, kDeviceWidth, kDeviceHeight);
 22     [self.view addSubview:scrollView];
 23     self.scrollView = scrollView;
 24     [self.scrollView setContentSize:CGSizeMake(kDeviceWidth * 3, kDeviceWidth)];
 25     //  设置隐藏横向条
 26     self.scrollView.showsHorizontalScrollIndicator = NO;
 27     //  设置自动分页
 28     self.scrollView.pagingEnabled = YES;
 29     //  设置代理
 30     self.scrollView.delegate = self;
 31     //  设置当前点
 32     self.scrollView.contentOffset = CGPointMake(kDeviceWidth, 0);
 33     //  设置是否有边界
 34     self.scrollView.bounces = NO;

35 //  初始化当前视图
// 注意:这里如果图片向左轮播,无需初始化上一个视图;
如果图片向右轮播,无需初始化下一个视图
 36     UIImageView *currentImageView =[[UIImageView alloc] init];
 37     currentImageView.image = [UIImage imageNamed:@"bg_01"];
 38     [self.scrollView addSubview:currentImageView];
 39     self.currentImageView = currentImageView;
 40     self.currentImageView.frame = CGRectMake(kDeviceWidth, 0, kDeviceWidth, kDeviceHeight);
 41     self.currentImageView.contentMode = UIViewContentModeScaleAspectFill;
 42     //  初始化下一个视图
 43     UIImageView *nextImageView = [[UIImageView alloc] init];
 44     nextImageView.image = [UIImage imageNamed:@"bg_02"];
 45     [self.scrollView addSubview:nextImageView];
 46     self.nextImageView = nextImageView;
 47     self.nextImageView.frame = CGRectMake(kDeviceWidth * 2, 0, kDeviceWidth, kDeviceHeight);
 48     self.nextImageView.contentMode = UIViewContentModeScaleAspectFill;
 49     //  初始化上一个视图, 
 50     UIImageView *preImageView =[[UIImageView alloc] init];
 51     preImageView.image = [UIImage imageNamed:@"bg_03"];
 52     preImageView.frame = CGRectMake(0, 0, kDeviceWidth, kDeviceHeight);
 53     [self.scrollView addSubview:preImageView];
 54     self.preImageView = preImageView;
 55     self.preImageView.contentMode =UIViewContentModeScaleAspectFill;
 56 
 57     //  设置时钟动画 定时器
 58 
 59     self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(update:) userInfo:nil repeats:YES];
 60     //  将定时器添加到主线程
 61     [[NSRunLoop mainRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
 62 
 63 }
 64     // 分页
 65 -(UIPageControl *)pageCtrl{
 66     if (_pageCtrl == nil) {
 67         
 68         //分页控件
 69         _pageCtrl = [[UIPageControl alloc]init];
 70         _pageCtrl.numberOfPages = Kpage;
 71         
 72         CGSize size = [_pageCtrl sizeForNumberOfPages:Kpage];
 73         _pageCtrl.bounds = CGRectMake(0, 0, size.width, size.height);
 74         _pageCtrl.center = CGPointMake(self.view.center.x, CGRectGetMaxY(self.scrollView.frame) - 20);
 75         _pageCtrl.pageIndicatorTintColor = [UIColor redColor];
 76         _pageCtrl.currentPageIndicatorTintColor = [UIColor greenColor];
 77         
 78         [self.view addSubview:_pageCtrl];
 79         
 80         
 81     }
 82     return _pageCtrl;
 83 }
 84 
 85 
 86 -(void)updateTimer{
 87     //修改页号
 88     int page = (self.pageCtrl.currentPage + 1 ) % Kpage;
 89     self.pageCtrl.currentPage = page;
 90   
 91 }
 92 
 93 
 94 - (void)update:(NSTimer *)timer{
 95     //定时移动
 96     
 97     if (_isDragging == YES) {
 98         
 99         return ;
100     }
101     CGPoint offSet = self.scrollView.contentOffset;
102     offSet.x +=offSet.x;
103     
104     [self updateTimer];
105     
106     [self.scrollView setContentOffset:offSet animated:YES];
107     if (offSet.x >= kDeviceWidth *2) {
108         offSet.x = kDeviceWidth;
109     }
110    
111 }
112 #pragma mark - UIScrollViewDelegate
113 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
114 {
115     _isDragging = YES;
116 }
117     //  停止滚动
118 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
119 {
120     _isDragging = NO;
121 
122 }
123 
124     // 开始滚动
125 - (void) scrollViewDidScroll:(UIScrollView *)scrollView{
126     static int i =1; //   当前展示的是第几张图片
127     float offset = self.scrollView.contentOffset.x;
// 注意:这里如果图片向左轮播,无需加载上一个视图;如果图片向右轮播,无需加载下一个视图

128     if (self.nextImageView.image == nil || self.preImageView.image == nil) {
129     //  加载下一个视图
130     NSString *imageName1 = [NSString stringWithFormat:@"bg_0%d",i == Kpage ? 1:i +1];
131     _nextImageView.image = [UIImage imageNamed:imageName1];
132     // 加载上一个视图
133     NSString *imageName2 = [NSString stringWithFormat:@"bg_0%d",i==1 ? Kpage :i-1];
134     _preImageView.image = [UIImage imageNamed:imageName2];
135      
136     }
// 注意:这里如果图片向左轮播,无需if(offset ==0)判断;如果图片向右轮播,无需if (offset == scrollView.bounds.size.width * 2)判断

137     if(offset ==0){
138         _currentImageView.image = _preImageView.image;
139         scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
140         _preImageView.image = nil;
141         if (i == 1) {
142         i =Kpage;
143         } else{
144         i-=1;
145         }
146 
147     }
148     if (offset == scrollView.bounds.size.width * 2) {
149         _currentImageView.image = _nextImageView.image;
150         scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
151         _nextImageView.image = nil;
152         if (i == Kpage) {
153         i = 1 ;
154         }else{
155         i +=1 ;
156         }
157       
158     }
159    
160 }
161 
162 
163 @end


假如图片为img1,img2,img3
//具体说明一下:以三张图片向左轮播为例,首先当前页面(就是看的见得)为current位置为320(以5S为例吧,宽度为320)图片为img1,下一张图片next位置为640,图片为img2,
( i= 1)

1.当前图片2秒后(假如定时器2秒执行一次)移动到640(定时器每执行一次移动一个屏幕宽度);进入if (offset == scrollView.bounds.size.width * 2) 判断

2.判断结果为当前页面的图片换成前面next的图片,结果为img2,next的图片为空,current当前页面位置变成320(i= 2)

3.因为next的图片为空,所以进入if (self.nextImageView.image == nil || self.preImageView.image == nil)
4.判断结果,根据后面的三目运算next的图片换成img3(因为三目运算)

5.当前图片2秒后又(定时器2秒执行一次)又移动到640(定时器每执行一次移动一个屏幕宽度);进入if (offset == scrollView.bounds.size.width * 2) 判断把图片换成img3,让next为空,从此无限循环

源文件在这里:http://pan.baidu.com/s/1kVKrbkb

原文地址:https://www.cnblogs.com/ljcgood66/p/5396557.html