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

  在上篇博客中iOS开发之多图片无缝滚动组件封装与使用给出了图片无限轮播的实现方案之一,下面在给出另一种解决方案。今天博客中要说的就是在ScrollView上贴两个ImageView, 把ImageView进行交替切换来实现图片的无限轮播,在轮播时去修改ImageView上的图片。上一篇博客中是有几张图片就实例化几个ImageView, 然后事先把Image贴到相应的ImageView上,这种做法比较简单,而且易于实现。

  今天这篇博客就要实现使用两张ImageView, 交替的区展示Image, Image是在将要显示的时候才贴到ImageView上,好废话少说,进入今天博客的主题。

  一、运行效果及原理分析

    1.Demo的运行效果

    下图的Gif是本片博客Demo的运行效果,但从效果上来看,和上一篇博客的运行效果是一样的,但本质和实现原理是不同的。在本篇博客的结尾会给出Demo在Github上的分享地址,首先大家可以看一下效果,是可以无限轮播的,而且可以支持手动滑动。点击每张图片也是会通过Block回调的方式给出每张图片的索引的。

    2. 原理实现分析

    下图呢是简单画的原理图,以3张图片为例,当然使用的是两个ImageView,并给出了三张图片在两张ImageView以及在可视区的展示顺序。把原理搞明白了敲代码也就轻松了,在写代码时不要在思路不清晰的情况下就开始动键盘。原理的核心就是当是新的图片永远是加在第二张ImageView上的,下一轮的第一张图片,是上一轮的第二张图片,这样就可以形成一个无缝滚动了。还是看下面这张原理图吧,自己画的,应该是可以看的。

    

  二、demo分享

    关于本篇博客的代码呢,就不一行一行的往博客上粘贴了,原理明白了,实现应该不成问题的,本篇的博客代码会分享到github上,下方是github的分享地址,有兴趣的小伙伴可以Clone一下。

    gitHub分享地址:https://github.com/lizelu/ZLImageScrollView

 

时间: 2024-09-15 07:41:15

iOS开发之ImageView复用实现图片无限轮播的相关文章

IOS图片无限轮播器的实现原理_IOS

首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell. 滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换. 声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片. 在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中设置 完成一次滚动结束后,代码再设置当前的cell为第二个cell(本质上就是让当前显示的

Android图片无限轮播的实现代码_Android

本文实例为大家分享了AnAndroid图片无限轮播的具体代码,供大家参考,具体内容如下 public class MainActivity extends Activity { private ViewPager viewPager; private LinearLayout ll_dot; private String[] imageUrls = new String[] { "yun_qi_img/block.gif", "yun_qi_img/block.gif&quo

Android图片无限轮播的实现代码

本文实例为大家分享了AnAndroid图片无限轮播的具体代码,供大家参考,具体内容如下 public class MainActivity extends Activity { private ViewPager viewPager; private LinearLayout ll_dot; private String[] imageUrls = new String[] { "http://pic8.nipic.com/20100701/5290458_114840036316_2.jpg&

ios开发之xcode加载图片点击事件,图片带参数

clickx 作为一个方法被调用,表示当你点击图片的时候出发这个方法,这个方法可以自己随便写比如abc,clicky  代码如下 复制代码 - (IBAction)test:(id)sender {     UIImageView *imageView =[[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];     imageView.image=[UIImage imageNamed:@"22.png"]

iOS开发之UIScrollView控件详解_IOS

一.UIScrollView控件是什么?     (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限     (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容     (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容     (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容     (5)  举例:手机上的"设置".其他⽰示例程序 二

Android开发之imageView图片按比例缩放的实现方法_Android

本文实例讲述了Android开发之imageView图片按比例缩放的实现方法.分享给大家供大家参考,具体如下: android:scaleType可控制图片的缩放方式,示例代码如下: <ImageView android:id="@+id/img" android:src=\'#\'" /logo" android:scaleType="centerInside" android:layout_width="60dip"

Android开发之imageView图片按比例缩放的实现方法

本文实例讲述了Android开发之imageView图片按比例缩放的实现方法.分享给大家供大家参考,具体如下: android:scaleType可控制图片的缩放方式,示例代码如下: <ImageView android:id="@+id/img" android:src=\'#\'" /logo" android:scaleType="centerInside" android:layout_width="60dip"

iOS开发之UITableView与UISearchController实现搜索及上拉加载,下拉刷新实例代码_IOS

废话不多说了,直接给大家贴代码了. 具体代码如下所示: #import "ViewController.h" #import "TuanGouModel.h" #import "TuanGouTableViewCell.h" #define kDeviceWidth [UIScreen mainScreen].bounds.size.width #define kDeviceHeight [UIScreen mainScreen].bounds.

iOS开发之UIKeyboardTypeNumberPad数字键盘自定义按键_IOS

最近做一个搜索用户的功能,这里使用了UISearchBar.由于搜索的方式只有手机号码,所以这里的键盘要限制为数字输入,可以这么做: self.searchBar.keyboardType = UIKeyboardTypeNumberPad;如果使用的不是搜索框而是textField输入框,可以设置textField的键盘属性来展示 self.textField.keyboardType = UIKeyboardTypeNumberPad;监听事件如下所示即可. 但是这里有个问题,就是数字键盘上