博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS:实现图片的无限轮播
阅读量:6496 次
发布时间:2019-06-24

本文共 1724 字,大约阅读时间需要 5 分钟。

为尊重原创,特注明原文链接:

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

平时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不断变化就造成一种图片轮播无限循环的效果。 参考:

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

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

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

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

效果图:

 

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

可参考:

转载地址:http://evcyo.baihongyu.com/

你可能感兴趣的文章
tools
查看>>
DEV报表之条形码
查看>>
JAVE EE 企业级开发之从零开始学JAVA【51CTO技术论坛】
查看>>
网络配置文件、命令详解
查看>>
zabbix监控windows(03,08)
查看>>
笑谈价值观
查看>>
一次图文并茂的***完整测试二
查看>>
IPsec ××× 配置實例
查看>>
DSL概述
查看>>
review what i studied `date` - 2017-4-12
查看>>
制作OpenStack上使用的CentOS系统镜像
查看>>
ssh
查看>>
Linux 启动过程详解
查看>>
Python安装及netcdf数据读写
查看>>
我的友情链接
查看>>
DZX2无法读取会员短消息
查看>>
Idea常用快捷键
查看>>
Nodejs HTML抓取与内容提取
查看>>
MXNet动手学深度学习笔记:卷积计算
查看>>
android zip解压缩(含有子目录)
查看>>