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

 更新时间:2016年12月05日 10:17:04   作者:YungFan  
这篇文章主要给大家介绍了iOS如何利用UIScrollView实现无限滚动的效果,首先需要说明的是,文本所讲的是一种"笨办法",但是好理解且容易实现,在图片不多的时候用它也无妨。感兴趣的朋友们下面跟着小编一起来学习学习吧。

前言

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

实现步骤

      1、根据需求准备几张图片,在网上找了5张图片,分别命名为 img_01,img_02,img_03,img_04,img_05 。

      2、代码实现,主要分为:添加UIScrollView,添加显示图片,添加UIPageControl,然后监听UIScrollView的滚动,根据滚动的位置来设置UIPageControl,最重要的是对于滚动到两个边缘时要特殊处理一下

代码如下:

#import "ViewController.h"

//屏幕宽度
#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
//图片高度
#define IMG_HEIGHT 180
//要显示的图片总数
#define MAX_SIZE 7

#import "ViewController.h"

@interface ViewController () <UIScrollViewDelegate>

//滚动视图
@property (strong, nonatomic) UIScrollView *loopScrollView;
//指示器
@property (strong, nonatomic) UIPageControl *pageIndicator;
//要展示的图片数组
@property(strong, nonatomic) NSMutableArray *imgArray;

@end

@implementation ViewController

//懒加载数组
-(NSMutableArray *)imgArray
{
  if(_imgArray == nil)
  {
    _imgArray = [[NSMutableArray alloc]initWithCapacity:MAX_SIZE];
    //在要展示的5张图片的前后各加一张图片,第一张前面加第五张,第五张后面加第一张
    [_imgArray addObject:[UIImage imageNamed:@"img_05.jpg"]];
    for (int i = 1; i< MAX_SIZE - 1; i++) {
      NSString *imgName = [[NSString alloc]initWithFormat:@"img_0%d.jpg", i];
      [_imgArray addObject:[UIImage imageNamed:imgName]];
    }
    [_imgArray addObject:[UIImage imageNamed:@"img_01.jpg"]];

  }
  return _imgArray;
}


- (void)viewDidLoad {
  [super viewDidLoad];

  [self setupScrollView];
  [self setupPageControl];

}

/**
 * 创建UIScrollView并设置其属性
 */
-(void)setupScrollView
{
  UIScrollView *sc = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, SCREEN_WIDTH, IMG_HEIGHT)];

  //创建UIImageView并添加到UIScrollView中
  for (int i = 0; i< MAX_SIZE; i++) {
    UIImageView *img = [[UIImageView alloc]initWithImage:[self.imgArray objectAtIndex:i]];
    img.frame = CGRectMake(SCREEN_WIDTH * i, 0, SCREEN_WIDTH, IMG_HEIGHT);
    [sc addSubview:img];
  }

  //设置UIScrollView的属性
  sc.contentSize = CGSizeMake(SCREEN_WIDTH * self.imgArray.count, IMG_HEIGHT);
  sc.showsHorizontalScrollIndicator = NO;
  sc.pagingEnabled = YES;
  //刚开始应该滚动到第二张显示,因为第一张其实是最后一张图片
  [sc setContentOffset:CGPointMake(SCREEN_WIDTH, 0) animated:NO];


  //设置代理并添加到当前view中
  sc.delegate = self;
  [self.view addSubview:sc];

  self.loopScrollView = sc;
}


/**
 * 创建UIPageControl并设置其属性
 */
-(void)setupPageControl
{
  //注意frame,这样设置可以居中显示
  UIPageControl *pc = [[UIPageControl alloc]initWithFrame:CGRectMake(self.view.center.x - 50, CGRectGetMaxY(self.loopScrollView.frame) - 25 , 100, 25)];
  //设置UIPageControl的属性并添加到当前view中
  pc.numberOfPages = MAX_SIZE - 2;
  pc.currentPage = 0;
  pc.pageIndicatorTintColor = [UIColor redColor];
  [self.view addSubview:pc];

  self.pageIndicator = pc;

}

