iOS中无限循环滚动简单处理实现原理分析

说下原理:

1./*初始化/

+ (instancetype)loopScrollViewWithFrame:(CGRect)frame;

将背景collectinview视图初始化设置 代理和数据源 、 布局

2.在激活initwithFrame后触发 layoutSubviews

 //默认滚动到要显示的第一张图片
 if (self.imageCollectionView.contentOffset.x == 0) {
  NSIndexPath *indexPath = [NSIndexPath indexPathForItem:1 inSection:0];
  [self scrollToIndexPath:indexPath animated:NO];
  self.currentIndex = 1;
}

界面展示出来的时候默认 显示 真实下标也就是从1开始

设置真实数据源 imageList ,然后展示 的 数据源是loopImageList 这里 呢 多出2个对象,0和末尾,设置时 最后 和 起始,setImageList如下

- (void)setImageList:(NSMutableArray *)imageList {
 _imageList = imageList;
 self.loopImageList = [NSMutableArray arrayWithArray:imageList];
 if (imageList.count>0) {
  [self.loopImageList insertObject:[imageList lastObject] atIndex:0];
  [self.loopImageList addObject:[imageList objectAtIndex:0]];
 }
}

核心代码和思路

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 CGFloat width = self.bounds.size.width;
 //在loopImageList中,有n+2个对象,因此index取offset.x/width后的整数
 NSInteger index = scrollView.contentOffset.x/width;
 //这个比值很重要
 CGFloat ratio = scrollView.contentOffset.x/width;
 //从显示的最后一张往后滚,自动跳转到显示的第一张
 if (index == self.loopImageList.count-1) {
  self.currentIndex = 1;
  NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.currentIndex inSection:0];
  [self scrollToIndexPath:indexPath animated:NO];
  return;
 }
 //从显示的第一张往前滚,自动跳转到显示的最后一张
 //这里判断条件为contentOffset.x和宽的比值,在往前滚快要结束的时候,能达到无缝切换到显示的最后一张的效果
 if (ratio <= 0.01) {
  self.currentIndex = self.imageList.count;
  NSIndexPath *indexPath = [NSIndexPath indexPathForItem:self.currentIndex inSection:0];
  [self scrollToIndexPath:indexPath animated:NO];
  return;
 }
 if (self.currentIndex != index) {
  self.currentIndex = index;
 }
 NSLog(@"currentIndex = %ld",self.currentIndex);
}

这里的原因是为什么呢?

这时候在图滚动 执行代理 监听的时候 ,我们的collectionview有设置 pageEnable 分页属性很关键有分页动画。

当偏移量判断 真实的数据显示到了最后一张。也就是8 滚到1的时候 ,设置回滚 ,回到默认位置,且没有动画。

另外一步处理当偏移量 小于 一个极小值 也就是 偏移即将到达 0 的是偶也就是 真实的第一张回滚到最后 一张的时候,设置默认滚动到最后一张。

最重要的一点 这个黑科技 是使用scro 滚动到特定的item所以 在触发的那一时刻,item就设定死了,scrollViewDidScroll:也就不会再滚动,因为现在的偏移量是一个唯一值。

总结

以上所述是小编给大家介绍的iOS中无限循环滚动简单处理实现原理分析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • iOS实现无限循环图片轮播器的封装

    项目中很多时候会碰到这个需求,实现多张图片的无限循环轮转,以前做过,项目中几个地方的都用到了,当时没有封装,几个地方都拷贝几乎一样的代码,代码复用性不好,今天没事封装了一下,使用起来比较简单. 首先,说说我实现循环轮转图片的思想,在UIScrollView中添加了3个UIImageView,并排排列,我们看到的永远只是第二个UIImageView,这样的话,你一直可以向左,向右滑动,当你向左滑动是,这是你滑动到了最后一个UIImageView不能在向左边滑动了,这时,我在后面悄悄的将第二个UII

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

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

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

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

  • IOS实现图片轮播无限循环效果

    本文接着上篇文章进行叙述讲解,主要为大家分享了图片轮播无限循环效果的实现方法,具体内容如下 之前说到第一个问题,ScrollView移动到最后一张图片时无法移动了,这是因为ScrollView已经移动到最后,而图片又是依次排列,自然也就无法移动. 解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边

  • iOS实现无限循环滚动的TableView实战教程

    前言 本文主要给大家介绍了如何实现一个可以无限循环的TableView的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍吧. 先来看看效果: 思路 条条大路通罗马,个人分析下以下思路的可行性: 1.借鉴无限广告轮播的思路.可行性不高,主要是列表头部和尾部的衔接不够自然,而且快速滑动不够流畅. 2.使用TableView+3倍长度dataSource.可行性一般,在使用过程中滑动流畅,但是由于重复的数据源,可能导致在处理事件时需要特别对数据进行处理避免重复,另外此方法不能重用,总让有强迫

  • iOS开发中实现新闻图片的无限循环展示的方法

    无限轮播(新闻数据展示) 一.实现效果 二.实现步骤 1.前期准备 (1)导入数据转模型的第三方框架MJExtension (2)向项目中添加保存有"新闻"数据的plist文件 (3)导入用到的图片素材 2.步骤和代码 (1)新建一个数据模型 该模型的代码设计如下: YYnews.h文件 复制代码 代码如下: // //  YYnews.h //  08-无限滚动(新闻数据展示) // #import <Foundation/Foundation.h> @interface

  • iOS中无限循环滚动简单处理实现原理分析

    说下原理: 1./*初始化/ + (instancetype)loopScrollViewWithFrame:(CGRect)frame; 将背景collectinview视图初始化设置 代理和数据源 . 布局 2.在激活initwithFrame后触发 layoutSubviews //默认滚动到要显示的第一张图片 if (self.imageCollectionView.contentOffset.x == 0) { NSIndexPath *indexPath = [NSIndexPath

  • Vue实现一种简单的无限循环滚动动画的示例

    本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下: 先看实现效果: 这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的. Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果 // template <transition-group name="list-complete" tag="div"> <div v-for="v i

  • iOS实现无限循环轮播图效果

    本文实例为大家分享了iOS实现无限循环轮播图的具体代码,供大家参考,具体内容如下 轮播图基础控件,左滑右滑都能无限循环 预览 思路 (1)在第一张左边加一张最后一张的图片,往左滑到边缘结束后计算偏移量迅速定位成最后一张 #pragma mark - pagecontrol事件 // 这个是点击小圆点条进行切换,到边不能循环 - (void)pageControlTouched { // 点击的时候停止计时 [self.kvTimer setFireDate:[NSDate distantFutu

  • Unity3d实现无限循环滚动背景

    在游戏项目中我们常常看到商城的广告牌,几张广告图片循环滚动,类似跑马灯,现在我将讨论一种实现方法,并提供一个管理类,大家可以直接使用. 实现原理:背景图片循环滚动的原理很简单:两张图片向一个方向移动,当达某张图片到临界区域时将图片放在后面,依次循环. 在实际项目中,广告牌显示的图片数量不确定,例如某个假期活动会上很多新品,此时我们需要动态的创建显示的图片(一般在配置表读取数据),如果需要显示分类标签还得动态生成分类标签. 综上所述,一个完整的广告牌组件应该具有以下功能: - 无限循环的滚动背景图

  • Android ViewPager实现智能无限循环滚动回绕效果

    android系统提供的ViewPager标准方式是左右可以自由滑动,但是滑动到最左边的极限位置是第一个page,滑动到最右边的位置是最后一个page,当滑动到最左或者最右时候,就不能再滑动/滚动了,这是Android系统默认的ViewPager实现方式. 但是有些情况下开发者可能希望ViewPager能够智能的无限循环滚动回绕,比如现在总共有编号1, 2, 3, 4, 5的5个Page. (1)当用户手指从右往左滚动到最右边/最后面的页面5时候,如果此时用户继续拖住ViewPager往左边滑动

  • Android ListView实现无限循环滚动

    本文实例为大家分享了Android无限循环滚动的具体代码,供大家参考,具体内容如下 因项目需要循环展示列表数据,所以就实现了这个无限循环滚动的 LIstView.先说一下原理,原理呢,其实很简单,首先将要展示的数据循环展示三遍 监听ListView的滚动事件,当ListView滚动到第一遍第第二个时,ListView变自动跳到第二遍的第二个,同理,如果ListView滚动到倒数第一个时,ListView自动跳转到第二遍的倒数第一个,然后可以不停的向上或者向下滑动,永远不会到头,废话少说,上 代码

  • react实现无限循环滚动信息

    本文实例为大家分享了react实现无限循环滚动信息的具体代码,供大家参考,具体内容如下 需求 后端传递过来的数据滚动显示,鼠标移入后停止滚动,鼠标移出后继续滚动,参考公司门户的公告信息栏 实现思路 思路一 在componentDidMount中定义一个定时器,每过1000ms触发一次事件,将数组中第一条数据push到数组中,再删除掉第一条数据,最后给div添加onMouEnter和onMouseLeave事件,让鼠标移入时清除定时器,鼠标移出时重新开启定时器. 代码: class Roll ex

  • iOS中读写锁的简单实现方法实例

    目录 废话开篇 思考一.对于锁的类型的理解 思考二.读写锁的实现逻辑 思考三.简单封装读写锁,满足读写逻辑 总结 废话开篇 iOS 下的多线程的技术的应用衍生出了锁的机制,试想,如果 iOS 下没有多线程的概念,所有的代码都会在同步环境下执行,那么,也就不会产生争夺资源情况的发生,当然,也就没有办法利用多核的优势.所以,多线程的应用是广布的,而锁的应用是局部的,所以,二者应相辅相成,来达到提高运行效率的同时提高程序运行的稳定性. 思考一.对于锁的类型的理解 基本的三种锁的类型:互斥锁.自旋锁.读

随机推荐