https://github.com/devxoul/ascollectionflexlayout
A custom collection layout that allows to use Texture layout specs in ASCollectionNode.
https://github.com/devxoul/ascollectionflexlayout
ascollectionnode asyncdisplaykit flexbox texture uicollectionviewlayout
Last synced: about 2 months ago
JSON representation
A custom collection layout that allows to use Texture layout specs in ASCollectionNode.
- Host: GitHub
- URL: https://github.com/devxoul/ascollectionflexlayout
- Owner: devxoul
- License: mit
- Created: 2020-10-09T18:50:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-10-13T15:42:56.000Z (over 4 years ago)
- Last Synced: 2024-04-17T01:02:30.568Z (about 1 year ago)
- Topics: ascollectionnode, asyncdisplaykit, flexbox, texture, uicollectionviewlayout
- Language: Swift
- Homepage:
- Size: 21.5 KB
- Stars: 27
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ASCollectionFlexLayout
ASCollectionFlexLayout is a custom collection layout that allows to use Texture layout specs in ASCollectionNode.
## Usage
### Creating a layout
```swift
let layout = ASCollectionFlexLayout()
layout.layoutProvider = self
let collectionNode = ASCollectionNode(collectionViewLayout: layout)
```
If you don't specify the `layoutProvider`, it will use a `ASStackLayout` as default.
### Implementing ASCollectionFlexLayoutProvider protocol
There are two kind of layout specs in ASCollectionFlexLayout:
1. A layout for sections
2. A Layout for items in a section
You can optionally provide each layout specs by implementing `ASCollectionFlexLayoutProvider` protocol.
```swift
protocol ASCollectionFlexLayoutProvider {
/// A layout spec for sections. The default layout spec is a stretched stack layout with no spacing.
func flexLayout(_ layout: ASCollectionFlexLayout, layoutSpecThatFits constrainedSize: ASSizeRange, sectionElements: [ASLayoutElement]) -> ASLayoutSpec?
/// A layout spec for items in a section. The default layout spec is a flex-wrapping stack with no spacing.
func flexLayout(_ layout: ASCollectionFlexLayout, layoutSpecThatFits constrainedSize: ASSizeRange, forSectionAt section: Int, itemElements: [ASLayoutElement]) -> ASLayoutSpec?
}
```
For example:
```swift
extension MyViewController: ASCollectionFlexLayoutProvider {
func flexLayout(_ layout: ASCollectionFlexLayout, layoutSpecThatFits constrainedSize: ASSizeRange, sectionElements: [ASLayoutElement]) -> ASLayoutSpec? {
return ASStackLayoutSpec(
direction: .vertical,
spacing: 20,
justifyContent: .start,
alignItems: .start,
children: sectionElements
)
}
func flexLayout(_ layout: ASCollectionFlexLayout, layoutSpecThatFits constrainedSize: ASSizeRange, forSectionAt section: Int, itemElements: [ASLayoutElement]) -> ASLayoutSpec? {
return ASStackLayoutSpec(
direction: .horizontal,
spacing: 10,
justifyContent: .start,
alignItems: .start,
flexWrap: .wrap,
alignContent: .start,
lineSpacing: 10,
children: itemElements
)
}
}
```
### Using the default layout
You can modify the default layout to apply layout without implementing `ASCollectionFlexLayoutProvider` protocol.
```swift
let layout = ASCollectionFlexLayout()
layout.defaultSectionLayout.alignItems = .center
layout.defaultItemLayout.direction = .vertical
layout.defaultItemLayout.alignItems = .stretch
```
Also you can directly refer to the default layout in the `ASCollectionFlexLayoutProvider` protocol implementation.
```swift
func flexLayout(_ layout: ASCollectionFlexLayout, layoutSpecThatFits constrainedSize: ASSizeRange, forSectionAt section: Int, itemElements: [ASLayoutElement]) -> ASLayoutSpec? {
let insets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 20)
return ASInsetLayoutSpec(insets: insets, child: layout.defaultItemLayout)
}
```
## License
ASCollectionFlexLayout is under MIT license. See the [LICENSE](LICENSE) for more info.