在UICollectionView的每个边缘周围放置边距

时间:2013-06-05 08:18:19

标签: ios uicollectionview uicollectionviewlayout

当UICollectionView填充了项目时,它们总是直接进入UICollectionView的边缘,如下所示:

---------------
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
---------------

我想像每个边缘一样留下边距:

---------------
| X X X X X X |
| X X X X X X |
| X X X X X X |
| X X X X X X |
| X X X X X X |
| X X X X X X |
---------------

我尝试通过将UICollectionView放置在其托管UIView中来实现此目的,方法是将其框架设置为模拟边框,但它在框架内滚动,因此在顶部和底部切断,滚动条也出现在框架的边界内

我已经查看了API,但我看不到任何明显的实现这一点。有什么想法吗?

7 个答案:

答案 0 :(得分:40)

我知道这是一个老问题,但不要忘记UICollectionView继承自UIScrollView。

UICollectionView *collectionView = [[UICollectionView alloc] init];
collectionView.contentInset = UIEdgeInsetsMake(x.x, x.x, x.x, x.x);
// Swift 3 for good measure
let collectionView = UICollectionView()
collectionView.contentInset = UIEdgeInsets(top: x.x, left: x.x, bottom: x.x, right: x.x)

请注意,contentInset和sectionInset都可能会更改视图中单元格的间距。有关详细信息,请参阅this发布。

答案 1 :(得分:15)

您可以使用以下功能。

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
  {
      return UIEdgeInsetsMake(50, 50,15,50);
  }

您将不得不使用该数字来弄清楚如何在一行中强制使用collectionviewCells。

UIEdgeInsetsMake ( CGFloat top,CGFloat left,CGFloat bottom,CGFloat right); 

适用于Swift 3

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(10, 4, 10, 4)
}

答案 2 :(得分:10)

您可以使用collectionview的协议控制网格的各个方面。这是一个例子:

- (UICollectionViewFlowLayout *)collectionViewFlowLayout
{
    UICollectionViewFlowLayout *flowLayout = [UICollectionViewFlowLayout new];
    flowLayout.itemSize = CGSizeMake(180, 255);
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 30, 0, 30);
    flowLayout.minimumInteritemSpacing = 0.0f;
    flowLayout.minimumLineSpacing = 0.0f;
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    return flowLayout;
}

您希望在案例中更改的是sectionInsets

答案 3 :(得分:7)

(UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
}

你可以在左侧给你的细胞留出一些余量。

或者您可以创建具有边距的自定义单元格。

或者您可以设置CollectionviewFlowLayout的属性 .sectionInset ,这应该是最简单的方法(如果您使用FlowLayout)

答案 4 :(得分:3)

  

Swift 2.0

self.automaticallyAdjustsScrollViewInsets = false
self.collectionView.contentInset = UIEdgeInsets(top: 10, left: 0, bottom: 0, right: 0)

答案 5 :(得分:1)

在Xcode 8上,如果您正在使用界面构建器,则可以在Size Inspector上设置Section Insets:

enter image description here

enter image description here

答案 6 :(得分:1)

更新了Swift 4 Vinayak Kini回答):

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
}