Cell spacing in UICollectionView

Question

How do I set cell spacing in a section of UICollectionView  I know there is a property minimumInteritemSpacing I have set it to 5 0 still the spacing is not appearing 5 0  I have implemented the flowout delegate method   -  CGFloat collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout minimumInteritemSpacingForSectionAtIndex  NSInteger section        return 5 0      still I am not getting the desired result  I think its the minimum spacing   Isn t there any way by which I can set the maximum spacing

User · Answer

I m using monotouch  so the names and code will be a bit different  but you can do this by making sure that the width of the collectionview equals  x   cell width     x-1    MinimumSpacing with x   amount of cells per row   Just do following steps based on your MinimumInteritemSpacing and the Width of the Cell  1  We calculate amount of items per row based on cell size   current insets   minimum spacing  float currentTotalWidth   CollectionView Frame Width - Layout SectionInset Left - Layout SectionInset Right  Layout   flowlayout  int amountOfCellsPerRow    currentTotalWidth   MinimumSpacing     cell width   MinimumSpacing    2  Now you have all info to calculate the expected width for the collection view  float totalWidth   amountOfCellsPerRow   cell width     amountOfCellsPerRow-1    MinimumSpacing   3  So the difference between the current width and the expected width is  float difference   currentTotalWidth - totalWidth    4  Now adjust the insets  in this example we add it to the right  so the left position of the collectionview stays the same  Layout SectionInset Right   Layout SectionInset Right   difference

User · Answer

Simple code for spacing  let layout   collectionView collectionViewLayout as  UICollectionViewFlowLayout layout minimumInteritemSpacing   10    Some float value

User · Answer

I have found very easy way to configure spacing between cells or rows by using IB     Just select UICollectionView from storyboard Xib file and click in Size Inspector as specified in below image       For configuring space programatically use following properties   1  For setting space between rows      self collectionView setMinimumLineSpacing 5     2  For setting space between items cells    self collectionView setMinimumInteritemSpacing 5

User · Answer

I have a horizontal UICollectionView and subclassed UICollectionViewFlowLayout  The collection view has large cells  and only shows one row of them at a time  and the collection view fits the width of the screen   I tried iago849 s answer and it worked  but then I found out I didn t even need his answer  For some reason  setting the minimumInterItemSpacing does nothing  The spacing between my items cells can be entirely controlled by minimumLineSpacing   Not sure why it works this way  but it works

User · Answer

Swift 3 Version  Simply create a UICollectionViewFlowLayout subclass and paste this method   override func layoutAttributesForElements in rect  CGRect  - gt   UICollectionViewLayoutAttributes             guard let answer   super layoutAttributesForElements in  rect  else   return nil            for i in 1   lt answer count               let currentAttributes   answer i              let previousAttributes   answer i - 1               let maximumSpacing  CGFloat   8             let origin   previousAttributes frame maxX              if  origin   maximumSpacing   currentAttributes frame size width  lt  self collectionViewContentSize width  amp  amp  currentAttributes frame origin x  gt  previousAttributes frame origin x                    var frame   currentAttributes frame                 frame origin x   origin   maximumSpacing                 currentAttributes frame   frame                                  return answer

User · Answer

Remember  it is minimum line space  not minimum inter item spacing or cell space  Because your collectionView s scroll direction is HORIZONTAL   If it is vertical then you need to set cell space or inter item space for horizontal space between cells and line spacing for vertical space between cells    Objective-C version  -  CGFloat collectionView  UICollectionView   collectionView                        layout  UICollectionViewLayout  collectionViewLayout     minimumLineSpacingForSectionAtIndex  NSInteger section               return 20          Swift version   func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  minimumLineSpacingForSectionAt section  Int  - gt  CGFloat       return 20

User · Answer

My solution in Swift 3 cell line spacing like in Instagram     lazy var collectionView  UICollectionView         let layout   UICollectionViewFlowLayout       let cv   UICollectionView frame   zero  collectionViewLayout  layout      cv backgroundColor   UIColor rgb red  227  green  227  blue  227      cv showsVerticalScrollIndicator   false     layout scrollDirection    vertical     layout minimumLineSpacing   1     layout minimumInteritemSpacing   1     return cv      func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  sizeForItemAt indexPath  IndexPath  - gt  CGSize        switch UIDevice current modelName       case  iPhone 4           return CGSize width  106  height  106      case  iPhone 5           return CGSize width  106  height  106      case  iPhone 6 7           return CGSize width  124  height  124      case  iPhone Plus           return CGSize width  137  height  137      default          return CGSize width  frame width   3  height  frame width   3            How to detect device programmaticlly   https   stackoverflow com a 26962452 6013170

