mohsinalimat/ascollectionview-1

A SwiftUI port of UICollectionView with support for custom layouts, preloading, and more.

ASCollectionView

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
• Usage
• Todo
• License

Getting Started

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

Usage

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
    }
}

Layout

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

Todo

See the open issues for a list of proposed features (and known issues).

License

Distributed under the MIT License. See LICENSE for more information.