一个有两秒轮询滚动的scrollView

最新推荐文章于 2025-07-19 11:37:07 发布

原创最新推荐文章于 2025-07-19 11:37:07 发布 · 602 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scrollView #轮询 #滚动

本文介绍了一个两秒轮播的scrollView实现方案，通过定时器控制scrollView每两秒滚动一张图片，适用于iOS应用中的轮播广告或展示场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里做的是一个有两秒轮询滚动的scrollView，就是每隔两秒，scrollView上面的图片就会换一次，下面是代码讲解。

1、首先创建一个scrollView和准备5张本地照片，也可以是网络照片数据，存放到array中，因为要让他滚动，所以你当前显示第一张图片的时候，往左滑要显示最后一张图片，所以需要分别再头部插入最后一张图片数据，和在尾部插入第一张图片数据

<p class="p1"><span class="s1">//</span><span class="s2">创建一个</span><span class="s1">scrollview</span></p><p class="p2"><span class="s3">    </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3"> = [[</span><span class="s5">UIScrollView</span><span class="s3"> </span><span class="s1">alloc</span><span class="s3">]</span><span class="s1">init</span><span class="s3">];</span></p><p class="p3"><span class="s1">    </span></p><p class="p2"><span class="s3">    </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">frame</span><span class="s3"> = </span><span class="s1">CGRectMake</span><span class="s3">(</span><span class="s4">0</span><span class="s3">, </span><span class="s4">0</span><span class="s3">, </span><span class="s4">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">, </span><span class="s4">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">height</span><span class="s3">);</span></p><p class="p3"><span class="s1">    </span></p><p class="p2"><span class="s3">    </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">delegate</span><span class="s3"> = </span><span class="s4">self</span><span class="s3">;</span></p><p class="p3"><span class="s1">    </span></p><p class="p2"><span class="s3">    </span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">backgroundColor</span><span class="s3"> = [</span><span class="s5">UIColor</span><span class="s3"> </span><span class="s1">greenColor</span><span class="s3">];</span></p><p class="p3"><span class="s1">    </span></p><p class="p2"><span class="s3">    [</span><span class="s4">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3"> </span><span class="s1">addSubview</span><span class="s3">:</span><span class="s4">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">];</span></p><p class="p3"><span class="s1">    </span></p><p class="p4"><span class="s6">    </span><span class="s7">//</span><span class="s1">准备图片素材（共</span><span class="s7">5</span><span class="s1">张）</span></p><p class="p5"><span class="s3">    </span><span class="s5">NSArray</span><span class="s3"> *array = </span><span class="s4">@[</span><span class="s1">@"apic16466.jpg"</span><span class="s3">,</span><span class="s1">@"apic16892.jpg"</span><span class="s3">,</span><span class="s1">@"144833361155.jpg"</span><span class="s3">,</span><span class="s1">@"1448333704435.jpg"</span><span class="s3">,</span><span class="s1">@"1448589211477.jpg"</span><span class="s4">]</span><span class="s3">;</span></p><p class="p2"><span class="s3">    </span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3"> = [[</span><span class="s5">NSMutableArray</span><span class="s3"> </span><span class="s1">alloc</span><span class="s3">]</span><span class="s1">initWithArray</span><span class="s3">:array];</span></p><p class="p2"><span class="s3">    </span><span class="s4">if</span><span class="s3"> (</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3">.</span><span class="s1">count</span><span class="s3"> > </span><span class="s4">0</span><span class="s3">) {</span></p><p class="p4"><span class="s6">        </span><span class="s7">//</span><span class="s1">在头部插入最后一张图片</span></p><p class="p2"><span class="s3">        [</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3"> </span><span class="s1">insertObject</span><span class="s3">:</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3">.</span><span class="s1">lastObject</span><span class="s3"> </span><span class="s1">atIndex</span><span class="s3">:</span><span class="s4">0</span><span class="s3">];</span></p><p class="p1"><span class="s3">        </span><span class="s1">//</span><span class="s2">在尾部插入第一张图片</span></p><p class="p2"><span class="s3">        [</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3"> </span><span class="s1">addObject</span><span class="s3">:</span><span class="s4">self</span><span class="s3">.</span><span class="s1">photoArray</span><span class="s3">[</span><span class="s4">1</span><span class="s3">]];</span></p><p class="p6"><span class="s1">    }</span></p>

