Contents

mischa-hildebrand/alignedcollectionviewflowlayout

A collection view layout that gives you control over the horizontal and vertical alignment of the cells. You can use it to align the cells like words in a left- or right-aligned text and you can specify how the cells are vertically aligned within their rows.

Available Alignment Options

You can use any combination of horizontal and vertical alignment to achieve your desired layout.

Horizontal Alignment:

  • horizontalAlignment = .left

[Example layout for horizontalAlignment = .left]

  • horizontalAlignment = .right

[Example layout for horizontalAlignment = .right]

  • horizontalAlignment = .justified

[Example layout for horizontalAlignment = .justified]

  • horizontalAlignment = .leading

Renders as either .left or .right, depending on the user's layout direction (UIApplication.shared.userInterfaceLayoutDirection): .leftToRight → .left .rightToLeft → .right

  • horizontalAlignment = .trailing

Renders as either .left or .right, depending on the user's layout direction (UIApplication.shared.userInterfaceLayoutDirection). .leftToRight → .right .rightToLeft → .left

Vertical Alignment:

  • verticalAlignment = .top

[Example layout for verticalAlignment = .top]

  • verticalAlignment = .center

[Example layout for verticalAlignment = .center]

  • verticalAlignment = .bottom

[Example layout for verticalAlignment = .bottom]

Installation

With CocoaPods:

AlignedCollectionViewFlowLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "AlignedCollectionViewFlowLayout"

Manual installation:

Just add the file AlignedCollectionViewFlowLayout.swift to your Xcode project and you're ready to go.

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Usage

Setup in Interface Builder

  1. You have a collection view in Interface Builder and setup its data source appropriately. Run the app and make sure everything works as expected (except the cell alignment).
  1. In the Document Outline, select the collection view layout object.

[Screenshot of the Flow Layout object in Interface Builder]

  1. In the Identity Inspector, set the layout object's custom class to AlignedCollectionViewFlowLayout.

[Screenshot: How to set a custom class for the layout object in Interface Builder]

  1. Add and customize the following code to your view controller's viewDidLoad() method:

``Swift let alignedFlowLayout = collectionView?.collectionViewLayout as? AlignedCollectionViewFlowLayout alignedFlowLayout?.horizontalAlignment = .left alignedFlowLayout?.verticalAlignment = .top ``

If you omit any of the last two lines the default alignment will be used (horizontally justified, vertically centered).

💡 Pro Tip: Instead of type-casting the layout as shown above you can also drag an outlet from the collection view layout object to your view controller.

Setup in code

  1. Create a new AlignedCollectionViewFlowLayout object and specify the alignment you want:

``Swift let alignedFlowLayout = AlignedCollectionViewFlowLayout(horizontalAlignment: .left, verticalAlignment: .top) ``

  1. Either create a new collection view object and and initialize it with alignedFlowLayout:

``Swift let collectionView = UICollectionView(frame: bounds, collectionViewLayout: alignedFlowLayout) ``

or assign alignedFlowLayout to the collectionViewLayout property of an existing collection view:

``Swift yourExistingCollectionView.collectionViewLayout = alignedFlowLayout ``

  1. Implement your collection view's data source.
  1. Run the app.

Additional configuration

For the left and right alignment AlignedCollectionViewFlowLayout distributes the cells horizontally with a constant spacing which is the same for all rows. You can control the spacing with the minimumInteritemSpacing property.

alignedFlowLayout.minimumInteritemSpacing = 10

Despite its name (which originates from its superclass UICollectionViewFlowLayout) this property doesn't describe a minimum spacing but the exact spacing between the cells.

The vertical spacing between the lines works exactly as in UICollectionViewFlowLayout:

alignedFlowLayout.minimumLineSpacing = 10

Enjoy! 😎

Author

Mischa Hildebrand, web@mischa-hildebrand.de

[[Twitter Follow]](https://twitter.com/DerHildebrand) [[GitHub followers]](https://github.com/mischa-hildebrand)

License

AlignedCollectionViewFlowLayout is available under the MIT license. See the LICENSE file for more info.

Package Metadata

Repository: mischa-hildebrand/alignedcollectionviewflowlayout

Default branch: master

README: README.md