Search code examples
iosswift3uicollectionviewuicollectionviewcell

How to create a border of solid colour around all the items in a collection view with a seperate colour for the collection view background?


Given that using the minimumInteritemSpacing / minimumLineSpacing settings on an iOS collection view creates a space rather than a solid border between cells, how can we style a solid border of consistent width around each cell in a collection view grid with a seperate colour applied as the background to the main collection view (so that after the border of the last cell a different background colour is visible) using these methods?

This is the best example of a solution I have seen so far but it is for objective C only rather than swift 3. The author also outlines the shortcomings of a couple of approaches I have already tried:

UICollectionView custom line separators

As an additional note the grid contains items of varying dimensions as illustrated here:

github.com/Antondomashnev/ADMozaicCollectionViewLayout

Edit - Here is an image of the effect I'm trying to achieve:

Custom CollectionView

It also highlights the problem that whil]1st the blue borders are most easily created using minimumInteritemSpacing / minimumLineSpacing the spaces created (whilst accurate and evenly spaced) just show the colour of the background view beneath the cells so you are left with one solid colour as opposed to the blue and yellow combination shown in the image.


Solution

  • I was able to get the result I wanted by setting a minimumLineSpacing and minimumInterimItemSpacing value of 0 to group the cells together and dynamically adding / removing borders as CALayers using krotov's answer here: UIView bottom border?