Left aligned CollectionView layout with Swift

ZLCollectionLeftLayout

left aligned CollectionView layout

Description

  • layout collection cell from left to right automatically
  • when you set property scrollDirection to .vertical, it will automatically wrap
  • when you set property scrollDirection to .horizontal, and you might have to set height of colletion view to show only one line

Install

cocoapods
  • pod ‘ZLCollectionLeftLayout’
  • or specify a version: pod ‘ZLCollectionLeftLayout’, ‘~> 0.0.3’
download framwork
  • download the repo.
  • and add ZLCollectionLeftLayout.swift to your project

Usage

  • import ZLCollectionLeftAlignLayout

    • import ZLCollectionLeftLayout
  • set collectionViewLayout of collection view to a instance of ZLCollectionLeftLayout

    • private lazy var collectionView: UICollectionView = {
        // instance ZLCollectionLeftLayout
        let defaultLayout = ZLCollectionLeftLayout()
        defaultLayout.minimumLineSpacing = 10.0
        defaultLayout.minimumInteritemSpacing = 10.0
        defaultLayout.scrollDirection = .vertical
        defaultLayout.sectionInset = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 20.0, right: 10.0)
        // set collectionViewLayout to a instance of ZLCollectionLeftLayout
        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: defaultLayout)
        collectionView.backgroundColor = .magenta
        collectionView.showsVerticalScrollIndicator = false
        return collectionView
      }()
  • impletation the method:

    • func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { 
        let w = CGFloat.random(in: 20.0 ... 50.0)
        return CGSize(width: 30.0 + w, height: 25.0)
      }
  • screenshot

GitHub

View Github