关于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布局的坑的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。