IOS开发学习笔记十三 UIScrollView控件实现轮播图

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/abc6368765/article/details/82589292

效果图：项目地址

代码：

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollViewContent;
@property (weak, nonatomic) IBOutlet UIImageView *ivLastView;
@property (weak, nonatomic) IBOutlet UIScrollView *scrollViewSlider;
@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

// 创建一个用来引用计时器对象的属性
@property (nonatomic, strong) NSTimer *timer;

@end

@implementation ViewController

// 实现UIScrollView的滚动方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{

    // 如何计算当前滚动到了第几页？
    // 1. 获取滚动的x方向的偏移值
    CGFloat offsetX = scrollView.contentOffset.x;
    // 用已经偏移了得值, 加上半页的宽度
    offsetX = offsetX + (scrollView.frame.size.width * 0.5);

    // 2. 用x方向的偏移的值除以一张图片的宽度(每一页的宽度)，取商就是当前滚动到了第几页（索引）
    int page = offsetX / scrollView.frame.size.width;

    // 3. 将页码设置给UIPageControl
    self.pageControl.currentPage = page;

    NSLog(@"滚了，要在这里根据当前的滚动来计算当前是第几页。");
}

// 实现即将开始拖拽的方法
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    // 停止计时器
    // 调用invalidate一旦停止计时器, 那么这个计时器就不可再重用了。下次必须重新创建一个新的计时器对象。
    [self.timer invalidate];

    // 因为当调用完毕invalidate方法以后, 这个计时器对象就已经废了，无法重用了。所以可以直接将self.timer设置为nil
    self.timer = nil;
}

// 实现拖拽完毕的方法
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{

    // 重新启动一个计时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];

    // 再次修改一下新创建的timer的优先级
    // 修改self.timer的优先级与控件一样
    // 获取当前的消息循环对象
    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
    // 改变self.timer对象的优先级
    [runLoop addTimer:self.timer forMode:NSRunLoopCommonModes];
}


- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSString *sandBox = NSHomeDirectory();
    NSLog(@"%@", sandBox);

    CGFloat maxH = CGRectGetMaxY(self.ivLastView.frame);

    // 设置UIScrollView的contentSize
    self.scrollViewContent.contentSize = CGSizeMake(0, maxH);
    // 设置默认滚动位置
    self.scrollViewContent.contentOffset = CGPointMake(0, -44);
    // 设置距离上面的始终有74的内边距
    self.scrollViewContent.contentInset = UIEdgeInsetsMake(44, 0, 54, 0);
    [self initSlider];
}

- (void)initSlider{
    // 动态创建UIImageView添加到UIScrollView中

    CGFloat imgW = 375;
    CGFloat imgH = 168;
    CGFloat imgY = 0;

    // 1. 循环创建5个UIImageView添加到ScrollView中
    for (int i = 0; i < 5; i++) {
        // 创建一个UIImageView
        UIImageView *imgView = [[UIImageView alloc] init];

        // 设置UIImageView中的图片
        NSString *imgName = [NSString stringWithFormat:@"img_%02d", i + 1];
        imgView.image = [UIImage imageNamed:imgName];

        // 计算每个UIImageView在UIScrollView中的x坐标值
        CGFloat imgX = i * imgW;
        // 设置imgView的frame
        imgView.frame = CGRectMake(imgX, imgY, imgW, imgH);

        // 把imgView添加到UIScrollView中
        [self.scrollViewSlider addSubview:imgView];
    }


    // 设置UIScrollView的contentSize(内容的实际大小)
    CGFloat maxW = self.scrollViewSlider.frame.size.width * 5;
    self.scrollViewSlider.contentSize = CGSizeMake(maxW, 0);


    // 实现UIScrollView的分页效果
    // 当设置允许分页以后, UIScrollView会按照自身的宽度作为一页来进行分页。
    self.scrollViewSlider.pagingEnabled = YES;

    // 隐藏水平滚动指示器
    self.scrollViewSlider.showsHorizontalScrollIndicator = NO;

    // 指定UIPageControl的总页数
    self.pageControl.numberOfPages = 5;

    // 指定默认是第0页
    self.pageControl.currentPage = 0;


    // 创建一个"计时器"控件NSTimer控件
    // 通过scheduledTimerWithInterval这个方法创建的计时器控件, 创建好以后自动启动
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(scrollImage) userInfo:nil repeats:YES];

    // 修改self.timer的优先级与控件一样
    // 获取当前的消息循环对象
    NSRunLoop *runLoop = [NSRunLoop currentRunLoop];
    // 改变self.timer对象的优先级
    [runLoop addTimer:self.timer forMode:NSRunLoopCommonModes];


}

// 自动滚动图片的方法
// 因为在创建计时器的时候, 指定了时间间隔是1.0秒,所以下面这个方法每隔一秒钟执行一次
- (void)scrollImage
{
    // 每次执行这个方法的时候, 都要让图片滚动到下一页
    // 如何让UIScrollView滚动到下一页?
    // 1. 获取当前的UIPageControl的页码
    NSInteger page = self.pageControl.currentPage;
    NSLog(@"当前page ==== %d",page);

    // 2. 判断页码是否到了最后一页, 如果到了最后一页, 那么设置页码为0（回到第一页）。如果没有到达最后一页, 则让页码+1
    if (page == self.pageControl.numberOfPages - 1) {
        // 表示已经到达最后一页了
        page = 0; // 回到第一页
    } else {
        page++;
    }
    NSLog(@"计算后的page ==== %d",page);
    // 3. 用每页的宽度 * (页码 + 1) == 计算除了下一页的contentOffset.x
    CGFloat offsetX =  self.scrollViewSlider.frame.size.width*page;
    NSLog(@"计算后的offsetX ==== %d",offsetX);

    // 4. 设置UIScrollView的contentOffset等于新的偏移的值
    [self.scrollViewSlider setContentOffset:CGPointMake(offsetX, 0) animated:YES];


    // 如果图片现在已经滚动到最后一页了, 那么就滚动到第一页

}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end