不知道写了多少次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;