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

图片轮播器

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

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

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

//  ViewController.m
//  _图片轮播器
#import "ViewController.h"
 
@interface ViewController () <UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;
@property (nonatomic, assign) int index;
//定义一个计时器
@property (nonatomic, strong) NSTimer *timer;
@end
 
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    
    //动态创建UIImageView  5个
    CGFloat W = 300;
    CGFloat H = 130;
    CGFloat Y = 0;
    
    int count = 5; //5个
    
    for (int i=0; i<count; i++) {
        //拼接图片名称
        NSString *imgName = [NSString stringWithFormat:@"img_%02d",i + 1];
        //加载图片
        UIImage *image = [UIImage imageNamed:imgName];
        //创建好图片框之后,图片框的大小就是图片的实际大小
        UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
        //设置frame
        CGFloat X = i * W;
        imageView.frame = CGRectMake(X, Y, W, H);
        
        [self.scrollView addSubview:imageView];
        
    }
     //scrollViewView的contentSize
    self.scrollView.contentSize = CGSizeMake(count * W, 0);
    
    //设置scrollViewView不显示水平滚动条     ——>隐藏水平滚动条
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    //设置scrollViewView以分页的方式滚动  ——>  一句话分页功能,  这个设置好之后,scrollView会按照它本身的宽度来分页
    self.scrollView.pagingEnabled = YES;
    
    //关闭弹簧效果
    self.scrollView.bounces = NO;
    
    //启动一个计时器控件,来实现自动轮播
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
    
     // 消息循环 把self.timer加入消息循环的模式修改一下
    NSRunLoop *runloop = [NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
    
}

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

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

  currentPage  表示当前页

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

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

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

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

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

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

// 实现自动轮播效果
- (void)autoScroll {
     NSLog(@"....");
     
    // 1. 修改scroll view 的 contentOffset 的 x 值, 来实现自动滚动
    // 1> 获取当前页的索引
    NSInteger page = self.pageControl.currentPage;
     
    // 页索引+1
    page++;
     
    // 检测页索引是否超过了总页数
    if (page > self.pageControl.numberOfPages - 1) {
        page = 0;
    }
     
    // 2. 根据要滚动到的页码, 来设置scroll view的contentOffset
    CGFloat w = self.scrollView.bounds.size.width;
    // self.scrollView.contentOffset = CGPointMake(page * w, 0);
    [self.scrollView setContentOffset:CGPointMake(page * w, 0) animated:YES];
     
}
 
 
// 开始拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 1. 停止计时器
    [self.timer invalidate];  
}
 
// 结束拖拽
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    // 重新开启一个计时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(autoScroll) userInfo:nil repeats:YES];
    // 把self.timer加入消息循环的模式修改一下
    NSRunLoop *runloop = [NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
}