iOS使用UIScrollView实现无限循环轮播图效果

本文实例为大家分享了iOS使用UIScrollView实现无限循环轮播图的具体代码,供大家参考,具体内容如下

代码:

//
// ViewController.m
// 无限轮播
//
// Created by limin on 17/8/23.
// Copyright © 2017年 none. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
/* 定时器 */
@property(nonatomic,strong)NSTimer *rotateTimer;
/* */
@property(nonatomic,strong)UIPageControl *myPageControl;
@end

@implementation ViewController

- (void)viewDidLoad {
 [super viewDidLoad];
 //初始化scroolview大小为屏幕大小
 UIScrollView *rotateScrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];
 //设置滚动范围
 rotateScrollView.contentSize = CGSizeMake(CGRectGetWidth(self.view.frame)*3, CGRectGetHeight(self.view.frame));
 //设置分页效果
 rotateScrollView.pagingEnabled = YES;
 //水平滚动条隐藏
 rotateScrollView.showsHorizontalScrollIndicator = NO;
 //添加三个子视图,uilabel类型
 for (int i=0; i<3; i++) {
  UILabel *subLabel = [[UILabel alloc] initWithFrame:CGRectMake(CGRectGetWidth(self.view.frame)*i, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
  subLabel.tag = 1000+i;
  subLabel.text = [NSString stringWithFormat:@"我是第%d个视图",i];
  [subLabel setFont:[UIFont systemFontOfSize:80]];
  subLabel.adjustsFontSizeToFitWidth = YES;
  [subLabel setBackgroundColor:[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1.0]];
  [rotateScrollView addSubview:subLabel];

 }
 UILabel *tempLabel = [rotateScrollView viewWithTag:1000];
 //为滚动视图的右边添加一个视图,使得它和第一个视图一模一样。
 UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.view.frame)*3, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];
 label.backgroundColor = tempLabel.backgroundColor;
 label.text = tempLabel.text;
 label.font = tempLabel.font;
 label.adjustsFontSizeToFitWidth = YES;
 [rotateScrollView addSubview:label];
 [self.view addSubview:rotateScrollView];
 rotateScrollView.tag = 1000;
 self.myPageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, CGRectGetHeight(self.view.frame)-50, CGRectGetWidth(self.view.frame), 50)];
 self.myPageControl.numberOfPages = 3;
 self.myPageControl.currentPage = 0;
 [self.view addSubview:self.myPageControl];

 //启动定时器
 self.rotateTimer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(changeView) userInfo:nil repeats:YES];
 //为滚动视图指定代理
 rotateScrollView.delegate = self;
}

#pragma mark -- 滚动视图的代理方法
//开始拖拽的代理方法,在此方法中暂停定时器。
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
 NSLog(@"正在拖拽视图,所以需要将自动播放暂停掉");
 //setFireDate:设置定时器在什么时间启动
 //[NSDate distantFuture]:将来的某一时刻
 [self.rotateTimer setFireDate:[NSDate distantFuture]];
}

//视图静止时(没有人在拖拽),开启定时器,让自动轮播
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
 //视图静止之后,过1.5秒在开启定时器
 //[NSDate dateWithTimeInterval:1.5 sinceDate:[NSDate date]] 返回值为从现在时刻开始 再过1.5秒的时刻。
 NSLog(@"开启定时器");
 [self.rotateTimer setFireDate:[NSDate dateWithTimeInterval:1.5 sinceDate:[NSDate date]]];
}

//定时器的回调方法 切换界面
- (void)changeView{
 //得到scrollView
 UIScrollView *scrollView = [self.view viewWithTag:1000];
 //通过改变contentOffset来切换滚动视图的子界面
 float offset_X = scrollView.contentOffset.x;
 //每次切换一个屏幕
 offset_X += CGRectGetWidth(self.view.frame);

 //说明要从最右边的多余视图开始滚动了,最右边的多余视图实际上就是第一个视图。所以偏移量需要更改为第一个视图的偏移量。
 if (offset_X > CGRectGetWidth(self.view.frame)*3) {
  scrollView.contentOffset = CGPointMake(0, 0);

 }
 //说明正在显示的就是最右边的多余视图,最右边的多余视图实际上就是第一个视图。所以pageControl的小白点需要在第一个视图的位置。
 if (offset_X == CGRectGetWidth(self.view.frame)*3) {
  self.myPageControl.currentPage = 0;
 }else{
  self.myPageControl.currentPage = offset_X/CGRectGetWidth(self.view.frame);
 }

 //得到最终的偏移量
 CGPoint resultPoint = CGPointMake(offset_X, 0);
 //切换视图时带动画效果
 //最右边的多余视图实际上就是第一个视图,现在是要从第一个视图向第二个视图偏移,所以偏移量为一个屏幕宽度
 if (offset_X >CGRectGetWidth(self.view.frame)*3) {
  self.myPageControl.currentPage = 1;
  [scrollView setContentOffset:CGPointMake(CGRectGetWidth(self.view.frame), 0) animated:YES];
 }else{
  [scrollView setContentOffset:resultPoint animated:YES];
 }

}

