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"> ...
随机推荐
- django安装过程简介(Mac版)
Django 中的项目和应用是什么? 简单来说,可以认为
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- jdk1.8 ConcurrentHashMap 的工作原理及代码实现,如何统计所有的元素个数
ConcurrentHashMap 的工作原理及代码实现: 相比于1.7版本,它做了两个改进 1.取消了segment分段设计,直接使用Node数组来保存数据,并且采用Node数组元素作为锁来实现每一 ...
- javascript权威指南第12章DOM2 DOM3 示例代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Example XHTML ...
- boost::swap
boost::swap是对标准库里的std::swap的增强和泛化,为交换两个变量的值提供便捷的方法. 为了使用需包含头文件: #include <boost/swap.hpp> 原理 c ...
- html5文件夹上传源码
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
- 数据结构实验之图论四:迷宫探索【dfs 求路径】
分析:起点已知,开个数组来存放路径,注意 vis 数组要初始化!另外,不能忘记了题目还要求回去的路径,只要在 dfs 之后加上就可以了. #include <bits/stdc++.h> ...
- 让vim更加智能化
从此,让我的vim更加的智能化,整整用了一个周日,基本是值得的: "新建.c\.cpp\.python\.sh等文件时,使用定义的函数SetTitle,自动插入文件头 func SetTit ...
- 小程序web-view的使用,跳转到外部链接~
先说一下需求,要点击榜单,跳到我们的移动web的项目的榜单页,这个不是小程序的哦,就是网页版的. 榜单的html代码: <view class="nav" hover-cla ...
- ArrayUtils.
String sfck=mp.get("SFCK")==null?"":mp.get("SFCK").toString(); Str ...