Skip to content

phuongdoanduy/AlignedCollectionViewFlowLayout

 
 

Repository files navigation

AlignedCollectionViewFlowLayout

UICollectionViewFlowLayout subclass for precise horizontal & vertical cell alignment.

Table of Contents

Overview

Drop-in replacement for UICollectionViewFlowLayout with granular alignment control. Unlike default flow layout (justified + center-aligned), this enables:

  • Horizontal: left, right, leading, trailing, justified
  • Vertical: top, center, bottom

Alignment Options

Horizontal Alignment

Option Behavior RTL Support
.left Align to left edge Fixed
.right Align to right edge Fixed
.leading Align to start edge ✓ Mirrors
.trailing Align to end edge ✓ Mirrors
.justified Spread evenly (default) N/A

Vertical Alignment

Option Behavior
.top Align to top of row
.center Center in row (default)
.bottom Align to bottom of row

Installation

Swift Package Manager

dependencies: [
    .package(url: "https://github.com/mischa-hildebrand/AlignedCollectionViewFlowLayout.git", from: "1.0.0")
]

Manual

Copy AlignedCollectionViewFlowLayout.swift to your project.

Usage

Programmatic

import AlignedCollectionViewFlowLayout

let layout = AlignedCollectionViewFlowLayout(
    horizontalAlignment: .left,
    verticalAlignment: .top
)

collectionView.collectionViewLayout = layout

Interface Builder

  1. Add UICollectionViewFlowLayout to Collection View
  2. Set Custom Class to AlignedCollectionViewFlowLayout
  3. Configure alignment in code:
if let layout = collectionView.collectionViewLayout as? AlignedCollectionViewFlowLayout {
    layout.horizontalAlignment = .left
    layout.verticalAlignment = .top
}

Change Alignment at Runtime

layout.horizontalAlignment = .right
layout.verticalAlignment = .bottom
collectionView.collectionViewLayout.invalidateLayout()

Visual Examples

Alignment Preview
Left-aligned Left
Right-aligned Right
Justified Justified
Top-aligned Top
Bottom-aligned Bottom
Centered Center

Requirements

  • iOS 16.0+
  • Swift 6.0+
  • Xcode 14.0+

Examples

See Docs/APPLE_MAIL_STYLE.md for Apple Mail-style email chip implementation.

License

MIT License - See source file header for full text.

Copyright © 2017 Mischa Hildebrand

About

A collection view layout that gives you control over the horizontal and vertical alignment of the cells.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Packages

 
 
 

Contributors

Languages

  • Swift 100.0%