- (void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
}

@end

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS中UIScrollView嵌套UITableView的实践教程

    前言 最近因为工作项目中需要用到UIScrollView嵌套UItableView嵌套交互问题,顺便网上搜了下的demo,发现实现的效果并不是很理想,滑动偶尔会有延迟现象,所以自己想了个办法,顺便把自己实现写了个demo分享出来,一起来看看吧. 实现过程 最底部放置的为一个UIScrollView,设置ScrollView的contentSize属性,使可以发生横向滚动,同时隐藏横向滚动条,设置代理为当前控制器本身.然后,在最底部的UIScrollView上放置2个UITableView,因为只

  • iOS开发中使用UIScrollView实现无限循环的图片浏览器

    一.概述 UIKit框架中有大量的控件供开发者使用,在iOS开发中不仅可以直接使用这些控件还可以在这些控件的基础上进行扩展打造自己的控件.在这个系列中如果每个控件都介绍一遍确实没有必要,所谓授人以鱼不如授人以渔,这里会尽可能让大家明白其中的原理,找一些典型的控件进行说明,这样一来大家就可以触类旁通.今天我们主要来看一下UIScrollView的内容: UIView UIScrollView 实战--图片浏览器 二.UIView 在熟悉UIScrollView之前很有必要说一下UIView的内容.

  • iOS应用开发中UIScrollView滚动视图的基本用法总结

    在项目开发时遇到一个问题,我在UIViewController上面直接创建了一个UIScrollerView,把UIScrollerView作为一个子视图添加到了UIViewController, 又再UIScrollerView中添加了一个UISlider的组件,在手势滑动的过程中,很难滑动到UISlider这个控件,经常是滑动的时候UIScrollerView进行了滚动, 而UISlider这个控件没有滑动,让人很抓狂. 上网具体去了解了一下UIScrollerView的详解,终于彻底明白了

  • iOS利用UIScrollView实现无限滚动效果

    前言 众所周知UIScrollView 的无限滚动主要应用在图片轮播器.欢迎界面等场景.它的原理是在要显示的图片前后各加一张图片即在第一张图片之前放最后一张图片,在最后一张图片之后放第一张图片,然后在滚动到边缘的时候,巧妙的过渡一下就可以"瞒天过海","以假乱真"的造成无限滚动的假象.网络上有很多只用三张或两张图片实现的方法,效率比这个方法高,但实现起来稍微麻烦一点,有兴趣的可以去深入研究. 实现步骤 1.根据需求准备几张图片,在网上找了5张图片,分别命名为 img

  • iOS UIScrollView滚动视图/无限循环滚动/自动滚动的实例代码

    我们都知道UIScrollView有一种很流畅的切换效果,结合UIPageControl的辅助展示效果,就可以完成一个很不错的产品介绍功能页面.下面给大家分享iOS UIScrollView滚动视图/无限循环滚动/自动滚动功能,具体代码如下所示: <UIScrollViewDelegate> #define WIDTH [[UIScreen mainScreen] bounds].size.width #define HEIGHT [[UIScreen mainScreen] bounds].

  • iOS开发中使用UIScrollView实现图片轮播和点击加载

    UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播 二.实现代码 storyboard中布局 代码: 复制代码 代码如下: #import "YYViewController.h" @interface YYViewController () <UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollview; /**  *  页码  */ @pro

  • iOS应用开发中使用UIScrollView控件来实现图片缩放

    一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 2.UIScrollV

  • IOS开发之UIScrollView实现图片轮播器的无限滚动

    IOS开发之UIScrollView实现图片轮播器的无限滚动 简介 在现在的一些App中常常见到图片轮播器,一般用于展示广告.新闻等数据,在iOS内并没有现成的控件直接实现这种功能,但是通过UIScrollView的允许分页设置,可以实现滚动轮播的功能. 轮播原理 UIScrollView对象有pagingEnable成员,如果设置为YES,那么每一个scrollView尺寸这么大的区域就会被当作一页,在滚动时会根据滚动的比例自动计算应该切换到哪一页. 无限滚动原理 要实现无限滚动,需要额外的两

  • iOS自定义UIScrollView的滚动条实例代码

    UIScrollView有自己默认的滚动条,可设置隐藏和显示,但是有时候这个默认的滚动条没办法满足我们的需求,那这时候只能通过自定义来实现了. 实现自定义滚动条需要解决的主要问题是: 在scrollview滚动的过程中如何改变滚动条的位置,进而确保滚动条和scrollView在相同时间内走完自己的位移,只要把这个问题解决好了,那我们就可以优雅的自定义滚动条了. 那如何解决这个滚动条的当前滚动位移呢?我们知道,UIScrollView有一个滚动范围,滚动条也有一个滚动范围,也就是说两者的最大的滚动

  • iOS实现UIScrollView的无限轮播功能(原理)详解

    前言 同学们在写需求的时候肯定会时常用到UIScrollView. UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5) 举例:手机上的"设置"

随机推荐