2、把图片加载到scrollView上，并设置scrollView的效果，还记得要实现setContentSize和setContentOffset这两个方法，分别设置scrollView的实际内容大小和显示初始位置

//设置内容图片
    for (int i = 0; i < _photoArray.count; i ++) {
        UIImageView *imageView = [[UIImageView alloc]init];
        
        imageView.frame = CGRectMake(i * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height);
        
        imageView.image = [UIImage imageNamed:_photoArray[i]];
        
        [self.myScrollview addSubview:imageView];
    }
    //设置scrollview的实际内容大小
    [self.myScrollview setContentSize:CGSizeMake(self.view.frame.size.width * _photoArray.count, self.view.frame.size.height)];
    //设置分页
    self.myScrollview.pagingEnabled = YES;
    //去除滚动条效果
    self.myScrollview.showsHorizontalScrollIndicator = NO;
    
    //是否反弹
    self.myScrollview.bounces = YES;
    
    //设置初始显示位置，很重要
    [self.myScrollview setContentOffset:CGPointMake(self.view.frame.size.width, 0)];

3、给scrollView加一个滚动计时器

-(void)setScrolTimer{
    //每隔两秒滚动ScrollView
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(scrolMainScrollView) userInfo:nil repeats:YES];
}

<p class="p1"><span class="s1">-(</span><span class="s2">void</span><span class="s1">)scrolMainScrollView{</span></p><p class="p2"><span class="s3">    </span><span class="s2">float</span><span class="s3"> currentX = </span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">contentOffset</span><span class="s3">.</span><span class="s1">x</span><span class="s3"> + </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">;</span></p><p class="p3"><span class="s4">    </span><span class="s5">//</span><span class="s1">滚动到某个位置</span></p><p class="p4"><span class="s3">    </span><span class="s1">//CGRect</span><span class="s6">设置将要滚动到得地方</span></p><p class="p4"><span class="s3">    </span><span class="s1">//animated</span><span class="s6">设置是否需要滚动动画</span></p><p class="p2"><span class="s3">    [</span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3"> </span><span class="s1">scrollRectToVisible</span><span class="s3">:</span><span class="s1">CGRectMake</span><span class="s3">(currentX, </span><span class="s2">0</span><span class="s3">, </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">, </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">height</span><span class="s3">) </span><span class="s1">animated</span><span class="s3">:</span><span class="s2">YES</span><span class="s3">];</span></p><p class="p5"><span class="s1">    </span></p><p class="p4"><span class="s3">    </span><span class="s1">//</span><span class="s6">制作一个延时改变</span><span class="s1">timer</span></p><p class="p5"><span class="s1">    </span></p><p class="p4"><span class="s3">    </span><span class="s1">//</span><span class="s6">在重新生成</span><span class="s1">timer</span><span class="s6">前，把之前使用的</span><span class="s1">timer</span><span class="s6">销毁</span></p><p class="p1"><span class="s1">    </span><span class="s2">if</span><span class="s1"> (</span><span class="s2">self</span><span class="s1">.</span><span class="s7">delaytimer</span><span class="s1">) {</span></p><p class="p2"><span class="s3">        [</span><span class="s2">self</span><span class="s3">.</span><span class="s1">delaytimer</span><span class="s3"> </span><span class="s1">invalidate</span><span class="s3">];</span></p><p class="p1"><span class="s1">        </span><span class="s2">self</span><span class="s1">.</span><span class="s7">delaytimer</span><span class="s1"> = </span><span class="s2">nil</span><span class="s1">;</span></p><p class="p1"><span class="s1">    }</span></p><p class="p5"><span class="s1">    </span></p><p class="p2"><span class="s3">    </span><span class="s2">self</span><span class="s3">.</span><span class="s1">delaytimer</span><span class="s3"> = [</span><span class="s8">NSTimer</span><span class="s3"> </span><span class="s1">scheduledTimerWithTimeInterval</span><span class="s3">:</span><span class="s2">0.7</span><span class="s3"> </span><span class="s1">target</span><span class="s3">:</span><span class="s2">self</span><span class="s3"> </span><span class="s1">selector</span><span class="s3">:</span><span class="s2">@selector</span><span class="s3">(delayTimerValueChange) </span><span class="s1">userInfo</span><span class="s3">:</span><span class="s2">nil</span><span class="s3"> </span><span class="s1">repeats</span><span class="s3">:</span><span class="s2">NO</span><span class="s3">];</span></p><p class="p5"><span class="s1">    </span></p><p class="p3"><span class="s4">    </span><span class="s5">//</span><span class="s1">当跑到第</span><span class="s5">2</span><span class="s1">张图片时，在动画开始前，直接把</span><span class="s5">scrollView</span><span class="s1">的位置返回到第一张图片中</span></p><p class="p1"><span class="s1">    </span><span class="s2">if</span><span class="s1"> (currentX >= (</span><span class="s2">self</span><span class="s1">.</span><span class="s7">photoArray</span><span class="s1">.</span><span class="s7">count</span><span class="s1"> - </span><span class="s2">1</span><span class="s1">) * </span><span class="s2">self</span><span class="s1">.</span><span class="s7">view</span><span class="s1">.</span><span class="s7">frame</span><span class="s1">.</span><span class="s7">size</span><span class="s1">.</span><span class="s7">width</span><span class="s1">) {</span></p><p class="p2"><span class="s3">        [</span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3"> </span><span class="s1">setContentOffset</span><span class="s3">:</span><span class="s1">CGPointMake</span><span class="s3">(</span><span class="s2">0</span><span class="s3">, </span><span class="s2">0</span><span class="s3">)];</span></p><p class="p1"><span class="s1">    }</span></p><p class="p1"><span class="s1">}</span></p><p class="p1"><span class="s1">-(</span><span class="s2">void</span><span class="s1">)delayTimerValueChange{</span></p><p class="p2"><span class="s3">    [</span><span class="s2">self</span><span class="s3"> </span><span class="s1">changePageValue</span><span class="s3">];</span></p><p class="p1"><span class="s1">}</span></p><p class="p3"><span class="s1"></span>
</p><p class="p1"><span class="s1">-(</span><span class="s2">void</span><span class="s1">)changePageValue{</span></p><p class="p4"><span class="s4">    </span><span class="s5">//</span><span class="s1">计算当前的页码</span></p><p class="p2"><span class="s3">    </span><span class="s2">int</span><span class="s3"> page = </span><span class="s2">self</span><span class="s3">.</span><span class="s1">myScrollview</span><span class="s3">.</span><span class="s1">contentOffset</span><span class="s3">.</span><span class="s1">x</span><span class="s3"> / </span><span class="s2">self</span><span class="s3">.</span><span class="s1">view</span><span class="s3">.</span><span class="s1">frame</span><span class="s3">.</span><span class="s1">size</span><span class="s3">.</span><span class="s1">width</span><span class="s3">;</span></p><p class="p3"><span class="s1">    </span></p><p class="p1"><span class="s1">    </span><span class="s2">if</span><span class="s1"> (page == </span><span class="s2">0</span><span class="s1">) {</span></p><p class="p1"><span class="s1">        page = (</span><span class="s2">int</span><span class="s1">)(</span><span class="s2">self</span><span class="s1">.</span><span class="s6">photoArray</span><span class="s1">.</span><span class="s6">count</span><span class="s1"> - </span><span class="s2">3</span><span class="s1">);</span></p><p class="p1"><span class="s1">    }</span><span class="s2">else</span><span class="s1"> </span><span class="s2">if</span><span class="s1"> (page == (</span><span class="s2">self</span><span class="s1">.</span><span class="s6">photoArray</span><span class="s1">.</span><span class="s6">count</span><span class="s1"> - </span><span class="s2">1</span><span class="s1">)){</span></p><p class="p1"><span class="s1">        page = </span><span class="s2">0</span><span class="s1">;</span></p><p class="p1"><span class="s1">    }</span><span class="s2">else</span><span class="s1">{</span></p><p class="p1"><span class="s1">        page --;</span></p><p class="p1"><span class="s1">    }</span></p><p class="p3"><span class="s1">    </span></p><p class="p5"><span class="s3">    </span><span class="s1">//currentPage</span><span class="s7">取值</span><span class="s1">0~4</span></p><p class="p2"><span class="s3">    </span><span class="s2">self</span><span class="s3">.</span><span class="s1">scrollPageControl</span><span class="s3">.</span><span class="s1">currentPage</span><span class="s3"> = page;</span></p><p class="p1"><span class="s1">}</span></p>

4、实现scrollView的代理方法

#pragma mark - scrollViewDelegate
//scrollview开始拖动
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    //在拖拽时，销毁滚动视图的时间timer
    [self.timer invalidate];
}
//scrollview结束拖动
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    //设置到最后一个界面（假1）时返回到第一个界面（真1）
    if (scrollView.contentOffset.x >= self.view.frame.size.width * (self.photoArray.count - 1)) {
        if (decelerate == NO) {
            //回到第一个界面
            [scrollView setContentOffset:CGPointMake(self.view.frame.size.width, 0)];
        }
    }
    
    if (scrollView.contentOffset.x <= 0) {
        if (decelerate == NO) {
            //回到最后一个界面
            [scrollView setContentOffset:CGPointMake(self.view.frame.size.width * (self.photoArray.count - 2), 0)];
        }
    }
    
    [self changePageValue];
    
    //重新开启时间滚动scrollView
    [self setScrolTimer];
}
//scrollview减速停止
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    if (scrollView.contentOffset.x >= self.view.frame.size.width * (self.photoArray.count - 1)) {
        //回到第一个界面
        [scrollView setContentOffset:CGPointMake(self.view.frame.size.width, 0)];
    }
    if (scrollView.contentOffset.x <= 0) {
        //回到最后一个界面
        [scrollView setContentOffset:CGPointMake(self.view.frame.size.width * (self.photoArray.count - 2), 0)];
    }
    
    //调用改变页码的方法
    [self changePageValue];
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (scrollView.contentOffset.x >= self.view.frame.size.width * (self.photoArray.count - 1)) {
        //回到第一个界面
        [scrollView setContentOffset:CGPointMake(self.view.frame.size.width, 0)];
    }
    if (scrollView.contentOffset.x <= 0) {
        //回到最后一个界面
        [scrollView setContentOffset:CGPointMake(self.view.frame.size.width * (self.photoArray.count - 2), 0)];
    }
    
    //调用改变页码的方法
    [self changePageValue];
}

