Skip to content
A SwiftUI port of UICollectionView with support for custom layouts, preloading, and more.
Branch: master
Clone or download
Latest commit 4316f8f Oct 17, 2019

Contributors Forks Stargazers Issues MIT License


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

Pull requests and suggestions welcome :)

Report Bug · Suggest a feature

Screenshots from demo app

Table of Contents

Getting Started

ASCollectionView is a swift package.


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))
                return self.customSectionLayout
    var body: some View
        ASCollectionView(layout: self.layout) {
            ASCollectionViewSection(id: 0,
                                    data: dataExampleA,
                                    dataID: \.self) { item in
            ASCollectionViewSection(id: 1,
                                    data: dataExampleB,
                                    dataID: \.self) { item in
                                                Text("Complex layout - \(item)")
            .sectionHeader {
                HStack {
                    Text("Section header")
            .sectionFooter {
                Text("This is a section footer!")
    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).

Other tips

  • 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.

You can’t perform that action at this time.