User · Answer

Define UICollectionViewDelegateFlowLayout protocol in your header file   Implement following method of UICollectionViewDelegateFlowLayout protocol like this   -  UIEdgeInsets collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout insetForSectionAtIndex  NSInteger section       return UIEdgeInsetsMake 5  5  5  5       Click Here to see Apple Documentation of UIEdgeInsetMake method

User · Answer

I have tried iago849 s answer and it worked   Swift 4  open override func layoutAttributesForElements in rect  CGRect  - gt   UICollectionViewLayoutAttributes         guard let answer   super layoutAttributesForElements in  rect  else           return nil           let count   answer count     for i in 1   lt count           let currentLayoutAttributes   answer i          let prevLayoutAttributes   answer i-1          let origin   prevLayoutAttributes frame maxX         if  origin   CGFloat spacing    currentLayoutAttributes frame size width   lt  self collectionViewContentSize width  amp  amp  currentLayoutAttributes frame origin x  gt  prevLayoutAttributes frame origin x               var frame   currentLayoutAttributes frame             frame origin x   origin   CGFloat spacing              currentLayoutAttributes frame   frame                     return answer     Here is the link for the github project  https   github com vishalwaka MultiTags

User · Answer

Please note the property name minimumInterItemSpacing   This will be the minimum spacing between the items not the exact spacing  If you set  minimumInterItemSpacing to some value you can assure that spacing wont be a value less than that  But there is a chance get a higher value     Actually the spacing between items depends on several factors itemSize and sectionInset  Collection view dynamically place the contents based on these values  So you cannot assure the exact spacing  You should do some trial and error with sectionInset and minimumInterItemSpacing

User · Answer

Try playing around with this method   -  UIEdgeInsets collectionView  UICollectionView   collectionView                     layout  UICollectionViewLayout  collectionViewLayout     insetForSectionAtIndex  NSInteger section        UIEdgeInsets insets   UIEdgeInsetsMake                   return insets

User · Answer

If u want to tweak the spacing without touching the actual cell size  this is the solution that worked best for me   xcode 9  tvOS11  iOS11  swift  So in UICollectionViewDelegateFlowLayout  change implement the next methods  the trick is u have to use both of them  and the documentation was not really pointing me to think in that direction   D  open func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  minimumInteritemSpacingForSectionAt section  Int  - gt  CGFloat       return cellSpacing    public func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  minimumLineSpacingForSectionAt section  Int  - gt  CGFloat       return cellSpacing

User · Answer

I have problem with the accepted answer  so I updated it  this is working for me    h   interface MaxSpacingCollectionViewFlowLayout   UICollectionViewFlowLayout  property  nonatomic assign  CGFloat maxCellSpacing   end    m   implementation MaxSpacingCollectionViewFlowLayout  -  NSArray    layoutAttributesForElementsInRect  CGRect rect       NSArray  attributes    super layoutAttributesForElementsInRect rect        if  attributes count  lt   0  return attributes       CGFloat firstCellOriginX     UICollectionViewLayoutAttributes   attributes 0   frame origin x       for int i   1  i  lt  attributes count  i              UICollectionViewLayoutAttributes  currentLayoutAttributes   attributes i           if  currentLayoutAttributes frame origin x    firstCellOriginX       The first cell of a new row             continue                     UICollectionViewLayoutAttributes  prevLayoutAttributes   attributes i - 1           CGFloat prevOriginMaxX   CGRectGetMaxX prevLayoutAttributes frame           if   currentLayoutAttributes frame origin x - prevOriginMaxX   gt  self maxCellSpacing                CGRect frame   currentLayoutAttributes frame              frame origin x   prevOriginMaxX   self maxCellSpacing              currentLayoutAttributes frame   frame                      return attributes      end

User · Answer