//UIScrollView的代理方法,在该方法中改变UIPageControl并且处理边缘滚动
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
  //获取当前UIScrollView的位置
  CGPoint offset = [scrollView contentOffset];
  //算出滚动到第几页
  int currentPage = offset.x/SCREEN_WIDTH;
  //设置UIPageControl
  self.pageIndicator.currentPage = currentPage - 1;
  //对最后一张和第一张要进行特殊处理
  //1、如果是第一张
  if (currentPage == 0) {
    //下面两个方法任选其一都可以达到效果,但是注意动画一定要设置为NO,不然会有视觉会有辣眼睛的感觉
    //方法1
    [self.loopScrollView setContentOffset:CGPointMake(SCREEN_WIDTH * (MAX_SIZE-2), 0) animated:NO];
    //方法2,该方法要求设置contentSize时,任一方向就算不滚动也不能为0,否则无效
    //[self.loopScrollView scrollRectToVisible:CGRectMake(SCREEN_WIDTH * (MAX_SIZE-2), 0, SCREEN_WIDTH, IMG_HEIGHT) animated:NO];
    self.pageIndicator.currentPage = MAX_SIZE - 2;
  }

  //2、如果是最后一张
  else if(currentPage == MAX_SIZE - 1) {
    [self.loopScrollView setContentOffset:CGPointMake(SCREEN_WIDTH, 0) animated:NO];
    //[self.loopScrollView scrollRectToVisible:CGRectMake(SCREEN_WIDTH, 0, SCREEN_WIDTH, IMG_HEIGHT) animated:NO];
    self.pageIndicator.currentPage = 0;
  }
}

@end

实现效果

总结

好了,以上就是这篇文章的全部内容了,其实实现轮播现在最好的方案应该是使用UICollectionView,因为它是利用重用机制来实现的,性能会好很多,代码写起来类似。希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • 详解ios中自定义cell,自定义UITableViewCell

    详解ios中自定义cell,自定义UITableViewCell

    本篇文章主要介绍了ios中自定义cell,自定义UITableViewCell,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12
  • Objective-C const常量的优雅使用方法

    Objective-C const常量的优雅使用方法

    这篇文章主要为大家介绍了Objective-C const常量的优雅使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • iOS的CoreAnimation开发框架中的Layer层动画制作解析

    iOS的CoreAnimation开发框架中的Layer层动画制作解析

    在iOS中UIView层的属性会映射到CoreAnimation框架的CALayer,这里我们来看一下iOS的CoreAnimation开发框架中的Layer层动画制作解析,需要的朋友可以参考下
    2016-07-07
  • iOS自定义UITableView实现不同系统下的左滑删除功能详解

    iOS自定义UITableView实现不同系统下的左滑删除功能详解

    关于左滑删除这块,相信不少朋友都遇到过。下面这篇文章主要给大家介绍了关于iOS如何自定义UITableView实现不同系统下的左滑删除功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-09-09
  • iOS 清除xcode缓存和生成文件的方法

    iOS 清除xcode缓存和生成文件的方法

    下面小编就为大家分享一篇iOS 清除xcode缓存和生成文件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • iOS中屏幕亮度与闪光灯控制详解

    iOS中屏幕亮度与闪光灯控制详解

    这篇文章主要给大家介绍了关于iOS中屏幕亮度与闪光灯控制的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • iOS设置圆角的4种方法实例(附性能评测)

    iOS设置圆角的4种方法实例(附性能评测)

    这篇文章主要给大家介绍了关于iOS设置圆角的4种方法,并给大家附上了性能评测,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • iOS常用组件之高效切圆角的方法汇总

    iOS常用组件之高效切圆角的方法汇总

    最近在研究切圆角的方法,也找了下网上的资料,所以下面这篇文章主要给大家总结介绍了关于iOS常用组件之高效切圆角的一些方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • IOS 基础之设置 tableview 的分割线

    IOS 基础之设置 tableview 的分割线

    这篇文章主要介绍了IOS 基础之设置 tableview 的分割线的相关资料,需要的朋友可以参考下
    2017-03-03
  • iOS 二维码生成及扫码详解及实例代码

    iOS 二维码生成及扫码详解及实例代码

    这篇文章主要介绍了iOS 二维码生成及扫码详解及实例代码的相关资料,需要的朋友可以参考下
    2016-12-12

最新评论