Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mischa-hildebrand/alignedcollectionviewflowlayout
A collection view layout that gives you control over the horizontal and vertical alignment of the cells.
https://github.com/mischa-hildebrand/alignedcollectionviewflowlayout
alignment ios swift uicollectionview uicollectionviewflowlayout uicollectionviewlayout uikit
Last synced: 4 days ago
JSON representation
A collection view layout that gives you control over the horizontal and vertical alignment of the cells.
- Host: GitHub
- URL: https://github.com/mischa-hildebrand/alignedcollectionviewflowlayout
- Owner: mischa-hildebrand
- License: mit
- Created: 2017-04-14T17:54:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-09T09:59:12.000Z (12 months ago)
- Last Synced: 2025-01-18T03:04:10.771Z (4 days ago)
- Topics: alignment, ios, swift, uicollectionview, uicollectionviewflowlayout, uicollectionviewlayout, uikit
- Language: Swift
- Homepage:
- Size: 435 KB
- Stars: 1,303
- Watchers: 9
- Forks: 205
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AlignedCollectionViewFlowLayout
[](http://cocoapods.org/pods/AlignedCollectionViewFlowLayout)
[](AlignedCollectionViewFlowLayout)
[](http://cocoapods.org/pods/AlignedCollectionViewFlowLayout)
[](http://cocoapods.org/pods/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.
Other than that, the layout behaves exactly like Apple's [`UICollectionViewFlowLayout`](https://developer.apple.com/reference/uikit/uicollectionviewflowlayout). (It's a subclass.)
### ℹ️ Important:
`AlignedCollectionViewFlowLayout` was developed with a "**tag view**" in mind, i.e. a collection view that displays a limited number of items with a relatively simple layout. It works perfectly for this use case. While it also does its job for a large number of items and more complex cell layouts **scrolling might become laggy** in this case. This is due to the fact the layout needs to recursively obtain layout attributes from its superclass and cannot be avoided. If you experience unacceptable lagginess please consider other alternatives.
## Available Alignment Options
You can use _any_ combination of horizontal and vertical alignment to achieve your desired layout.
### Horizontal Alignment:
* `horizontalAlignment = .left`
* `horizontalAlignment = .right`
* `horizontalAlignment = .justified`
* `horizontalAlignment = .leading`
Renders as either `.left` or `.right`, depending on the user's _layout direction_ ([UIApplication.shared.userInterfaceLayoutDirection](https://developer.apple.com/documentation/uikit/uiapplication/1623025-userinterfacelayoutdirection)):
* `.leftToRight` → `.left`
* `.rightToLeft` → `.right`
* `horizontalAlignment = .trailing`
Renders as either `.left` or `.right`, depending on the user's _layout direction_ ([UIApplication.shared.userInterfaceLayoutDirection](https://developer.apple.com/documentation/uikit/uiapplication/1623025-userinterfacelayoutdirection)).
* `.leftToRight` → `.right`
* `.rightToLeft` → `.left`
### Vertical Alignment:
* `verticalAlignment = .top`
* `verticalAlignment = .center`
* `verticalAlignment = .bottom`
## Installation
### With CocoaPods:
AlignedCollectionViewFlowLayout is available through [CocoaPods](http://cocoapods.org). To install
it, simply add the following line to your Podfile:
```ruby
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).
2. In the Document Outline, select the collection view layout object.
3. In the Identity Inspector, set the layout object's custom class to `AlignedCollectionViewFlowLayout`.
4. 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)
```
2. 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
```
3. Implement your collection view's data source.
4. 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.
```Swift
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`:
```Swift
alignedFlowLayout.minimumLineSpacing = 10
```
---
### Enjoy! 😎
## Author
Mischa Hildebrand, [email protected]
[](https://twitter.com/DerHildebrand)
[](https://github.com/mischa-hildebrand)
## License
AlignedCollectionViewFlowLayout is available under the MIT license. See the LICENSE file for more info.