I stumbled upon a similar problem as OP  Unfortunately the accepted answer did not work for me since the content of the collectionView would not be centered properly  Therefore I came up with a different solution which only requires that all items in the collectionView are of the same width  which seems to be the case in the question    define cellSize 90  -  UIEdgeInsets collectionView  UICollectionView   collectionView layout  UICollectionViewLayout   collectionViewLayout insetForSectionAtIndex  NSInteger section       float width   collectionView frame size width      float spacing    self collectionView collectionView layout collectionViewLayout minimumInteritemSpacingForSectionAtIndex section       int numberOfCells    width   spacing     cellSize   spacing       int inset    width   spacing - numberOfCells    cellSize   spacing      2       return UIEdgeInsetsMake 0  inset  0  inset       That code will ensure that the value returned by    minimumInteritemSpacing    will be the exact spacing between every collectionViewCell and furthermore guarantee that the cells all together will be centered in the collectionView

User · Answer

Well  if you re creating a horizontal collection view then to give space between the cells  you need to set the property minimumLineSpacing

User · Answer

The voted answer  and also the swift version  has a small issue  there will be a big spacing on the right   This is because the flow layout is customised to make the cell spacing exact  with a float left behaviour   My solution is to manipulate the section inset  so that the section is align center  yet the spacing is exactly as specified   In screenshot below  the item line spacing is exactly 8pt  while the section left  amp  right inset will be bigger than 8pt  to make it center aligned      Swift code as such   private let minItemSpacing  CGFloat   8 private let itemWidth  CGFloat        100 private let headerHeight  CGFloat     32  override func viewDidLayoutSubviews         super viewDidLayoutSubviews           Create our custom flow layout that evenly space out the items  and have them in the center     let layout   UICollectionViewFlowLayout       layout itemSize   CGSize width  itemWidth  height  itemWidth      layout minimumInteritemSpacing   minItemSpacing     layout minimumLineSpacing   minItemSpacing     layout headerReferenceSize   CGSize width  0  height  headerHeight          Find n  where n is the number of item that can fit into the collection view     var n  CGFloat   1     let containerWidth   collectionView bounds width     while true           let nextN   n   1         let totalWidth    nextN itemWidth     nextN-1  minItemSpacing         if totalWidth  gt  containerWidth               break           else               n   nextN                         Calculate the section inset for left and right          Setting this section inset will manipulate the items such that they will all be aligned horizontally center      let inset   max minItemSpacing  floor   containerWidth -  n itemWidth  -  n-1  minItemSpacing    2         layout sectionInset   UIEdgeInsets top  minItemSpacing  left  inset  bottom  minItemSpacing  right  inset       collectionView collectionViewLayout   layout

User · Answer

Swift version of the most popular answer  Space between the cells will be equal to cellSpacing   class CustomViewFlowLayout   UICollectionViewFlowLayout        let cellSpacing CGFloat   4      override func layoutAttributesForElementsInRect rect  CGRect  - gt   UICollectionViewLayoutAttributes             if let attributes   super layoutAttributesForElementsInRect rect            for  index  attribute  in attributes enumerate                     if index    0   continue                   let prevLayoutAttributes   attributes index - 1                  let origin   CGRectGetMaxX prevLayoutAttributes frame                  if origin   cellSpacing   attribute frame size width  lt  self collectionViewContentSize   width                        attribute frame origin x   origin   cellSpacing                                             return attributes                   return nil

User · Answer

The above solution by vojtech-vrbka is correct but it triggers a warning      warning UICollectionViewFlowLayout has cached frame mismatch for index path - cached value  This is likely occurring because the flow layout subclass Layout is modify attributes returned by UICollectionViewFlowLayout without copying them   The following code should fix it   class CustomViewFlowLayout   UICollectionViewFlowLayout       let cellSpacing CGFloat   4     override func layoutAttributesForElementsInRect rect  CGRect  - gt   UICollectionViewLayoutAttributes            let original   super layoutAttributesForElementsInRect rect          if let original   original              let attributes   NSArray init array  original  copyItems  true  as   UICollectionViewLayoutAttributes              for  index  attribute  in attributes enumerate                     if index    0   continue                   let prevLayoutAttributes   attributes index - 1                  let origin   CGRectGetMaxX prevLayoutAttributes frame                  if origin   cellSpacing   attribute frame size width  lt  self collectionViewContentSize   width                        attribute frame origin x   origin   cellSpacing                                             return attributes                 return nil

