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

 

转载于:https://www.cnblogs.com/guiyuanself/p/5284136.html