时间:2021-05-20
首先实现思路:整个collectionView中只有2个cell.中间始终显示第二个cell.
滚动:向前滚动当前cell的脚标为0,向后滚动当前的cell脚标为2.利用当前cell的脚标减去1,得到+1,或者-1,来让图片的索引加1或者减1,实现图片的切换.
声明一个全局变量index来保存图片的索引,用来切换显示在当前cell的图片.
在滚动前先让显示的cell的脚标变为1.代码viewDidLoad中设置
完成一次滚动结束后,代码再设置当前的cell为第二个cell(本质上就是让当前显示的cell的脚标为1)
最后一个有一个线程问题就是:当你连续滚动的时候,最后停止,当前显示的图片会闪动,因为是异步并发执行的,线程不安全导致.解决办法:让滚动完成后设置cell的代码加入主队列执行即可.
准备工作,创建collectionViewController,storyboard,进行类绑定,cell绑定,cell可重用标识绑定.
创建的cell.h文件
//// PBCollectionCell.h// 无限滚动//// Created by 裴波波 on 16/3/30.// Copyright © 2016年 裴波波. All rights reserved.//#import <UIKit/UIKit.h>@interface PBCollectionCell : UICollectionViewCell@property(nonatomic,strong)UIImage * img;@end•cell.m文件//// PBCollectionCell.m// 无限滚动//// Created by 裴波波 on 16/3/30.// Copyright © 2016年 裴波波. All rights reserved.//#import "PBCollectionCell.h"@interface PBCollectionCell ()//不要忘记给collectionView的cell上设置图片框,并拖线到cell分类中@property (strong, nonatomic) IBOutlet UIImageView *imgView;@end@implementation PBCollectionCell//重写img的set方法来个cell进行赋值.(当调用cell.img = img的时候回调用set ..img的方法)-(void)setImg:(UIImage *)img{_img = img;self.imgView.image = img;}@end控制器的代码详解
//// ViewController.m// 无限滚动//// Created by 裴波波 on 16/3/30.// Copyright © 2016年 裴波波. All rights reserved.//#import "ViewController.h"#import "PBCollectionCell.h"//定义宏图片的个数#define kPictureCount 3@interface ViewController ()@property (strong, nonatomic) IBOutlet UICollectionViewFlowLayout *flowLayout;/*** 图片的索引*/@property(nonatomic,assign) NSInteger index;@end•声明全局变量index为了拼接滚动过程中切换的图片的索引@implementation ViewController-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{return kPictureCount;}-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{static NSString * ID = @"cell";PBCollectionCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];//图片索引只有下一站或者上一张,即+1,或者-1,为了切换图片//中间的cell的脚标是1,滚动后脚标是2或者0,凑成next值为+1或者-1(让图片索引+1或者-1来完成切换图片),则NSInteger next = indexPath.item - 1;//为了不让next越界,进行取余运算 ---------+next为了切换图片next = (self.index + kPictureCount + next) % kPictureCount;NSString * imgName = [NSString stringWithFormat:@"%02ld",next + 1];UIImage * img = [UIImage imageNamed:imgName];cell.img = img;return cell;}•在viewDidLoad设置了当前显示图片的cell是第二个cell,当cell向前滚动脚标-1(cell的indexPath.item的值为0),向后滚动脚标+1(cell的indexPath.item的值为2)
•如何拼接图片?---通过全局变量self.index: •cell向前滚动图片的索引self.index -1 此时cell的indexPath.item为0;然而此时图片的索引需要减1
•cell向后滚动图片的索引self.index+1 此时cell的indexPath.item为2;图片的索引需要加1
•综上可以得出通过对cell的indexPath.item-1 再加上self.index就可以得出,要在下个图片中显示的图片的索引
•cell停止滚动后将图片的索引self.index值计算出来,保存在全局变量.为了在数据源第三个方法---返回cell的时候通过cell的indexPath.item的+1或者-1以及图片的索引self.index来正确切换要显示的图片.
•滚动停止后将操作放入主队列异步执行,此操作是为了将中间显示的cell的脚标变为1,也就是将当前显示的图片的cell变为第二个cell.放在主队列异步执行(不堵塞主线程,主队列的任务顺序执行,当主线程任务完成后再执行切换cell为第二个cell)不会出现连续滚动后闪动图片的bug.(此句看不懂可以略过).
//封装设置当前显示的cell为第二个cell的方法.
-(void)scrollToSecondCell{NSIndexPath * idxPath = [NSIndexPath indexPathForItem:1 inSection:0];[self.collectionView scrollToItemAtIndexPath:idxPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];}- (void)viewDidLoad {[super viewDidLoad];self.flowLayout.itemSize = self.collectionView.bounds.size;self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;self.flowLayout.minimumLineSpacing = 0;self.collectionView.backgroundColor = [UIColor whiteColor];self.collectionView.pagingEnabled = YES;self.collectionView.bounces = NO;self.collectionView.showsHorizontalScrollIndicator = NO;[self scrollToSecondCell];}@end1. cell滑动前或者每次滑动结束后都用代码设置当前显示的cell为第二个cell,在数据源第三个方法也就是返回cell的方法中实现图片的切换用的是cell的indexPath.item-1 = -1或者 +1 再加上图片本身的索引值self.index就会得出即将滚出的cell要显示的是上一张图片还是下一张图片.
2. cell滚动结束后要计算当前cell显示图片的索引.是通过scrollview的偏移量contentoffset.x除以scrollview的宽度,计算出当前cell的图片的索引保存.之后再滑动cell的时候,会调用数据源第三个方法,就会使用保存下来的self.index以及加上cell的indexPath.item-1来计算要显示的图片的索引.
以上内容是小编给大家介绍的IOS图片无限轮播器的实现原理,希望对大家有所帮助!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲解了js图片轮播效果的实现原理,分享给大家供大家参考,具体内容如下两种图片轮播实现方案,先来看效果对比:方案一:原理:将图片摆成一行,从左到右依次滚动
思路:要实现无限轮播,需要在轮播图前后各加一张图片,加在前面的是轮播图的最后一张图片(重复的),加在后面的是轮播图的第一张图片(重复的)。例:然后再用left来
最近一直在找实现图片无限轮播的方法,在网上也看了不少方法,大都不太合适,最终看到某it培训公司一位讲师用uicollectionview:一行代码实现图片无限轮
在网上找了很多viewpager实现图片轮播的,但是大多数通过以下方式在PagerAdapter的getCount()返回一个无限大的数,来实现伪无限@Over
一.实现原理(1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏;(2)轮播图分为手动轮播和自动轮播;手动轮播的重点是每次点击