UICollectionView间距边距

时间:2012-12-20 11:14:03

标签: ios uicollectionview uikit

我有一张显示照片的UICollectionView。我使用UICollectionViewFlowLayout创建了集合视图。它工作得很好,但我希望在边距上有间距。是否可以使用UICollectionViewFlowLayout执行此操作,还是必须实现自己的UICollectionViewLayout

15 个答案:

答案 0 :(得分:300)

您可以对collectionView:layout:insetForSectionAtIndex:使用UICollectionView方法,也可以设置sectionInset附加的UICollectionViewFlowLayout对象的UICollectionView属性:

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(top, left, bottom, right);
}

UICollectionViewFlowLayout *aFlowLayout = [[UICollectionViewFlowLayout alloc] init];
[aFlowLayout setSectionInset:UIEdgeInsetsMake(top, left, bottom, right)];

答案 1 :(得分:86)

在Interface Builder中设置插件,如下面的屏幕截图所示

Setting section insets for UICollectionView

会导致类似这样的事情:

A collection view cell with section insets

答案 2 :(得分:71)

整个 UICollectionView上添加间距:

UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*) collection.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(topMargin, left, bottom, right);

使用相同行的间距(如果您水平滚动,则为列)以及它们的大小:

flow.itemSize = ...;
flow.minimumInteritemSpacing = ...;

答案 3 :(得分:39)

只需更正此页面中的错误信息:

1- minimumInteritemSpacing 同一行中各项之间的最小间距。

默认值:10.0。

(对于垂直滚动网格,此值表示同一行中项目之间的最小间距。)

2- minimumLineSpacing 网格中项目行之间使用的最小间距。

参考:http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewFlowLayout_class/Reference/Reference.html

答案 4 :(得分:33)

Swift 4

    let flow = collectionView.collectionViewLayout as! UICollectionViewFlowLayout // If you create collectionView programmatically then just create this flow by UICollectionViewFlowLayout() and init a collectionView by this flow.

    let itemSpacing: CGFloat = 3
    let itemsInOneLine: CGFloat = 3
    flow.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
    let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1) //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.
    flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)
    flow.minimumInteritemSpacing = 3
    flow.minimumLineSpacing = 3

enter image description here

答案 5 :(得分:8)

setMinimumLineSpacing: - 对象上使用setMinimumInteritemSpacing:UICollectionViewFlowLayout

答案 6 :(得分:7)

现代Swift,自动布局计算

虽然这个帖子已经包含了许多有用的答案,但我想根据William Hu的答案添加一个现代Swift版本。它还改进了两件事:

  • 现在,不同行之间的间距将始终与同一行中项目之间的间距相匹配。
  • 通过设置最小宽度, 代码自动计算一行中的项目数 将该样式应用于流程布局。

以下是代码:

// Create flow layout
let flow = UICollectionViewFlowLayout()

// Define layout constants
let itemSpacing: CGFloat = 1
let minimumCellWidth: CGFloat = 120
let collectionViewWidth = collectionView!.bounds.size.width

// Calculate other required constants
let itemsInOneLine = CGFloat(Int((collectionViewWidth - CGFloat(Int(collectionViewWidth / minimumCellWidth) - 1) * itemSpacing) / minimumCellWidth))
let width = collectionViewWidth - itemSpacing * (itemsInOneLine - 1)
let cellWidth = floor(width / itemsInOneLine)
let realItemSpacing = itemSpacing + (width / itemsInOneLine - cellWidth) * itemsInOneLine / (itemsInOneLine - 1)

// Apply values
flow.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
flow.itemSize = CGSize(width: cellWidth, height: cellWidth)
flow.minimumInteritemSpacing = realItemSpacing
flow.minimumLineSpacing = realItemSpacing

// Apply flow layout
collectionView?.setCollectionViewLayout(flow, animated: false)

答案 7 :(得分:6)

使用collectionViewFlowLayout.sectionInsetcollectionView:layout:insetForSectionAtIndex:是正确的。

但是,如果你的collectionView有多个部分,并且你想为整个collectionView添加边距,我建议使用scrollView contentInset:

UIEdgeInsets collectionViewInsets = UIEdgeInsetsMake(50.0, 0.0, 30.0, 0.0);
self.collectionView.contentInset = collectionViewInsets;
self.collectionView.scrollIndicatorInsets = UIEdgeInsetsMake(collectionViewInsets.top, 0, collectionViewInsets.bottom, 0);

答案 8 :(得分:5)

CollectionItem之间放置空格使用此

在viewdidload

中写下这两行
UICollectionViewFlowLayout *collectionViewLayout = (UICollectionViewFlowLayout*)self.collectionView.collectionViewLayout;
collectionViewLayout.sectionInset = UIEdgeInsetsMake(<CGFloat top>, <CGFloat left>, <CGFloat bottom>, <CGFloat right>)

答案 9 :(得分:3)

设置附加到insetForSectionAt的{​​{1}}对象的UICollectionViewFlowLayout属性

确保添加此协议

UICollectionView

快速

UICollectionViewDelegateFlowLayout

目标-C

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

答案 10 :(得分:1)

要将边距添加到指定单元格,可以使用此自定义流程布局。 https://github.com/voyages-sncf-technologies/VSCollectionViewCellInsetFlowLayout/

extension ViewController : VSCollectionViewDelegateCellInsetFlowLayout 
{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForItemAt indexPath: IndexPath) -> UIEdgeInsets {
        if indexPath.item == 0 {
            return UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
        }
        return UIEdgeInsets.zero
    }
}

答案 11 :(得分:1)

在Objective-C

CGFloat spacing = 5;
UICollectionViewFlowLayout *flow = (UICollectionViewFlowLayout*)_habbitCollectionV.collectionViewLayout;
flow.sectionInset = UIEdgeInsetsMake(0, spacing, 0, spacing);
CGFloat itemsPerRow = 2;
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat oneMore = itemsPerRow + 1;
CGFloat width = screenRect.size.width - spacing * oneMore;
CGFloat height = width / itemsPerRow;

flow.itemSize = CGSizeMake(floor(height), height);
flow.minimumInteritemSpacing = spacing;
flow.minimumLineSpacing = spacing;

您所要做的就是更改itemsPerRow值,它将相应地更新每行的项目数。此外,如果您想要更多或更少的一般间距,可以更改间距值。

enter image description here enter image description here

答案 12 :(得分:0)

在swift 4和autoLayout中,您可以像这样使用 sectionInset

let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .vertical
        layout.itemSize = CGSize(width: (view.frame.width-40)/2, height: (view.frame.width40)/2) // item size
        layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10) // here you can add space to 4 side of item
        collectionView = UICollectionView(frame: self.view.bounds, collectionViewLayout: layout) // set layout to item
        collectionView?.register(ProductCategoryCell.self, forCellWithReuseIdentifier: cellIdentifier) // registerCell
        collectionView?.backgroundColor = .white // background color of UICollectionView
        view.addSubview(collectionView!) // add UICollectionView to view

答案 13 :(得分:-1)

要在每个部分之间添加10px分隔,只需写下此

flowLayout.sectionInset = UIEdgeInsetsMake(0.0, 0.0,10,0);

答案 14 :(得分:-1)

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