5、给scrollView添加一个UIPageControl

#pragma mark - 创建一个UIPageControl
-(void)setPageControl{
    self.scrollPageControl = [[UIPageControl alloc]init];
    
    self.scrollPageControl.frame = CGRectMake(100, self.view.frame.size.height - 70, 120, 50);
    //改变UIPageControl颜色
//    self.scrollPageControl.currentPageIndicatorTintColor = [UIColor blackColor];
//    
//    self.scrollPageControl.pageIndicatorTintColor = [UIColor blueColor];
    
    [self.view addSubview:self.scrollPageControl];
    
    //设置pageControl属性
    //设置page总页数
    self.scrollPageControl.numberOfPages = 5;
    //设置当前页数
    self.scrollPageControl.currentPage = 0;
    
    //当pageControl的值改变时调用这个方法（用户触发）
    [self.scrollPageControl addTarget:self action:@selector(pageControlValueChange) forControlEvents:UIControlEventValueChanged];
}

-(void)pageControlValueChange{
    [self.myScrollview scrollRectToVisible:CGRectMake((self.scrollPageControl.currentPage + 1) * self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height) animated:YES];
    
    //关掉时间
    [self.timer invalidate];
    
    //在重新生成timer前，把之前使用的timer销毁
    if (self.delaytimer2) {
        [self.delaytimer2 invalidate];
        self.delaytimer2 = nil;
    }
    
    //相隔0.7秒重新恢复时间滚动scrollView
    self.delaytimer2 = [NSTimer scheduledTimerWithTimeInterval:0.7 target:self selector:@selector(setScrolTimer) userInfo:nil repeats:NO];
}

源码地址： https://github.com/mooner2122/scrollview-2seconds-scroll