UICollectionView spacing margins

Question

I have a UICollectionView which shows photos  I have created the collectionview using UICollectionViewFlowLayout  It works good but I would like to have spacing on margins  Is it possible to do that using UICollectionViewFlowLayout or must I implement my own UICollectionViewLayout

User · Answer

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

User · Answer

Modern Swift  Automatic Layout Calculation  While this thread already contains a bunch of useful answers  I want to add a modern Swift version  based on William Hu s answer  It also improves two things    The spacing between different lines will now always match the spacing between items in the same line  By setting a minimum width  the code automatically calculates the number of items in a row and applies that style to the flow layout    Here s the code      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   max 1  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

User · Answer

Setting up insets in Interface Builder like shown in the screenshot below    Will result in something like this

User · Answer

To put space between CollectionItems use this   write this two Line in viewdidload  UICollectionViewFlowLayout  collectionViewLayout    UICollectionViewFlowLayout  self collectionView collectionViewLayout  collectionViewLayout sectionInset   UIEdgeInsetsMake  lt CGFloat top gt    lt CGFloat left gt    lt CGFloat bottom gt    lt CGFloat right gt

User · Answer

In 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    All you have to do is change the itemsPerRow value and it will update the number of items per row accordingly   Furthermore  you can change the spacing value if you want more or less general spacing

User · Answer

use setMinimumLineSpacing  and setMinimumInteritemSpacing  on the UICollectionViewFlowLayout-Object

User · Answer

In swift 4 and autoLayout  you can use sectionInset like this   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

User · Answer

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

User · Answer

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  - gt  UIEdgeInsets          return UIEdgeInsets top  25  left  15  bottom  0  right  5

User · Answer

Using collectionViewFlowLayout sectionInset or collectionView layout insetForSectionAtIndex  are correct    However  if your collectionView has multiple sections and you want to add margin to the whole collectionView  I recommend to use the 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

User · Answer

Set the insetForSectionAt property of the UICollectionViewFlowLayout object attached to your UICollectionView  Make sure to add this protocol  UICollectionViewDelegateFlowLayout   Swift  func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  insetForSectionAt section  Int  - gt  UIEdgeInsets           return UIEdgeInsets  top  top  left  left  bottom  bottom  right  right          Objective - C  -  UIEdgeInsets collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout insetForSectionAtIndex  NSInteger section      return UIEdgeInsetsMake top  left  bottom  right

User · Answer

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

User · Answer

-  UIEdgeInsets collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout insetForSectionAtIndex  NSInteger section                   return UIEdgeInsetsMake 7  10  5  10

User · Answer

To add 10px separation between each section just write this  flowLayout sectionInset   UIEdgeInsetsMake 0 0  0 0 10 0

User · Answer

For adding margins to specified cells  you can use this custom flow layout  https   github com voyages-sncf-technologies VSCollectionViewCellInsetFlowLayout   extension ViewController   VSCollectionViewDelegateCellInsetFlowLayout        func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  insetForItemAt indexPath  IndexPath  - gt  UIEdgeInsets           if indexPath item    0               return UIEdgeInsets top  0  left  0  bottom  10  right  0                    return UIEdgeInsets zero

[ios] UICollectionView spacing margins

Examples related to ios

Examples related to uicollectionview

Examples related to uikit