当前位置: 移动技术网 > IT编程>移动开发>IOS > IOS使用UICollectionView实现无限轮播效果

IOS使用UICollectionView实现无限轮播效果

2019年07月24日  | 移动技术网IT编程  | 我要评论

我爱书吧,战地2 1.41,平阳职教中心

一、案例演示

本案例demo演示的是一个首页轮播的案例,支持手动轮播和自动轮播。知识点主要集中在uicollectionview和nstimer的使用。

二、知识储备

2.1、uicollectionview横向布局

只需要设置uicollectionviewflowlayout的scrolldirection为uicollectionviewscrolldirectionhorizontal即可。

2.2、nstimer的基本使用

nstimer的初始化:

复制代码 代码如下:
 + (nstimer *)scheduledtimerwithtimeinterval:(nstimeinterval)ti target:(id)atarget selector:(sel)aselector userinfo:(nullable id)userinfo repeats:(bool)yesorno;

1)、(nstimeinterval)ti : 预订一个timer,设置一个时间间隔。
表示输入一个时间间隔对象,以秒为单位,一个>0的浮点类型的值,如果该值<0,系统会默认为0.1。
2)、target:(id)atarget : 表示发送的对象,如self
3)、selector:(sel)aselector : 方法选择器,在时间间隔内,选择调用一个实例方法
4)、userinfo:(nullable id)userinfo : 需要传参,可以为nil
5)、repeats:(bool)yesorno : 当yes时,定时器会不断循环直至失效或被释放,当no时,定时器会循环发送一次就失效。
开启定时器:

复制代码 代码如下:
[[nsrunloop mainrunloop] addtimer:timer formode:nsrunloopcommonmodes];

关闭定时器:

[self.timer invalidate];

2.3、自动轮播和手动轮播的切换

初始化的时候,我们默认开启定时器,定时执行切换到下一张图片的函数。当用户触摸到view的时候,我们则要关闭定时器,手动的进行uicollectionview的切换。当用户的手离开了view,我们要重新打开定时器,进行自动轮播的切换。

三、关键代码分析

3.1、生成uicollectionviewflowlayout对象,设置他的滚动方向为水平滚动  

 uicollectionviewflowlayout *flowlayout = [[uicollectionviewflowlayout alloc] init];
 flowlayout.itemsize = cgsizemake(screen_width, 200);
 flowlayout.scrolldirection = uicollectionviewscrolldirectionhorizontal;
 flowlayout.minimumlinespacing = 0;

3.2、初始化uicollectionview对象 

 uicollectionview *collectionview = [[uicollectionview alloc] initwithframe:cgrectmake(0, self.navbarheight, screen_width, 200) collectionviewlayout:flowlayout];
 collectionview.delegate = self;
 collectionview.datasource = self;
 collectionview.showshorizontalscrollindicator = no;
 collectionview.pagingenabled = yes;
 collectionview.backgroundcolor = [uicolor clearcolor];
 [self.view addsubview:collectionview];

3.3、uicollectionview的uicollectionviewdatasource代理方法

#pragma mark- uicollectionviewdatasource
-(nsinteger)numberofsectionsincollectionview:(uicollectionview *)collectionview{
 return yymaxsections;
}

-(nsinteger)collectionview:(uicollectionview *)collectionview numberofitemsinsection:(nsinteger)section{
 return self.newses.count;
}

-(uicollectionviewcell *)collectionview:(uicollectionview *)collectionview cellforitematindexpath:(nsindexpath *)indexpath{


 yycell *cell = [collectionview dequeuereusablecellwithreuseidentifier:yyidcell forindexpath:indexpath];
 if(!cell){
 cell = [[yycell alloc] init];
 }
 cell.news=self.newses[indexpath.item];
 return cell;
}

3.4、定时器的开启和关闭

#pragma mark 添加定时器
-(void) addtimer{
 nstimer *timer = [nstimer scheduledtimerwithtimeinterval:1 target:self selector:@selector(nextpage) userinfo:nil repeats:yes];
 [[nsrunloop mainrunloop] addtimer:timer formode:nsrunloopcommonmodes];
 self.timer = timer ;

}

#pragma mark 删除定时器
-(void) removetimer{
 [self.timer invalidate];
 self.timer = nil;
}

3.5、手动切换 和 自动轮播 的切换

-(void) scrollviewwillbegindragging:(uiscrollview *)scrollview{
 [self removetimer];
}