User · Answer

Using a horizontal flow layout  I was also getting a 10 points spacing between cells  To remove the spacing I needed to set minimumLineSpacing as well as minimumInterItemSpacing to zero   UICollectionViewFlowLayout  flow     UICollectionViewFlowLayout alloc  init   flow itemSize   CGSizeMake cellWidth  cellHeight   flow scrollDirection   UICollectionViewScrollDirectionHorizontal  flow minimumInteritemSpacing   0  flow minimumLineSpacing   0    Also  if all your cells are the same size  it s simpler and more efficient to set the property on the flow layout directly instead of using delegate methods

User · Answer

I know that the topic is old  but in case anyone still needs correct answer here what you need    Override standard flow layout  Add implementation like that   -  NSArray    layoutAttributesForElementsInRect  CGRect rect       NSArray  answer    super layoutAttributesForElementsInRect rect        for int i   1  i  lt   answer count     i            UICollectionViewLayoutAttributes  currentLayoutAttributes   answer i           UICollectionViewLayoutAttributes  prevLayoutAttributes   answer i - 1           NSInteger maximumSpacing   4          NSInteger origin   CGRectGetMaxX prevLayoutAttributes frame            if origin   maximumSpacing   currentLayoutAttributes frame size width  lt  self collectionViewContentSize width                CGRect frame   currentLayoutAttributes frame              frame origin x   origin   maximumSpacing              currentLayoutAttributes frame   frame                      return answer       where maximumSpacing could be set to any value you prefer  This trick guarantees that the space between cells would be EXACTLY equal to maximumSpacing

User · Answer

Supporting the initial question  I tried to get the spacing to 5px on the UICollectionView but this does not work  as well with a UIEdgeInsetsMake 0 0 0 0       On a UITableView I can do this by directly specifying the x y coordinates in a row        Heres my UICollectionView code    pragma mark collection view cell layout   size -  CGSize collectionView  UICollectionView  collectionView layout  UICollectionViewLayout   collectionViewLayout sizeForItemAtIndexPath  NSIndexPath   indexPath       return  self getCellSize indexPath       will be w120xh100 or w190x100        if the width is higher  only one image will be shown in a line     pragma mark collection view cell paddings -  UIEdgeInsets collectionView  UICollectionView  collectionView layout  UICollectionViewLayout   collectionViewLayout insetForSectionAtIndex  NSInteger section       return UIEdgeInsetsMake 0  0  0  0      top  left  bottom  right    -  CGFloat collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout minimumInteritemSpacingForSectionAtIndex  NSInteger section        return 5 0      Update  Solved my problem  with the following code     ViewController m   import  ViewController h   import  MagazineCell h     created just the default class    static NSString   const cellID     cellID     interface ViewController      end   implementation ViewController   pragma mark - Collection view - NSInteger numberOfSectionsInCollectionView  UICollectionView   collectionView       return 1    - NSInteger collectionView  UICollectionView   collectionView numberOfItemsInSection  NSInteger section       return 30     - UICollectionViewCell   collectionView  UICollectionView   collectionView cellForItemAtIndexPath  NSIndexPath   indexPath       MagazineCell  mCell    MagazineCell    collectionView dequeueReusableCellWithReuseIdentifier cellID forIndexPath indexPath        mCell backgroundColor    UIColor lightGrayColor        return mCell      pragma mark Collection view layout things    Layout  Set cell size -  CGSize collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout sizeForItemAtIndexPath  NSIndexPath   indexPath        NSLog   SETTING SIZE FOR ITEM AT INDEX  d   indexPath row       CGSize mElementSize   CGSizeMake 104  104       return mElementSize    -  CGFloat collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout minimumInteritemSpacingForSectionAtIndex  NSInteger section       return 2 0     -  CGFloat collectionView  UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout minimumLineSpacingForSectionAtIndex  NSInteger section       return 2 0        Layout  Set Edges -  UIEdgeInsets collectionView   UICollectionView   collectionView layout  UICollectionViewLayout  collectionViewLayout insetForSectionAtIndex  NSInteger section         return UIEdgeInsetsMake 0 8 0 8       top  left  bottom  right     return UIEdgeInsetsMake 0 0 0 0       top  left  bottom  right     end

