你的位置:首页 > 操作系统

[操作系统]简单的图片无限轮播器(要点提醒)


 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 - UIScrollViewDelegate113 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView114 {115   _isDragging = YES;116 }117   //  停止滚动118 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView119 {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