iOS UIScrollView、UIPageControl、NSTimer的使用

深碍√TFBOYSˉ_ 2022-01-15 16:07 266阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][]

要实现的功能：五张图片自动+循环滚动，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所有内容的尺⼨寸,也就是包含了它能滚动到的范围。

![103712_rWkM_2886189.png][]

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的创建

![110141_xbYt_2886189.png][]![110258_L57e_2886189.png][]

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），同理可知如何实现向右无限滚动

![121352_O5oO_2886189.png][]

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

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/f2488077f6e8422a99a074c8120f4ffe.png
[103712_rWkM_2886189.png]: /images/20220115/d3c47ff37f124a468c6ddd1ad18db8ae.png
[110141_xbYt_2886189.png]: http://static.oschina.net/uploads/space/2016/1102/110141_xbYt_2886189.png
[110258_L57e_2886189.png]: /images/20220115/b3cc5c523a424ff195c4d60846d6ecfb.png
[121352_O5oO_2886189.png]: /images/20220115/1090f049e0c74cacac257d1249ee78e5.png