How to show Collectionview cells near to each cell in swift

Question

I need cells one nearby another like below

but i am getting like this: in short phones they are very far from one another

for collectionview i have given constraints like this in stroryboard:

height = 80, leading = trailing = 0, top = 20

and in viewdidload:

  override func viewDidLoad() {
    super.viewDidLoad()
    //services collectionview cell
    let serviceLayout = UICollectionViewFlowLayout()
    serviceLayout.minimumInteritemSpacing = 0
    serviceLayout.minimumLineSpacing = 0
    serviceLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
    self.servicesCollectionView.collectionViewLayout = serviceLayout
    servicesCollectionView.contentInsetAdjustmentBehavior = .always
    servicesCollectionView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)
   }

i haven't given anything more then this.. please do help.. to get collectionview cells to come near to each cell

EDIT:

for servicesCollectionView i have comment everything in the didload and added like this.. then its working

servicesCollectionView.addObserver(self, forKeyPath: "contentSize", options: .new, context: nil)

for this cell i need to show near to each other, how to do that.. plz do suggest

galleryCollectionView.collectionViewLayout = LeftAlignCellCollectionFlowLayout()

    let galleryLayout = UICollectionViewFlowLayout()
    galleryLayout.scrollDirection = .horizontal
    self.galleryCollectionView.collectionViewLayout = galleryLayout
    self.galleryCollectionView!.contentInset = UIEdgeInsets(top: 0, left: 0, bottom:0, right: 0)
    let heightGallery = 120
    let widthGallery = view.frame.size.width
    if let galleryLayout = self.galleryCollectionView.collectionViewLayout as? UICollectionViewFlowLayout {
        galleryLayout.minimumInteritemSpacing = 0
        galleryLayout.minimumLineSpacing = 0
        galleryLayout.itemSize = CGSize(width: widthGallery * 0.7, height: CGFloat(heightGallery))
    }

Answer 1

You need to subclass UICollectionViewFlowLayout to get this behavior.

import UIKit

class LeftAlignCellCollectionFlowLayout: UICollectionViewFlowLayout {

    private(set) var cellHeight: CGFloat = 36
    init(cellHeight: CGFloat) {
        super.init()
        self.cellHeight = cellHeight
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let attributes = super.layoutAttributesForElements(in: rect) else { return nil }
        guard let collectionView = self.collectionView else { return nil }
        
        self.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        self.minimumLineSpacing = 0
        self.minimumInteritemSpacing = 2
        
        var newAttributes = attributes
        var leftMargin = self.sectionInset.left
        var maxY: CGFloat = -1.0
        
        let availableWidth: CGFloat = collectionView.frame.width
        let layout = collectionView.collectionViewLayout
        
        for attribute in attributes {
            if let cellAttribute = layout.layoutAttributesForItem(at: attribute.indexPath) {
                if cellAttribute.frame.width > availableWidth {
                    cellAttribute.frame.origin.x = 0
                    cellAttribute.frame.size = CGSize(width: availableWidth, height: cellHeight)
                }
                else {
                    if cellAttribute.frame.origin.y >= maxY {
                        leftMargin = self.sectionInset.left
                    }
                    
                    var frame = cellAttribute.frame
                    frame.origin.x = leftMargin
                    frame.size.height = cellHeight
                    cellAttribute.frame = frame
                    
                    leftMargin += cellAttribute.frame.width + self.minimumInteritemSpacing
                    maxY = max(cellAttribute.frame.maxY , maxY)
                }
                
                newAttributes.append(cellAttribute)
            }
        }
        
        return newAttributes
    }
}

Here's how you use it.

collectionView.collectionViewLayout = LeftAlignCellCollectionFlowLayout(cellHeight: 40)