UI中如何用纯代码的方式来实现一个图片轮播器

图片轮播器

• 实现思路:
• 1. 添加 UIScrollView
• 2. 动态向 UIScrollView 中添加图片框（横向）
• 3. 设置 UIScrollView 的 contentSize 实现滚动, 实现横向滚动
• 4. 实现分页
• 5. 实现分页指示器 UIPageControl
• 6. 通过使用 Nstimer 实现自动滚动

 

1.动态创建imageView图片框 添加到scrollView中,

创建好图片框后, 给图片赋值,第一种是没有frame的,而第二种赋值,是可以有大小的,这个大小和图片的大小一样,

 1 //  ViewController.m
 2 //  _图片轮播器
 3 #import "ViewController.h"
 4  
 5 @interface ViewController () <UIScrollViewDelegate>
 6 @property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
 7 @property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
 8 @property (nonatomic, assign) int index;
 9 //定义一个计时器
10 @property (nonatomic, strong) NSTimer *timer;
11 @end
12  
13 @implementation ViewController
14 - (void)viewDidLoad {
15     [super viewDidLoad];
16     
17     //动态创建UIImageView  5个
18     CGFloat W = 300;
19     CGFloat H = 130;
20     CGFloat Y = 0;
21     
22     int count = 5; //5个
23     
24     for (int i=0; i<count; i++) {
25         //拼接图片名称
26         NSString *imgName = [NSString stringWithFormat:@"img_%02d",i + 1];
27         //加载图片
28         UIImage *image = [UIImage imageNamed:imgName];
29         //创建好图片框之后,图片框的大小就是图片的实际大小
30         UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
31         //设置frame
32         CGFloat X = i * W;
33         imageView.frame = CGRectMake(X, Y, W, H);
34         
35         [self.scrollView addSubview:imageView];
36         
37     }
38      //scrollViewView的contentSize
39     self.scrollView.contentSize = CGSizeMake(count * W, 0);
40     
41     //设置scrollViewView不显示水平滚动条     ——>隐藏水平滚动条
42     self.scrollView.showsHorizontalScrollIndicator = NO;
43     
44     //设置scrollViewView以分页的方式滚动  ——>  一句话分页功能,  这个设置好之后,scrollView会按照它本身的宽度来分页
45     self.scrollView.pagingEnabled = YES;
46     
47     //关闭弹簧效果
48     self.scrollView.bounces = NO;
49     
50     //启动一个计时器控件,来实现自动轮播
51     self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
52     
53      // 消息循环 把self.timer加入消息循环的模式修改一下
54     NSRunLoop *runloop = [NSRunLoop currentRunLoop];
55     [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
56     
57 }

接下来需要使用:  分页指示器:   Page Control   

注意,当把pageControl 移动到图片轮播器中时,不要用拖进去,而是要设置y值, 必须让他们处于同级,

  currentPage  表示当前页

让两者产生联系,就需要先代理,然后在滚动事件中去联系,

代码优化, —>解决一个bug:页面切换的时候,从前往后,要完全过度到下一页的时候才跳转页码, 而往前过度的时候,刚刚一到前面页,页码就跳转了,这样体验就非常不舒服,  那么我们怎样解决这个小bug呢?

  —>>  我们可以通过调整计算页码的计算公式,来具体定位,   如下:    

      我们用偏移量 offset.x  +   scrollView的宽度的一半 ,然后再除以宽度, 就可以计算出具体的page页码值,当图片滚动一超过图片的一半,就页码跳转, 如果没有超过一半,就不跳转,  这样整个体验,就舒服多了

 1 // 当Scroll view在滚动的时候会触发这个事件
 2 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 3      
 4     // 计算滚动的偏移
 5     CGFloat offsetX = scrollView.contentOffset.x;
 6      
 7     // Scroll view宽度（一页的宽度）
 8     CGFloat w = scrollView.bounds.size.width;
 9      
10     // 1. 计算出当前滚动到了第几页
11     // int page = scrollView.contentOffset.x / scrollView.bounds.size.width;
12      
13     int page = (offsetX + w * 0.5) / w;
14  
15     // 2. 根据页码设置page control 的 current page属性
16     self.pageControl.currentPage = page;
17 }

接下来实现自动轮播的效果

 1 // 实现自动轮播效果
 2 - (void)autoScroll {
 3      NSLog(@"....");
 4      
 5     // 1. 修改scroll view 的 contentOffset 的 x 值, 来实现自动滚动
 6     // 1> 获取当前页的索引
 7     NSInteger page = self.pageControl.currentPage;
 8      
 9     // 页索引+1
10     page++;
11      
12     // 检测页索引是否超过了总页数
13     if (page > self.pageControl.numberOfPages - 1) {
14         page = 0;
15     }
16      
17     // 2. 根据要滚动到的页码, 来设置scroll view的contentOffset
18     CGFloat w = self.scrollView.bounds.size.width;
19     // self.scrollView.contentOffset = CGPointMake(page * w, 0);
20     [self.scrollView setContentOffset:CGPointMake(page * w, 0) animated:YES];
21      
22 }
23  
24  
25 // 开始拖拽
26 - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
27     // 1. 停止计时器
28     [self.timer invalidate];  
29 }
30  
31 // 结束拖拽
32 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
33     // 重新开启一个计时器
34     self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
35     // 把self.timer加入消息循环的模式修改一下
36     NSRunLoop *runloop = [NSRunLoop currentRunLoop];
37     [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
38 }