User · Answer

Answer for Swift 3 0  Xcode 8  1 Make sure you set collection view delegate   class DashboardViewController  UIViewController        IBOutlet weak var dashboardCollectionView  UICollectionView       override func viewDidLoad             super viewDidLoad           dashboardCollectionView delegate   self           2 Implement UICollectionViewDelegateFlowLayout protocol  not UICollectionViewDelegate   extension DashboardViewController  UICollectionViewDelegateFlowLayout       fileprivate var sectionInsets  UIEdgeInsets           return  zero            fileprivate var itemsPerRow  CGFloat           return 2            fileprivate var interitemSpace  CGFloat           return 5 0            func collectionView   collectionView  UICollectionView                          layout collectionViewLayout  UICollectionViewLayout                          sizeForItemAt indexPath  IndexPath  - gt  CGSize           let sectionPadding   sectionInsets left    itemsPerRow   1          let interitemPadding   max 0 0  itemsPerRow - 1    interitemSpace         let availableWidth   collectionView bounds width - sectionPadding - interitemPadding         let widthPerItem   availableWidth   itemsPerRow          return CGSize width  widthPerItem  height  widthPerItem             func collectionView   collectionView  UICollectionView                          layout collectionViewLayout  UICollectionViewLayout                          insetForSectionAt section  Int  - gt  UIEdgeInsets           return sectionInsets            func collectionView   collectionView  UICollectionView                          layout collectionViewLayout  UICollectionViewLayout                          minimumLineSpacingForSectionAt section  Int  - gt  CGFloat           return 0 0            func collectionView   collectionView  UICollectionView  layout collectionViewLayout  UICollectionViewLayout  minimumInteritemSpacingForSectionAt section  Int  - gt  CGFloat           return interitemSpace

User · Answer

Try this code to ensure you have a spacing of 5px between each item   -  UIEdgeInsets collectionView  UICollectionView    collectionView                          layout  UICollectionViewLayout    collectionViewLayout          insetForSectionAtIndex  NSInteger  section        return UIEdgeInsetsMake 0  0  0  5      top  left  bottom  right    -  CGFloat collectionView  UICollectionView    collectionView                    layout  UICollectionViewLayout    collectionViewLayout   minimumInteritemSpacingForSectionAtIndex  NSInteger  section           return 5 0

User · Answer

Storyboard Approach  Select CollectionView in your storyboard and go to size inspector and set min spacing for cells and lines as 5    Swift 5 Programmatically  lazy var collectionView  UICollectionView             let layout   UICollectionViewFlowLayout           layout scrollDirection    horizontal            Provide Width and Height According to your need         let width   UIScreen main bounds width   4         let height   UIScreen main bounds height   10         layout itemSize   CGSize width  width  height  height             For Adjusting the cells spacing         layout minimumInteritemSpacing   5         layout minimumLineSpacing   5          return UICollectionView frame  self view frame  collectionViewLayout  layout

User · Answer

I had done every thing just fine except setting   layout scrollDirection    horizontal

User · Answer

Previous versions did not really work with sections   1  So my solution was found here https   codentrick com create-a-tag-flow-layout-with-uicollectionview   For the lazy ones   override func layoutAttributesForElements in rect  CGRect  - gt   UICollectionViewLayoutAttributes         let attributesForElementsInRect   super layoutAttributesForElements in  rect      var newAttributesForElementsInRect    UICollectionViewLayoutAttributes           use a value to keep track of left margin     var leftMargin  CGFloat   0 0      for attributes in attributesForElementsInRect            let refAttributes   attributes             assign value if next row         if  refAttributes frame origin x    self sectionInset left                leftMargin   self sectionInset left           else                  set x position of attributes to current margin             var newLeftAlignedFrame   refAttributes frame             newLeftAlignedFrame origin x   leftMargin             refAttributes frame   newLeftAlignedFrame                      calculate new value for current margin         leftMargin    refAttributes frame size width   10         newAttributesForElementsInRect append refAttributes             return newAttributesForElementsInRect

[ios] Cell spacing in UICollectionView

Examples related to ios

Examples related to objective-c

Examples related to uicollectionview