ios - UICollectionView spacing margins

ID : 20190

viewed : 52

Tags : iosuicollectionviewuikitios

Top 5 Answer for ios - UICollectionView spacing margins

vote vote

100

You can use the collectionView:layout:insetForSectionAtIndex: method for your UICollectionView or set the sectionInset property of the UICollectionViewFlowLayout object attached to your UICollectionView:

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

or

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

Updated for Swift 5

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

81

Setting up insets in Interface Builder like shown in the screenshot below

Setting section insets for UICollectionView

Will result in something like this:

A collection view cell with section insets

vote vote

80

To add spacing on the entire UICollectionView:

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

To play with the spacing between elements of the same row (column if you're scrolling horizontally), and their sizes:

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

65

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 = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)      //collectionView.frame.width is the same as  UIScreen.main.bounds.size.width here.     let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1)      flow.itemSize = CGSize(width: floor(width/itemsInOneLine), height: width/itemsInOneLine)     flow.minimumInteritemSpacing = 3     flow.minimumLineSpacing = itemSpacing 

EDIT

If you want to change to scrollDirction horizontally:

flow.scrollDirection = .horizontal

NOTE

If you set items in one lines isn't correctly, check if your collection view has paddings. That is:

let width = UIScreen.main.bounds.size.width - itemSpacing * CGFloat(itemsInOneLine - 1)

should be the collectionView width.

enter image description here

vote vote

52

Just to correct some wrong information in this page:

1- minimumInteritemSpacing: The minimum spacing to use between items in the same row.

The default value: 10.0.

(For a vertically scrolling grid, this value represents the minimum spacing between items in the same row.)

2- minimumLineSpacing : The minimum spacing to use between lines of items in the grid.

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

Top 3 video Explaining ios - UICollectionView spacing margins

Related QUESTION?