UICollectionView 在单元格之间添加间隙答案

【问题标题】：UICollectionView add gap between cellsUICollectionView 在单元格之间添加间隙
【发布时间】：2016-05-19 09:32:01
【问题描述】：

我使用ALAssetsLibrary访问系统照片库进行预览和多选照片，就像原始系统照片库一样，我可以滚动预览照片。我通过UICollectionView和UICollectionViewFlowLayout实现它。除了一个小问题，一切都很顺利。

当我使用 iOS 系统照片库并滚动预览照片时，两张照片之间存在间隙，如下所示。

在我的应用中，滚动时两张照片之间没有间隙。我将UICollectionView 分页和UICollectionViewFlowLayout 单元格空间（minimumLineSpacing 和minimumInteritemSpacing）设置为零两个都。

如何让我的照片预览像系统照片库一样，在两张滚动照片之间有差距？我是 UICollectionView 的新手，我不确定差距 strong> 由SupplementaryView 或其他任何东西实现。

【问题讨论】：

通过在两边加上10px来减小UICollectionViewCell中ImageView的宽度。我的意思是如果集合视图单元格宽度为320px，则将图像宽度指定为300px 并垂直居中对齐。
但是我想全屏显示照片，只有在滚动时才有间隙，就像iOS系统的照片库一样。你的方法显示照片不是全屏。@SriKanth
你实现了 minimumInteritemSpacingForSectionAtIndex 和 minimumInteritemSpacingForSectionAtIndex 委托方法吗？
您必须维护两个UICollectionViewFlowLayout 对象才能实现此目的。一个用于全屏宽度，一个用于间隙，只需更改每个布局的项目大小，当用户启用预览模式时，使用 UICollectionView 的 performBatchUpdates 块方法更改布局@

标签： ios objective-c iphone swift uicollectionview

【解决方案1】：

这可以在

中完成

将 UICollectionView 框架宽度设置为大于屏幕宽度。

layout = [[UICollectionViewFlowLayout alloc]init];
CGRect cSize = self.view.bounds;
layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
// 1. UICollectionView frame width lager than screen with => Screen width + 2*(required Space)
cSize.size.width += 20; 
self.collectionGallery = [[UICollectionView alloc]initWithFrame:cSize collectionViewLayout:layout];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.minimumInteritemSpacing = 0;
layout.minimumLineSpacing = 0;

设置 UIImageView 框架宽度等于屏幕宽度。

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

GalleryCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];

cell.imageGallery.contentMode = UIViewContentModeScaleAspectFit;
// 2
cell.imageGallery.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);

return cell;
}

单元格宽度应大于屏幕宽度，与步骤 1 相同。

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGSize size = CGSizeMake(self.view.frame.size.width + 20, self.view.frame.size.height); // cell size should be same as collectionview width
return size;
}

希望这会对您有所帮助。如果这解决了您的问题，请发表评论并投票

【讨论】：

这是一种非常聪明的方法，而且确实有效！我也通过自动布局成功。谢谢！
顺便说一句，段数或段中的项数与间隙无关。关键是设置UICollectionView帧宽度大于屏幕宽度和UIImageView帧等于屏幕宽度。您能改进一下答案吗？
@Xingxing 谢谢你的支持，我已经编辑了答案。

【解决方案2】：

您可以将流布局的属性.itemSize = CGSizeMake(desiredWidth, desiredHeight); 设置为图像页面所需的大小。

在此之后，.minimumInteritemSpacing 将正常工作。

要在预览和集合之间进行切换，使用两个FlowLayout，一个有间隙，一个没有间隙。

【讨论】：

【解决方案3】：

最小间距和剖面插图将为您完成工作。

不要这样做 -> 单元格空间（minimumLineSpacing 和 minimumInteritemSpacing）都为零。

【讨论】：

【解决方案4】：

这个 UICollectionViewFlowLayoutDelegate 方法会帮助你..

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionView *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section  
  {
    return 10; // This is the minimum inter item spacing, can be more
  }

如果您需要更多空间来排列单元格，还可以调整 edgeInsets

【讨论】：

【解决方案5】：

使用下面的代码，如果使用miniumInteritemSpacingForSectionAtIndex:，每个项目之间的间距为5px并且你需要边距，在insetForSectionAtIndex:中设置该方法的值top,left,bottom,right,

- (UIEdgeInsets)collectionView:(UICollectionView *) collectionView 
                        layout:(UICollectionViewLayout *) collectionViewLayout 
        insetForSectionAtIndex:(NSInteger) section {

    return UIEdgeInsetsMake(0, 0, 0, 0); // top, left, bottom, right
}

- (CGFloat)collectionView:(UICollectionView *) collectionView
                   layout:(UICollectionViewLayout *) collectionViewLayout
  minimumInteritemSpacingForSectionAtIndex:(NSInteger) section {    
    return 5.0;
}

希望对你有帮助

【讨论】：