当前位置: 移动技术网 > IT编程>移动开发>IOS > iOS利用UIScrollView实现无限滚动效果

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

2019年07月24日  | 移动技术网IT编程  | 我要评论

海丰县,神话放送e37,爱情电影网站apdy香织

前言

众所周知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 uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
移动技术网