不知道写了多少次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布局的坑相关推荐

  1. ListView Viewholder的坑 线性布局的坑

    1.ListView Viewholder的坑 /*** 默认带图片的menu adapter*/public static class MenuImageAdapter extends BaseAd ...

  2. android 约束布局的坑,android - 使用android约束布局2.0.0 Flow将项目放置一行 - 堆栈内存溢出...

    我的xml流程布局 android:id="@+id/fr_mail_viewer_attachments_flow" android:layout_width="0dp ...

  3. iOS之页面布局-踩坑的原由

    iOS之页面布局 原文请点击 在<iOS 7 UI Transition Guide>中有在<iOS 7 UI Transition Guide>的Bar and Bar Bu ...

  4. 换个花样玩C++(8)吃不透内存布局,坑的是自己,万字经验告诉你类的内存布局

    C++内存布局是老生常谈的话题,无论是笔试面试,都会涉及到该类问题,那么这一章节,我们就聊聊内存布局到底是怎么布局的,聊完之后我保证你仍然会回味无穷,并且我提供的几个例子也会让你再一步步踩入雷区. C ...

  5. iOS开发学无止境 - UICollectionView自定义布局之风火轮[译]

    现在有许多极具创造力的网站,几周前我碰巧浏览到一个名为Form Follows Function的网站,上面有各种交互动画.其中最吸引我的是网站上的导航转轮,转轮由各种交互体验海报组成. 原文:UIC ...

  6. 微信小程序嵌套iframe_H5嵌入微信小程序踩过的坑

    关于背景 项目是一个涉及跨移动平台的前端项目,技术使用的是vue,因为项目不是很大,所以没有用到状态管理. 主要是用vue将h5项目编译成静态页面放到服务器的制定地址上,然后在小程序测使用,将服务器上 ...

  7. 自定义布局和自定义流水布局(CollectionViewLayout和CollectionViewFlowLayout)实例

    自定义布局和自定义流水布局(CollectionViewLayout和CollectionViewFlowLayout) 转载:https://www.jianshu.com/p/83f2d6ac7e ...

  8. 怎么自学python编程-怎么能学习好python编程?有自学的方法吗?

    许多零基础的同学们怀疑自学Python究竟能不能,回答是肯定的.自学肯定是可以的,可是必须必备一些标准,文中我和大伙儿汇总一下,具有什么标准可以自学Python. 很多人要想自学Python,要想吃P ...

  9. [译] NSCollectionView 入门教程

    本文翻译自 raywenderlich.com 的 NSCollectionView Tutorial,已咨询对方网站,可至多翻译 10 篇文章. 希望各位有英语阅读能力的话,还是 先打赏 然后去阅读 ...

最新文章

  1. 七年终登Science封面:最强大脑皮层神经网络重建,揭示迄今哺乳动物最大神经线路图...
  2. 51单片机 简易光电循迹小车
  3. vs code打开文件显示的中文乱码
  4. Nacos(二)之概念
  5. go micro java_Java Micro Framework:您无法忽略的新趋势
  6. 回复《论WEB标准专家》。
  7. java stream流_恕我直言你可能真的不会java第4篇:Stream管道流Map操作
  8. html5 (个人笔记)
  9. python用哪种字体比较好_女生练哪种字体比较好?适合女生写的漂亮字体推荐
  10. 【八大排序】二路归并排序(非递归 + 递归)
  11. c语言有开始菜单的flybird,C语言实现Flybird
  12. python 删除指定目录_删除Python中除一个子目录外的目录
  13. 惠普服务器查看主板型号,win10惠普主板型号查看图文教程。
  14. 《网络是这样连接的》读书笔记2
  15. 设计模式之禅【门面模式】
  16. 根文件系统与文件系统的区别
  17. 引力产生的原因是什么
  18. js提交成功后,清空表单
  19. 全息投影在博物馆中有哪些作用
  20. mac 开启终端代理

热门文章

  1. python2打开文件_关于python:何时以二进制模式打开文件(b)?
  2. 苹果开发者账号可以创建多少测试证书_ios苹果企业账号你所不知道的那些点
  3. 支付宝pc支付php,laravel框架下的pc支付宝支付接入
  4. dalsa工业相机8k参数_工业传感器再掀巨浪 | Teledyne 以80亿美元收购FLIR,互补性产品组合又增体量...
  5. 计算机网络标准体系,计算机网络标准体系结构实验报告.doc
  6. android readonly file system,安卓ROOT权限下“Read-only file sytem”解决办法
  7. mysql数据库表中的类型_MySQL数据库中表类型MyISAM与InnoDB的区别
  8. 计算机系统的指令系统,计算机指令系统指的是什么呢?
  9. androidstudio --debug 出现 source code not match bytecode
  10. Sublime Text提示Unable to download XXX. Please view the console for more details安装插件失败解决