关于collectionview布局的坑
不知道写了多少次collectionview,步了很多坑,现在看来虽然达到了自己想要的结果,却不知道其中所以然。还是总结一下,免得再走弯路;
场景是这样的,我要定制一个显示选择图片的排列,想要实现横向排列4个,等间距,多了折行显示的效果,正确的做法是这样的;
- (void)viewDidLoad {[super viewDidLoad];self.navigationController.navigationBar.translucent = NO;if ([self respondsToSelector:@selector(setAutomaticallyAdjustsScrollViewInsets:)]) {self.automaticallyAdjustsScrollViewInsets = NO;}self.view.backgroundColor = [UIColor purpleColor];self.photoArray = @[[UIImage imageNamed:@"cycle3"],[UIImage imageNamed:@"cycle4"],[UIImage imageNamed:@"cycle2"],[UIImage imageNamed:@"cycle3"],[UIImage imageNamed:@"cycle4"],].mutableCopy;[self.view addSubview:self.pickPhotoCollection]; }-(UICollectionView *)pickPhotoCollection{if (!_pickPhotoCollection) {UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];layout.scrollDirection = UICollectionViewScrollDirectionVertical;_pickPhotoCollection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 200, kScreenWidth, (self.photoArray.count/4 +1)*80) collectionViewLayout:layout];_pickPhotoCollection.delegate = self;_pickPhotoCollection.dataSource = self;_pickPhotoCollection.backgroundColor = RGBACOLOR(240, 240, 240, 1);_pickPhotoCollection.showsHorizontalScrollIndicator = NO;[_pickPhotoCollection registerClass:[XJPickPhotoCollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([XJPickPhotoCollectionViewCell class])];}return _pickPhotoCollection; } -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{return 1; }-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{return self.photoArray.count + 1 > 9 ? 9 : self.photoArray.count +1; }-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{XJPickPhotoCollectionViewCell *cell = (XJPickPhotoCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([XJPickPhotoCollectionViewCell class]) forIndexPath:indexPath];//判断图片的显示方式 如果不是9张图 则显示可以继续添加if (self.photoArray.count == 9) {cell.photoImageView.image = self.photoArray[indexPath.row];return cell;}if (indexPath.row == self.photoArray.count) {cell.photoImageView.image = [UIImage imageNamed:@"addPhoto"];}else{cell.photoImageView.image = self.photoArray[indexPath.row];}return cell; }-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{return CGSizeMake(WidthScale(70), WidthScale(70)); } -(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{ // return 2;return (kScreen_width - WidthScale(70)*4 - 10 )/3.; } //-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{ // return (kScreen_width - WidthScale(70)*4 - 10 )/3.; //} -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{return UIEdgeInsetsMake(5, 5, 5, 5); }
关键点在这里:
1-===layout.scrolldirection = uicollectionViewScrollDirectionVertical;collection的滚动方向,由于要折行向下,所以方向是垂直方向,在排列的时候会默认选择先将横向排列完毕,折行向下。
2--=== minmumlinespaceing 这个这个属性用来指示行与行之间的最小距离(纵向),或者列与列之间的最小距离(横向)。无论横向或者纵向,都可以滚动显示所有内容,所以这个属性可以单独设置。 SO 在不同的滚动方向上要分清楚他的作用,我就是在这里弄的头晕目眩; 当然interitem就很好理解了
另外还有一点是 如果是自定义的layout,layout的代理方法是不会执行的,若想达到相同的效果,需要在自定义的layout内部进行处理!
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
转载于:https://www.cnblogs.com/lidarui/p/6931415.html
关于collectionview布局的坑相关推荐
- ListView Viewholder的坑 线性布局的坑
1.ListView Viewholder的坑 /*** 默认带图片的menu adapter*/public static class MenuImageAdapter extends BaseAd ...
- android 约束布局的坑,android - 使用android约束布局2.0.0 Flow将项目放置一行 - 堆栈内存溢出...
我的xml流程布局 android:id="@+id/fr_mail_viewer_attachments_flow" android:layout_width="0dp ...
- iOS之页面布局-踩坑的原由
iOS之页面布局 原文请点击 在<iOS 7 UI Transition Guide>中有在<iOS 7 UI Transition Guide>的Bar and Bar Bu ...
- 换个花样玩C++(8)吃不透内存布局,坑的是自己,万字经验告诉你类的内存布局
C++内存布局是老生常谈的话题,无论是笔试面试,都会涉及到该类问题,那么这一章节,我们就聊聊内存布局到底是怎么布局的,聊完之后我保证你仍然会回味无穷,并且我提供的几个例子也会让你再一步步踩入雷区. C ...
- iOS开发学无止境 - UICollectionView自定义布局之风火轮[译]
现在有许多极具创造力的网站,几周前我碰巧浏览到一个名为Form Follows Function的网站,上面有各种交互动画.其中最吸引我的是网站上的导航转轮,转轮由各种交互体验海报组成. 原文:UIC ...
- 微信小程序嵌套iframe_H5嵌入微信小程序踩过的坑
关于背景 项目是一个涉及跨移动平台的前端项目,技术使用的是vue,因为项目不是很大,所以没有用到状态管理. 主要是用vue将h5项目编译成静态页面放到服务器的制定地址上,然后在小程序测使用,将服务器上 ...
- 自定义布局和自定义流水布局(CollectionViewLayout和CollectionViewFlowLayout)实例
自定义布局和自定义流水布局(CollectionViewLayout和CollectionViewFlowLayout) 转载:https://www.jianshu.com/p/83f2d6ac7e ...
- 怎么自学python编程-怎么能学习好python编程?有自学的方法吗?
许多零基础的同学们怀疑自学Python究竟能不能,回答是肯定的.自学肯定是可以的,可是必须必备一些标准,文中我和大伙儿汇总一下,具有什么标准可以自学Python. 很多人要想自学Python,要想吃P ...
- [译] NSCollectionView 入门教程
本文翻译自 raywenderlich.com 的 NSCollectionView Tutorial,已咨询对方网站,可至多翻译 10 篇文章. 希望各位有英语阅读能力的话,还是 先打赏 然后去阅读 ...
最新文章
- 七年终登Science封面:最强大脑皮层神经网络重建,揭示迄今哺乳动物最大神经线路图...
- 51单片机 简易光电循迹小车
- vs code打开文件显示的中文乱码
- Nacos(二)之概念
- go micro java_Java Micro Framework:您无法忽略的新趋势
- 回复《论WEB标准专家》。
- java stream流_恕我直言你可能真的不会java第4篇:Stream管道流Map操作
- html5 (个人笔记)
- python用哪种字体比较好_女生练哪种字体比较好?适合女生写的漂亮字体推荐
- 【八大排序】二路归并排序(非递归 + 递归)
- c语言有开始菜单的flybird,C语言实现Flybird
- python 删除指定目录_删除Python中除一个子目录外的目录
- 惠普服务器查看主板型号,win10惠普主板型号查看图文教程。
- 《网络是这样连接的》读书笔记2
- 设计模式之禅【门面模式】
- 根文件系统与文件系统的区别
- 引力产生的原因是什么
- js提交成功后,清空表单
- 全息投影在博物馆中有哪些作用
- mac 开启终端代理
热门文章
- python2打开文件_关于python:何时以二进制模式打开文件(b)?
- 苹果开发者账号可以创建多少测试证书_ios苹果企业账号你所不知道的那些点
- 支付宝pc支付php,laravel框架下的pc支付宝支付接入
- dalsa工业相机8k参数_工业传感器再掀巨浪 | Teledyne 以80亿美元收购FLIR,互补性产品组合又增体量...
- 计算机网络标准体系,计算机网络标准体系结构实验报告.doc
- android readonly file system,安卓ROOT权限下“Read-only file sytem”解决办法
- mysql数据库表中的类型_MySQL数据库中表类型MyISAM与InnoDB的区别
- 计算机系统的指令系统,计算机指令系统指的是什么呢?
- androidstudio --debug 出现 source code not match bytecode
- Sublime Text提示Unable to download XXX. Please view the console for more details安装插件失败解决