为尊重原创,特注明原文链接:http://m.myexception.cn/operating-system/1949043.html

图片轮播及其无限循环效果

平时APP中的广告位或者滚动的新闻图片等用到的就是图片轮播这种效果,实现方式主要有两种,一种是ScrollView+ImageView,另一种则是通过CollectionView,今天总结的是ScrollView这种方式。

1.图片轮播效果实现

主要实现思路是:根据图片总数及宽高设置好ScrollView的大小,每切换一张图片相当于在ScrollView上进行一个图片宽度的移动行为,并加入定时器,实现自动轮播。

如图所示,设置好ScrollView及PageControl,ScrollView的contentSize根据图片数量确定,注意启用pagingEnabled这个属性,确保整页移动,同样pageControl也是根据图片数量来确定,每一页代表一张图片。

图片命名采用数字序号方式,方便使用,需要注意的是,pageControl是由0开始的,也就是0对应image1,1对应image2...依次类推

加载图片并将准备好的图片在ScrollView里设置好位置,即将这些图片一张紧挨着一张排列在ScrollView中。

通过ScrollView的代理方法,在ScrollView滚动结束的时候根据contentOffset更新页码。

定时器设置,这里设置为每隔2秒滚动更新一次,实际上就是每隔2秒更新一次页码,根据页码的变化,让ScrollView跟着移动,每次移动一张图片的距离

这里还需要注意的是,由于加入定时器有自动轮播的效果了,会与手动拖拽ScrollView冲突,即手动拖拽ScrollView过程时ScrollView可能自动移动更新图片了,显然这种效果是不符合用户习惯的,这时需要在ScrollView的代理事件中进行处理,即开始拖拽ScrollView时停止定时器,拖拽结束后再开启定时器。

那到这里是不是就结束了呢?我们看看效果图:

这里有两个问题:

(1)首先是移动到最后一张图片时无法移动了,如果是制作APP的新特性页面,这样的滚动效果已经可以了,但如果在广告位或者是滚动新闻这些场景下这种效果是不够好的,一般滚动到最后一张图片时,继续拖拽都会移动到第一张图片,实现一种滚动循环效果。

(2)定时器自动轮播图片时,确实图片循环轮播了,但是仔细看会发现,ScrollView是由最后一种图片位置生硬得拉回到第一张图片的位置,效果也不够理想。

解决办法下面接着说。

2.图片轮播无限循环效果实现

刚刚说到第一个问题,ScrollView移动到最后一张图片时无法移动了,这是因为ScrollView已经移动到最后,而图片又是依次排列,自然也就无法移动。

解决办法是,我们换一个思路实现图片轮播效果,ScrollView上只放三个ImageView,屏幕始终显示中间的ImageView,左边和右边的ImageView分别代表前一张图片和后一张图片,屏幕移动的时候,中间的ImageView变化,同时左右两边的ImageView也随之变化,两种边界情况:

(1)当屏幕显示最后一张图片时,右边的ImageView也即下一站图片应该是最开始的第一张图片;

(2)当屏幕显示最开始的第一张图片时,左边的ImageView也即上一张图片应该是最后一张图片。

这样三个ImageView不断变化就造成一种图片轮播无限循环的效果。 参考:http://www.cnblogs.com/kenshincui/p/3913885.html

      相对于之前的效果,有一些改变,主要有:

(1)ScrollView只需要设置三个ImageView即可,并且默认显示中间的ImageView

(2)根据ScrollView的移动情况,迅速变化三个ImageView中图片数据

(3)ImageView更新完毕后,偷偷把ScrollView拉回到中间的ImageView位置,这样视觉效果上就实现了无限循环的效果

效果图:

但是,这里在加入定时器后实现图片轮播自动循环时遇到了问题,主要是初始化显示第一张图片与根据定时器设置自动移动ScrollView有一些冲突,在code4App上找到其他人一个工程,采用的思路相同,单独封装了ScrollView进行处理,已经解决该问题。

可参考:http://code4app.com/ios/AdScrollerView/54955a78933bf0f2168b45b4

