A SwiftUI implementation of UICollectionView & UITableView. Here's some of its useful features:
- supports preloading and onAppear/onDisappear.
- supports removing separators (for tableview).
- supports autosizing of cells
- supports the new UICollectionViewCompositionalLayout, and any other UICollectionViewLayout
Report Bug · Suggest a feature
ASCollectionView is a swift package.
- It can be imported into an app project using Xcode’s new Swift Packages option, which is located within the File menu.
- When asked, use this repository's url: https://github.com/apptekstudios/ASCollectionView
Below is an example of how to include a collection view with two sections (each with their own data source). For an extended example with a custom compositional layout see here. Or for more in-depth examples download the demo project included in this repo.
import SwiftUI
import ASCollectionView
struct ExampleView: View {
@State var dataExampleA = (0 ..< 21).map { $0 }
@State var dataExampleB = (0 ..< 15).map { "ITEM \($0)" }
typealias SectionID = Int
var layout: ASCollectionViewLayout<SectionID> {
ASCollectionViewLayout { sectionID -> ASCollectionViewLayoutSection in
switch sectionID {
case 0:
// Here we use one of the predefined convenience layouts
return ASCollectionViewLayoutGrid(layoutMode: .adaptive(withMinItemSize: 100), itemSpacing: 5, lineSpacing: 5, itemSize: .absolute(50))
default:
return self.customSectionLayout
}
}
}
var body: some View
{
ASCollectionView(layout: self.layout) {
ASCollectionViewSection(id: 0,
data: dataExampleA,
dataID: \.self) { item in
Color.blue
.overlay(
Text("\(item)")
)
}
ASCollectionViewSection(id: 1,
data: dataExampleB,
dataID: \.self) { item in
Color.blue
.overlay(
Text("Complex layout - \(item)")
)
}
.sectionHeader {
HStack {
Text("Section header")
.padding()
Spacer()
}
.background(Color.yellow)
}
.sectionFooter {
Text("This is a section footer!")
.padding()
}
}
}
let customSectionLayout = ASCollectionViewLayoutCustomCompositionalSection { (layoutEnvironment, _) -> NSCollectionLayoutSection in
// ...
// Your custom compositional layout section here. For an example see this file: /readmeAssets/SampleUsage.swift
// ...
return section
}
}- There is inbuilt support for the new UICollectionViewCompositionalLayout.
- You can define layout on a per-section basis, including the use of a switch statement if desired.
- There are some useful structs (starting with ASCollectionViewLayout...) that allow for easy definition of list and grid-based layouts (including orthogonal grids).
- You can use an enum as your SectionID (rather than just an Int), this lets you easily determine the layout of each section.
- See the demo project for more in-depth usage examples.
- Please note that you should only use @State for transient visible state in collection view cells. Anything you want to persist long-term should be stored in your model.
See the open issues for a list of proposed features (and known issues).
Distributed under the MIT License. See LICENSE for more information.