01.轮播图之三 : collectionView 轮播
个人觉得 collection view 做轮播是最方便的,设置下flowlayout 其他不会有很大的变动,没有什么逻辑的代码
let's begin……
创建自定义的view
.h 声明文件
@interface CollectionViewShuffling : UIView @property (nonatomic,strong)NSArray *array; @end
.m 实现文件
@interface CollectionViewShuffling ()<UICollectionViewDelegate, UICollectionViewDataSource> @property (nonatomic,strong)UICollectionView *collectionView;
@property (nonatomic,strong)NSMutableArray *collectionArray; @end @implementation CollectionViewShuffling
@synthesize array = _array; -(instancetype)initWithFrame:(CGRect)frame{ if (self == [super initWithFrame:frame]) {
}
return self;
}
/**
这个是横向滚动轮播的重点研究对象
*/
-( UICollectionViewFlowLayout *)creatFlowLayout{
// 创建UICollectionViewFlowLayout约束对象
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
// 设置item的Size大小
flowLayout.itemSize = CGSizeMake(self.frame.size.width, self.frame.size.height);
// 设置uicollection 的 横向滑动
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
flowLayout.minimumLineSpacing = ;
return flowLayout;
} - (UICollectionView *)collectionView
{
if (!_collectionView) {
UICollectionViewFlowLayout *flowLayout = [self creatFlowLayout];
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(, , self.frame.size.width, self.frame.size.height) collectionViewLayout:flowLayout];
[self addSubview:_collectionView];
// 设置代理
_collectionView.delegate = self;
_collectionView.dataSource = self;
// _collectionView.showsHorizontalScrollIndicator = NO;// 设置不展示滑动条
_collectionView.pagingEnabled = YES; // 设置整页滑动
// 设置当前collectionView 到哪个位置(indexPath row 0 section 取中间(50个)) [_collectionView registerNib:[UINib nibWithNibName:@"ShufflingItem" bundle:nil] forCellWithReuseIdentifier:@"ShufflingItem"];
}
return _collectionView;
} -(void)setArray:(NSArray *)array{
NSAssert(array.count != , @"传入的滚动数组是 空的");
_array = array;
[self prepareData];
[self prepareUI];
} -(void)prepareUI{ [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem: inSection:] atScrollPosition:UICollectionViewScrollPositionLeft animated:false];
[self.collectionView reloadData];
} - (void)prepareData{ self.collectionArray = [NSMutableArray new];
// 首位 添加数组最后的元素
[self.collectionArray addObject:_array.lastObject];
// 添加数组元素
[self.collectionArray addObjectsFromArray:_array];
// 末尾 补充第一个元素
[self.collectionArray addObject:_array.firstObject];
}
/*
collection view delegate
*/
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return ;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.collectionArray.count;
} - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
ShufflingItem *item = [collectionView dequeueReusableCellWithReuseIdentifier:@"ShufflingItem" forIndexPath:indexPath];
if (!item) {
item = [[ShufflingItem alloc] init];
}
item.imageView.backgroundColor = self.collectionArray[indexPath.row];
return item;
} -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ if (scrollView == self.collectionView) { NSLog(@"scroll content %@",NSStringFromCGPoint(scrollView.contentOffset)); //检测移动的位移
if (scrollView.contentOffset.x == (self.collectionArray.count-)*(self.frame.size.width) ) { [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem: inSection:] atScrollPosition:UICollectionViewScrollPositionLeft animated:false]; }else if (scrollView.contentOffset.x == ){ [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForItem:(self.collectionArray.count-) inSection:] atScrollPosition:UICollectionViewScrollPositionLeft animated:false];
}else{ // 正常滚动
}
}
}
最简单的collection 轮播,实现啦……
总结下,他的实现为什么如此简单
- collection view 有个flow layout 设置这个属性就可以让他横向滚动,竖向滚动
- 还有一个重点 声明下 collection view 使用 item cell 的时候,是必须注册的
调用方法::::
-(void)prepareCollectShuffling{
CollectionViewShuffling *collectShuffling = [[CollectionViewShuffling alloc]initWithFrame:CGRectMake(, , self.view.frame.size.width -, )];
[self.view addSubview:collectShuffling];;
collectShuffling.array = self.arr;
}
这个写完,距离成功又进了一步,继续………………
01.轮播图之三 : collectionView 轮播的更多相关文章
- swiper轮播问题之一:轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
- vue-music 使用better-scroll遇到轮播图不能自动轮播
根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播 这是因为,better-scroll发布新版本之后,参数设置发生改变 这是旧版本: ...
- 焦点轮播图(tab轮播)
主要有两部分:1.列表导航(小图片) 2.展示区(大图片) 页面布局: HTML部分: <div class="s_conC"> ...
- swiper手滑动轮播图后自动轮播失效解决办法
设置autoplay:true之后,再设置 autoplay:{disableOnInteraction: false} --------------------------------------- ...
- JavaScript--缓动动画+轮播图
上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 使用jq深入研究轮播图特性
网站轮播图 太耳熟的词了 基本上做pc端的 主页绝壁会来一个轮播图的特效 轮播图他一个页面页面的切换,其实的原理是通过css的定位 ,定位到一起,第一张首先显示,其余默认隐藏. 今天我实现的这个轮播 ...
- iOS回顾笔记(05) -- 手把手教你封装一个广告轮播图框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- JQ万能轮播图
lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
随机推荐
- C#获取资源文件
System.Resources.ResourceManager rs = new System.Resources.ResourceManager("NetWebBrowser.Resou ...
- Selenium常用API的使用java语言之4-环境安装之Selenium
1.通过jar包安装 点击Selenium下载 链接 你会看到Selenium Standalone Server的介绍: The Selenium Server is needed in order ...
- django安装tinymce
1. pip install django-tinymce 2. 运行:python manage.py collectstatic 3. 编辑 settings.py 4. TINYMCE_JS_U ...
- [Angular] Show a Loading Indicator for Lazy Routes in Angular
We can easily code split and lazy load a route in Angular. However when the user then clicks that la ...
- P2597 [ZJOI2012]灾难——拓扑,倍增,LCA
最近想学支配树,但是基础还是要打好了的: P2597 [ZJOI2012]灾难 这道题是根据食物链链接出一个有向图的关系,求一个物种的灭绝会连带几种物种的灭绝: 求得就是一个点能支配几个点: 如果一个 ...
- python常用函数2
2.reduce()函数 reduce() 函数也是python内置的一个高阶函数.reduce()函数接收的参数和 map()相似,一个函数 f ,一个list,但行为和 map()不同,re ...
- (转)SLOW READPROCESSOR;ERROR SLOW BLOCKRECEIVER错误日志分析
1.总结 "Slow ReadProcessor" 和"Slow BlockReceiver"往往是因为集群负载比较高或者某些节点不健康导致的,本文主要是帮助你 ...
- lucene反向索引——倒排表无论是文档号及词频,还是位置信息,都是以跳跃表的结构存在的
转自:http://www.cnblogs.com/forfuture1978/archive/2010/02/02/1661436.html 4.2. 反向信息 反向信息是索引文件的核心,也即反向索 ...
- pc电源cpu插座和显卡插座
cpu插座是8口的,一般4+4 显卡插座是6口的,也有8口的用6+2 6+2的中2有一个小边,组合成8口也不能插入cpu插座.
- [游戏开发]LÖVE2D(1):引擎介绍
什么是LÖVE引擎 Love引擎是一个非常棒的框架,你可以用来在Lua制作2D游戏.它是免费的,开源的,适用于Windows,Mac OS X,Linux,Android和iOS. 怎么安装 在官网下 ...