iOS:实现图片的无限轮播的更多相关文章

  1. iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView

    iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView 时间:2016-01-19 19:13:43      阅读:630      评论:0      收藏:0   ...

  2. iOS:实现图片的无限轮播---之使用第三方库SDCycleScrollView

    SDCycleScrollView API // //  SDCycleScrollView.h //  SDCycleScrollView #import <UIKit/UIKit.h> ...

  3. iOS开发UI篇—无限轮播(循环利用)

    iOS开发UI篇—无限轮播(循环利用) 一.无限轮播  1.简单说明 在开发中常需要对广告或者是一些图片进行自动的轮播,也就是所谓的无限滚动. 在开发的时候,我们通常的做法是使用一个UIScrollV ...

  4. iOS开发UI篇—无限轮播(新闻数据展示)

    iOS开发UI篇—无限轮播(新闻数据展示) 一.实现效果        二.实现步骤 1.前期准备 (1)导入数据转模型的第三方框架MJExtension (2)向项目中添加保存有“新闻”数据的pli ...

  5. iOS开发UI篇—无限轮播(循环展示)

    iOS开发UI篇—无限轮播(循环展示) 一.简单说明 之前的程序还存在一个问题,那就是不能循环展示,因为plist文件中只有五个数组,因此第一个和最后一个之后就没有了,下面介绍处理这种循环展示问题的小 ...

  6. iOS开发UI篇—无限轮播(功能完善)

    iOS开发UI篇—无限轮播(功能完善) 一.自动滚动 添加并设置一个定时器,每个2.0秒,就跳转到下一条. 获取当前正在展示的位置. [self addNSTimer]; } -(void)addNS ...

  7. iOS:实现图片的无限轮播之使用第三方库SDCycleScrollView

    下载链接:github不断更新地址:https://github.com/gsdios/SDCycleScrollView #import "ViewController.h" # ...

  8. iOS开发之ImageView复用实现图片无限轮播

    在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案.今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageVi ...

  9. iOS 两种不同的图片无限轮播

    代码地址如下:http://www.demodashi.com/demo/11608.html 前记 其实想写这个关于无限轮播的记录已经很久很久了,只是没什么时间,这只是一个借口,正如:时间就像海绵, ...

随机推荐

  1. thinkphp 导入微信小程序加密解密库

    第三方类库 第三方类库指除了 ThinkPHP 框架.应用项目类库之外的其他类库,一般由第三方系统或产品提供,如 Smarty.Zend 等系统的类库等. 前面使用自动加载或 import 方法导入的 ...

  2. bzoj 1042 DP+容斥原理

    我们可以先DP预处理出W[I]代表买I的东西,每种钞票的个数 不做限制的方案数,那么对于每一组数据的限制,我们可以知道 W[S-C[I]*(D[I]+1)]C为面值,D为数量,这个代表第I种钞票一定 ...

  3. 进一步认识golang中的并发

    如果你成天与编程为伍,那么并发这个名词对你而言一定特别耳熟.需要并发的场景太多了,例如一个聊天程序,如果你想让这个聊天程序能够同时接收信息和发送信息,就一定会用到并发,无论那是什么样的并发. 并发的意 ...

  4. gcc 簡單操作

    gcc -c test.c 產出 test.o object file gcc -c test.c -o XXX 產出 XXX object file gcc test.c -o aaa 產出 aaa ...

  5. 四维偏序(K-D-Tree+rebuild)

    其实只是放个代码,会K-D-Tree的同学看了就知道怎么rebuild了,其实也是很简单粗暴的…… 单独再发一次吧,感觉把代码跟之前的一起发不知道啥时候就找不到了…… #include<bits ...

  6. 常用的find命令

    find命令 find [路径名] –name/-size/-perm find [路径名] –name “*p” 在路径搜索p结尾的文件夹及文件 find [路径名] –name “[ab]*” 在 ...

  7. Win 32平台SDK中的文件操作

    读取文件: HANDLE hFile ; // 声明文件操作内核对象句柄 hFile = CreateFile(, NULL, OPEN_EXISTING, FILE_ATTRIBUTE_NORMAL ...

  8. slatstack Master的配置

    Salt系统非常简单并且易于配置,Salt系统的两个组件都有各自的配置文件.如"salt-master"是通过主配置文件来配置的,"salt-minion"是通 ...

  9. 《Java并发编程实战》学习笔记

    第2章 线程安全性 正确性: 某个类的行为与其规范完全一致. 2.1线程安全: 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些线程将如何交替执行,并且在主调代码中不需要任何额外的同步或 ...

  10. Interface与abstract类的区别

    含有abstract修饰符的class即为抽象类,abstract 类不能创建的实例对象.含有abstract方法的类必须定义为abstract class,abstract class类中的方法不必 ...