iOS UIScrollView、UIPageControl、NSTimer的使用

为什么80%的码农都做不了架构师？>>>   

要实现的功能：五张图片自动+循环滚动，Page控制器跟随图片变化

首先先声明几个全局变量

//屏幕的宽
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
//我用的图片的尺寸是260*600，为了适应屏幕大小，等比例缩放一下
#define HEIGHT_IMAGE 260*SCREEN_WIDTH/600
@property(nonatomic,strong)UIScrollView *sc;
@property(nonatomic,strong)UIPageControl*pc;
@property(nonatomic,strong)NSTimer*timer;

一. UIScrollView的创建

手机的屏幕是有限的，当想展示的内容超过手机的屏幕范围，就需要通过手势的上下滑动来获取全部内容，UIScrollView是一个能够滚动的视图控件,它的contentSize属性就是告诉UIScrollView所有内容的尺⼨寸,也就是包含了它能滚动到的范围。

1.创建UIScrollView

self.sc=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 14, SCREEN_WIDTH, HEIGHT_IMAGE)];

2.设置实际内容的Size

self.sc.contentSize=CGSizeMake(SCREEN_WIDTH*5, HEIGHT_IMAGE);

3.加载图片

 for (int i=0; i<5; i++) {
//我的图片命名是以img_0+1/2/3/4/5命名的
        NSString*img_name=[NSString stringWithFormat:@"img_0%d",i+1];
        UIImage *image=[UIImage imageNamed:img_name];
//ImageView的X设置为每个页面的起始横坐标
        UIImageView*iv=[[UIImageView alloc]initWithFrame:CGRectMake(i*SCREEN_WIDTH, 14, SCREEN_WIDTH, HEIGHT_IMAGE)];
        iv.image=image;
        [self.sc addSubview:iv];
    }

4.设置按页滚动

self.sc.pagingEnabled=YES;

5.取消显示水平滚动条

sc.showsHorizontalScrollIndicator=NO;

二. UIPageControl的创建

1.创建UIPageControl

self.pc=[[UIPageControl alloc]initWithFrame:CGRectMake(0, 64+HEIGHT_IMAGE-20, SCREEN_WIDTH, 
20)];

2.设置总页数

pc.numberOfPages=5;

3.设置当前索引所在页数

self.pc.currentPage=0;

4.设置默认颜色

self.pc.pageIndicatorTintColor=[UIColor brownColor];

5.设置当前索引所在位置的颜色

self.pc.currentPageIndicatorTintColor=[UIColor orangeColor];

此时虽然生成了页面控制器，但是还无法跟随图片一起滚动

这里介绍两个UIScrollView的方法，首先添加代理

@interface ViewController ()<UIScrollViewDelegate>
sc.delegate = self;

①当用户开始拖拽时响应的方法

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
}

②当动画缓冲结束时相应的方法

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
}

6.设置索引与对应页数图片一致

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//    当前页数=偏移量/屏幕宽度
    int i= scrollView.contentOffset.x/SCREEN_WIDTH;
    self.pc.currentPage=i;
}

三.添加计时器

推送的内容是会自己循环滚动的，不需要一直去用手势操作来获取下一页的信息。

1.创建NSTimer

//     @param NSTimeInterval 倒计时
//     @param target:        self
//     @param selector :     需要响应的方法
//     @param userInfo:      nil
//     @param repeats :      是否重复倒计时
self.timer=[NSTimer timerWithTimeInterval:2 target:self selector:@selector(TimerAction) 
userInfo:nil repeats:YES];

2.把创建的NSTimer加入到NSRunLoop

 // NSRunLoop就是APP本身的计时器
 NSRunLoop*loop=[NSRunLoop mainRunLoop];    
[loop addTimer:self.timer forMode:NSRunLoopCommonModes];

3.在响应的方法中设置自动滚动

-(void)TimerAction{
    if (self.pc.currentPage==4) {
        //最后一页没法往下走，只能回到第一页
        [self.sc setContentOffset:CGPointMake(0, 0) animated:NO];
        self.pc.currentPage=0;
    }else{
        //往下一页走
        self.pc.currentPage++;
        [self.sc setContentOffset:CGPointMake(self.pc.currentPage*SCREEN_WIDTH, 0) 
animated:YES];
    }
}

4.当用户开始拖拽的时候，计时器应该消失

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
   //计时器停止   
   [self.timer invalidate];
}
    //自动停止后，没有再启动的方法,只有重新初始化

四.实现无限滚动

当我们拖拽到最后一页时，再像右进行拖拽，是没有用的，依然停留在最后的页面上，同理，第一页像左拖拽也是如此。无限滚动，即可以从最后一页，像右拖拽，直接回到第一页，第一页像左拖拽，直接来到最后一页。

原理如下：要显示的五张图片记为1~5，放置七张图片，第一张为图片5，最后一张为图片1，通过偏移量设置初始显示的图片为图片1，像左拉时，通过UIScrollView的响应方法，在开始拖拽时，运用偏移量将图片跳转到倒数第二张图片（即图片5），同理可知如何实现向右无限滚动

1.修改实际内容的Size

self.sc.contentSize=CGSizeMake(SCREEN_WIDTH*7, [self heightforimage]);

2.添加7张图片,这里我为了方便我将图片名改为1~7

for (int i=0; i<7; i++) {   
        UIImageView *iv=[[UIImageView alloc]initWithFrame:CGRectMake(SCREEN_WIDTH*i, 0, 
SCREEN_WIDTH, [self heightforimage])];
        iv.image=[UIImage imageNamed:[NSString stringWithFormat:@"%d",i+1]];        
        [self.sc addSubview:iv];  
            }

3.设置初始偏移量

//最初显示的为图片2，即之前的图片1（这里图片2~6分别和之前的图片1~5对应）
self.sc.contentOffset=CGPointMake(SCREEN_WIDTH, 0);

3.通过偏移量实现无限循环

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
//当偏移量x小于屏幕时，表示即将要从图片2拖拽到图片1，这时直接跳转到倒数第二张图片（之前的图片5）
    if (self.sc.contentOffset.x<SCREEN_WIDTH) {
        self.sc.contentOffset=CGPointMake(SCREEN_WIDTH*5, 0);
    }
    if (self.sc.contentOffset.x>SCREEN_WIDTH*5) {
//当偏移量x大于SCREEN_WIDTH*5时，表示即将要从图片6拖拽到图片7，这时直接跳转到正数第二张图片（之前的图片1）
        self.sc.contentOffset=CGPointMake(SCREEN_WIDTH, 0);
    }
}

4..设置索引与对应页数图片一致

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    int i= scrollView.contentOffset.x/(SCREEN_WIDTH);
    if (i==0) {
        self.pc.currentPage=4;
    }else if(i==6){
        self.pc.currentPage=0;
    }else{
        self.pc.currentPage=i-1;}
}

 

转载于:https://my.oschina.net/sgcllr/blog/779722