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"> ...
随机推荐
- DOM Diff(差分)算法
1. 算法由来 React调用render()方法后,会生成一个React元素组成的树. 再次调用,生成一个新的树.React比较两者的差异,然后更新UI. 如果单纯使用算法,来查找两个DOM树的差异 ...
- 12 | 为什么我的MySQL会“抖”一下?
平时的工作中,不知道你有没有遇到过这样的场景,一条SQL语句,正常执行的时候特别快,但是有时也不知道怎么回事,它就会变得特别慢,并且这样的场景很难复现,它不只随机,而且持续时间还很短. 看上去,这就像 ...
- webpack 4 的 proxy
第一种 接口有api的 setupProxy.js const proxy = require('http-proxy-middleware'); module.exports = function( ...
- Elasticsearch环境搭建和介绍(Windows)
一.Elasticsearch介绍和安装 1.1 介绍 Elastic Elastic官网:https://www.elastic.co/cn/ Elastic有一条完整的产品线:Elasticse ...
- Ubuntu下Django+uWSGI+nginx部署
本文采用uwsgi+nginx来部署django 这种方式是将nginx作为服务端前端,将接受web所有的请求,统一管理,Nginx把所有的静态请求自己处理,然后把所有非静态请求通过uwsgi传递给D ...
- [APIO2012]派遣 左偏树
P1552 [APIO2012]派遣 题面 考虑枚举每个节点作为管理者,计算所获得的满意程度以更新答案.对于每个节点的计算,贪心,维护一个大根堆,每次弹出薪水最大的人.这里注意,一旦一个人被弹出,那么 ...
- P1069 细胞分裂——数学题,质因数分解
P1069 细胞分裂 我们求的就是(x^k)|(m1^m2) k的最小值: 先给m1分解质因数,再给每个细胞分解: 如果m1有的质因数,细胞没有就跳过: 否则就记录答案: 注意整数除法下取整的原则: ...
- python版本下载时时,官方目录web-based与executable和embeddable 的区别
背景:安装python时不知道选择哪个版本以及他们之间的意思. 1.X86和X86-64的区别:系統是32 bit 的版本还是 64bit 的 2.web-based ,executable , em ...
- ZR#997
ZR#997 解法: 找找规律就出来了,全场最简单的一道题. CODE: #include<iostream> #include<cstdio> #include<cst ...
- [Codeforces1137F]Matches Are Not a Child's Play——LCT+树状数组
题目链接: [Codeforces1137F]Matches Are Not a Child's Play 题目大意: 我们定义一棵树的删除序列为:每一次将树中编号最小的叶子删掉,将该节点编号加入到当 ...