我有一张显示照片的UICollectionView
。我使用UICollectionViewFlowLayout
创建了集合视图。它工作得很好,但我希望在边距上有间距。是否可以使用UICollectionViewFlowLayout
执行此操作,还是必须实现自己的UICollectionViewLayout
?
答案 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中设置插件,如下面的屏幕截图所示
会导致类似这样的事情:
答案 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 :网格中项目行之间使用的最小间距。
答案 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
答案 5 :(得分:8)
在setMinimumLineSpacing:
- 对象上使用setMinimumInteritemSpacing:
和UICollectionViewFlowLayout
。
答案 6 :(得分:7)
虽然这个帖子已经包含了许多有用的答案,但我想根据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.sectionInset
或collectionView: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值,它将相应地更新每行的项目数。此外,如果您想要更多或更少的一般间距,可以更改间距值。
答案 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);
}