音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

IOS图片无限轮播器的实现原理
日期:2016-03-31 11:35:42   来源:脚本之家

首先实现思路:整个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就可以得出,要在下个图片中显示的图片的索引

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//计算偏移的整数倍,偏移了0或者是2, -1是让self.index图片索引+1 或者 -1以切换图片;
NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width - 1;
self.index = (offset + self.index + kPictureCount) % kPictureCount;
//本质就是改变cell的索引,再根据self.index来切换图片,使用取余让图片索引不至于越界
//异步主队列执行,为了不让连续滚动停止后,图片有闪动.
dispatch_async(dispatch_get_main_queue(), ^{
[self scrollToSecondCell];
});
}

•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];
}
@end

1. 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图片无限轮播器的实现原理,希望对大家有所帮助!

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    Windows系统Linux系统苹果MACAndroidiOS系统鸿蒙系统