「iOS」UI——无限轮播图实现与UIPageControl运用

「OC」UI

无限轮播图的实现以及UIPageControl的实际运用

明确要求

我们要实现一个能够进行无限滚动播放的视图程序，首先需要实现的是一个简单的滚动图片视图，在视图之中添加相关的UIPageControl的控件，让我们能够知道我们当前图片是处在滚动页面的哪个位置上。在实现简单滚动视图的基础上进行修改，使其实现无限轮播的功能。

简单滚动视图的实现

提到滚动视图，我们就会想起刚刚学习的UIScrollView，使用UIImageVIew布局在UIScrollView之中，我们写给其写个函数将UIScrollView的框架封装起来

- (void)setupScrollView {
   
   
    //进行初始化操作
    self.scrollView = [[UIScrollView alloc] init];
    self.scrollView.frame = CGRectMake(0, 80, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - 320);
  //设置整页滚动
    self.scrollView.pagingEnabled = YES;
    self.scrollView.scrollEnabled = YES;
    self.scrollView.delegate = self;
  //由于我们使用UIPageControl所以，
    self.scrollView.showsHorizontalScrollIndicator = NO;
    
    CGFloat h = [UIScreen mainScreen].bounds.size.height - 320;
    CGFloat w = [UIScreen mainScreen].bounds.size.width;
    self.scrollView.contentSize = CGSizeMake(w * 5, h); // 五个图片设置五个宽度
    
    for (int i = 0; i < 5; i++) {
   
   
        NSString *name = [NSString stringWithFormat:@"%d.jpg", i];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:name]];
        imageView.frame = CGRectMake(i * w, 0, w, h);
        [self.scrollView addSubview:imageView];
    }
    [self.view addSubview:self.scrollView];
}

UIPageControl的实现

对于UIPageControl的实现十分简单，实现如下

- (void)setupPageControl {
   
   
    self.pageControl = [[UIPageControl alloc] init];
    //设置PageControl与滚动视图对齐
    self.pageControl.frame = CGRectMake(0, CGRectGetMaxY(self.scrollView.frame) - 20, CGRectGetWidth(self.scrollView.frame), 20);
    self.pageControl.numberOfPages = 5;
    //设置初始页面
    self.pageControl.currentPage = 0;
    self.pageControl.pageIndicatorTintColor = [UIColor redColor];
    self.pageControl.currentPageIndicatorTintColor = [UIColor blueColor];
    self.pageControl.userInteractionEnabled = NO;
    [self.view addSubview:self.pageControl];
}

那么对于当前位置的UIPageControl显示的变化，我们也要控制下面显示的变化，对于我们显示的变化，我们可以进行更深入的控制，，我们在当前偏移量添加半个视图宽度，这样当我们当前图片偏移量超过半个宽度之后，UIPageControl的位置就会发生变化，就会显得我们的显示更加智能，我们将代码写在scrollViewDidScroll:(UIScrollView *)scrollView之中，这个函数是当UIScrollView发生滚动就会调用。

(void)scrollViewDidScroll:(UIScrollView *)scrollView {
   
   
    CGFloat offSetX = scrollView.contentOffset.x;
    //求取当前页
    CGFloat pageWidth = scrollView.frame.size.width;
    int currentPage = floor((offSetX - pageWidth / 2) / pageWidth) + 1;
    //控制UIPageControl 的当前页
    self.pageControl.currentPage = currentPage;
}

设置NSTimer实现自动移动

我们可以设置一个定时器，使其不断进行视图的替换，我们设置间隔为2秒，每两秒调用翻页的方法，对滚动视图界面进行翻页，需要特殊判断的是，当移动到最后的时候，我们需要将其调到第一个视图。

- (void)setupTimer {
   
   
    //创建定时器
	_timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(nextPage) userInfo:nil repeats:YES];

<