ASCollectionView

A SwiftUI implementation of UICollectionView & UITableView. Here's some of its useful features:

• supports preloading and onAppear/onDisappear.
• supports cell selection, with automatic support for SwiftUI editing mode.
• supports autosizing of cells.
• supports removing separators (for tableview).
• 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 body: some View
    {
        ASCollectionView
		{
			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()
			}
		}
		.layoutCompositional(self.layout)
    }
    
    
    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
            }
        }
    }
    
    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.