#pragma mark 当用户停止的时候调用
-(void) scrollviewdidenddragging:(uiscrollview *)scrollview willdecelerate:(bool)decelerate{
 [self addtimer];

}

#pragma mark 设置页码
-(void) scrollviewdidscroll:(uiscrollview *)scrollview{
 int page = (int) (scrollview.contentoffset.x/scrollview.frame.size.width+0.5)%self.newses.count;
 self.pagecontrol.currentpage =page;
}

3.6、自动轮播切换到下一个view的方法

-(void) nextpage{
 nsindexpath *currentindexpath = [[self.collectionview indexpathsforvisibleitems] lastobject];

 nsindexpath *currentindexpathreset = [nsindexpath indexpathforitem:currentindexpath.item insection:yymaxsections/2];
 [self.collectionview scrolltoitematindexpath:currentindexpathreset atscrollposition:uicollectionviewscrollpositionleft animated:no];

 nsinteger nextitem = currentindexpathreset.item +1;
 nsinteger nextsection = currentindexpathreset.section;
 if (nextitem==self.newses.count) {
 nextitem=0;
 nextsection++;
 }
 nsindexpath *nextindexpath = [nsindexpath indexpathforitem:nextitem insection:nextsection];

 [self.collectionview scrolltoitematindexpath:nextindexpath atscrollposition:uicollectionviewscrollpositionleft animated:yes];
}

demo下载地址:https://github.com/yixiangboy/yxcollectionview

以上就是本文的全部内容,希望对大家的学习有所帮助。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

  • ios uicollectionview实现横向滚动

    现在使用卡片效果的app很多,之前公司让实现一种卡片效果,就写了一篇关于实现卡片的文章。文章最后附有demo实现上我选择了使用uicollectionview ... [阅读全文]
  • iOS UICollectionView实现横向滑动

    本文实例为大家分享了ios uicollectionview实现横向滑动的具体代码,供大家参考,具体内容如下uicollectionview的横向滚动,目前我使... [阅读全文]
  • iOS13适配深色模式(Dark Mode)的实现

    iOS13适配深色模式(Dark Mode)的实现

    好像大概也许是一年前, mac os系统发布了深色模式外观, 看着挺刺激, 时至今日用着也还挺爽的终于, 随着iphone11等新手机的发售, ios 13系统... [阅读全文]
  • ios 使用xcode11 新建项目工程的步骤详解

    ios 使用xcode11 新建项目工程的步骤详解

    xcode11新建项目工程,新增了scenedelegate这个类,转而将原appdelegate负责的对ui生命周期的处理担子接了过来。故此可以理解为:ios... [阅读全文]
  • iOS实现转盘效果

    本文实例为大家分享了ios实现转盘效果的具体代码,供大家参考,具体内容如下demo下载地址: ios转盘效果功能:实现了常用的ios转盘效果,轮盘抽奖效果的实现... [阅读全文]
  • iOS开发实现转盘功能

    本文实例为大家分享了ios实现转盘功能的具体代码,供大家参考,具体内容如下今天给同学们讲解一下一个转盘选号的功能,直接上代码直接看viewcontroller#... [阅读全文]
  • iOS实现轮盘动态效果

    本文实例为大家分享了ios实现轮盘动态效果的具体代码,供大家参考,具体内容如下一个常用的绘图,主要用来打分之类的动画,效果如下。主要是ios的绘图和动画,本来想... [阅读全文]
  • iOS实现九宫格连线手势解锁

    本文实例为大家分享了ios实现九宫格连线手势解锁的具体代码,供大家参考,具体内容如下demo下载地址:效果图:核心代码://// clockview.m// 手... [阅读全文]
  • iOS实现卡片堆叠效果

    本文实例为大家分享了ios实现卡片堆叠效果的具体代码,供大家参考,具体内容如下如图,这就是最终效果。去年安卓5.0发布的时候,当我看到安卓全新的material... [阅读全文]
  • iOS利用余弦函数实现卡片浏览工具

    iOS利用余弦函数实现卡片浏览工具

    本文实例为大家分享了ios利用余弦函数实现卡片浏览工具的具体代码,供大家参考,具体内容如下一、实现效果通过拖拽屏幕实现卡片移动,左右两侧的卡片随着拖动变小,中间... [阅读全文]
验证码:
移动技术网