iOS 开发 图片轮播的实现原理

在iOS项目开发中常常会有遇到图片轮播的场景，对于如何实现轮播初学者可能会有点搞不懂，但愿能经过我这个教程明白这个轮播原理，而且可以自给实现轮播图的封装

实现轮播就是当scrollView滚动到最后一页的时候再继续接着第一页滚动，视觉上是连环滚动的 可是其实是在改变scrollView的contentoffset为0的时候去除了动画效果

实现步骤以下：

1.首先初始化scrollView  

- (void)setScrollView{

    self.scrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];

    self.scrollView.delegate = self;

    NSMutableArray *imageArray = [NSMutableArray array];

    [self setImageArray:imageArray];

    self.imagsArray = [NSMutableArray arrayWithArray:imageArray];

//最重要的一点是须要对图片的数据进行一个简单的处理，须要把最后一张图片在第一个位置再放一张，这样在图片从最后一张切换到第一张的时候有个过渡的过程（连贯的效果）

    [self.imagsArray insertObject:imageArray.lastObject atIndex:0];

    for (int i = 0; i < self.imagsArray.count; i ++) {

        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(kWidth * i, 0, kWidth, kHeight)];

        imageView.image = self.imagsArray[i];

        [self.scrollView addSubview:imageView];

    }

    self.scrollView.contentSize = CGSizeMake(kWidth * self.imagsArray.count, kHeight);

    self.scrollView.contentOffset = CGPointMake(kWidth, 0);

    self.scrollView.pagingEnabled = YES;

    self.scrollView.showsHorizontalScrollIndicator = NO;

    [self.view addSubview:self.scrollView];

}

2.获取本地的Image

- (NSMutableArray *)setImageArray:(NSMutableArray *)imageArray{

    for (int i = 1; i < 10; i++) {

        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"IMG_00%D.JPG",i]];

        [imageArray addObject:image];

    }

    return imageArray;

}

3.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

    CGFloat x = scrollView.contentOffset.x;

    NSLog(@"%f",x);

    if (x > (self.imagsArray.count - 1)*kWidth) {//若是是最后一张就改变scrollView的偏移量到第一张  注意后面动画效果改成no

        [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];

    }

    if (x < 0) {//若是是第一张便宜到最后一张

        [scrollView setContentOffset:CGPointMake((self.imagsArray.count - 1) *kWidth, 0) animated:NO];

    }

}

4.加上定时器

#pragma mark --设置定时器自动轮播

- (void)autoPlay{

    CGFloat x = _scrollView.contentOffset.x;

    if (x + kWidth >= _scrollView.contentSize.width) {

//这里的两句代码就是为了当偏移量到第一张的时候再作个动画过渡一下，有个滚动的效果  注意第一句代码动画效果是no  第二句代码动画效果是yes

        [_scrollView setContentOffset:CGPointMake(0, 0) animated:NO];

        [_scrollView setContentOffset:CGPointMake(kWidth, 0) animated:YES];

    }else{

        [_scrollView setContentOffset:CGPointMake(x + kWidth, 0) animated:YES];

    }

    

}

5.这里我没有加上pageControl   读者能够本身加上   若是读者须要本身封装只须要在外部传进来一个图片数据就好了   

 

本教程就到这，若是有问题欢迎指出！谢谢！  qq：824888663   也可邮件联系：guiyuanself@163.com