{"id":13462710,"url":"https://github.com/apptekstudios/ASCollectionView","last_synced_at":"2025-03-25T05:32:12.061Z","repository":{"id":35433323,"uuid":"213303498","full_name":"apptekstudios/ASCollectionView","owner":"apptekstudios","description":"A SwiftUI collection view with support for custom layouts, preloading, and more.","archived":true,"fork":false,"pushed_at":"2022-11-03T23:29:52.000Z","size":13997,"stargazers_count":1356,"open_issues_count":34,"forks_count":160,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-10-29T21:06:14.652Z","etag":null,"topics":["collection-view","collectionview","grid","ios","swift","swift-package-manager","swiftui","uicollectionview"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apptekstudios.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"apptekstudios","custom":["https://www.buymeacoffee.com/tobeasbrennan"]}},"created_at":"2019-10-07T05:37:57.000Z","updated_at":"2024-10-27T12:42:29.000Z","dependencies_parsed_at":"2022-07-16T02:00:35.752Z","dependency_job_id":null,"html_url":"https://github.com/apptekstudios/ASCollectionView","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apptekstudios%2FASCollectionView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apptekstudios%2FASCollectionView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apptekstudios%2FASCollectionView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apptekstudios%2FASCollectionView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apptekstudios","download_url":"https://codeload.github.com/apptekstudios/ASCollectionView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407535,"owners_count":20610226,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collection-view","collectionview","grid","ios","swift","swift-package-manager","swiftui","uicollectionview"],"created_at":"2024-07-31T13:00:19.292Z","updated_at":"2025-03-25T05:32:11.550Z","avatar_url":"https://github.com/apptekstudios.png","language":"Swift","readme":"\n# ASCollectionView\n\n## This repository is no longer maintained. Here's why:\n- with the release of iOS 16 SwiftUI now enables most of the features this library was created to replace.\n- The UIHostingConfiguration API makes it easy to implement custom UICollectionViews using SwiftUI cells. This implementation handles cell-resizing and updates much better than a third party component is able to.\n- In cases where a collection view is overkill, the new SwiftUI Layout protocol is the better choice. We've started a small \u003ca href=\"https://github.com/apptekstudios/SwiftUILayouts\"\u003elibrary of native layouts here\u003c/a\u003e\n\n\n\n\n\n## README:\nA SwiftUI implementation of UICollectionView \u0026 UITableView. Here's some of its useful features:\n * supports **preloading** and **onAppear/onDisappear**.\n * supports **cell selection**, with automatic support for SwiftUI editing mode.\n * supports **autosizing** of cells.\n * supports the new **UICollectionViewCompositionalLayout**, and **any other UICollectionViewLayout**\n * supports **removing separators** for ASTableView.\n * supports directly using **FetchedResults** as a data source\n\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n![Build status](https://github.com/apptekstudios/ASCollectionView/workflows/Build/badge.svg?branch=master)\n\n\n### Pull requests and suggestions welcome :)\n\u003ca href=\"https://github.com/apptekstudios/ASCollectionView/issues\"\u003eReport Bug\u003c/a\u003e  ·  \u003ca href=\"https://github.com/apptekstudios/ASCollectionView/issues\"\u003eSuggest a feature\u003c/a\u003e\n\n## Table of Contents\n* [Getting Started](#getting-started)\n* [Usage](#usage)\n\t* [Basic Examples](#usage)\n\t* [Supplementary Views](#supplementary-views)\n\t* [Decoration Views](#decoration-views)\n\t* [Layout](#layout)\n* [Todo](#todo)\n* [License](#license)\n\n\n### Screenshots from demo app\n\u003cimg src=\"/readmeAssets/demo1.jpeg\" width=\"300\"\u003e    \u003cimg src=\"/readmeAssets/demo2.jpeg\" width=\"300\"\u003e    \u003cimg src=\"/readmeAssets/demo3.jpeg\" width=\"300\"\u003e    \u003cimg src=\"/readmeAssets/demo4.jpeg\" width=\"300\"\u003e    \u003cimg src=\"/readmeAssets/demo5.jpeg\" width=\"300\"\u003e    \u003cimg src=\"/readmeAssets/demo6.jpeg\" width=\"300\"\u003e    \u003cimg src=\"/readmeAssets/demo7.jpeg\" width=\"500\"\u003e\n\n## Getting Started\nASCollectionView is a *swift package*.\n * It can be imported into an app project using Xcode’s new Swift Packages option, which is located within the File menu.\n * When asked, use this repository's url: https://github.com/apptekstudios/ASCollectionView\n\nAlternatively, if you're unable to use SPM for some reason, you can import it using cocoapods: ```pod 'ASCollectionView-SwiftUI', '~\u003e 1.3'```\n\n## Usage\n\n### Basic example - single section:\n```swift\nimport ASCollectionView\nimport SwiftUI\n\nstruct SingleSectionExampleView: View\n{\n    @State var dataExample = (0 ..\u003c 30).map { $0 }\n    \n    var body: some View\n    {\n        ASCollectionView(data: dataExample, dataID: \\.self)\n        { item, _ in\n            Color.blue\n                .overlay(Text(\"\\(item)\"))\n        }\n        .layout\n        {\n            .grid(\n                layoutMode: .adaptive(withMinItemSize: 100),\n                itemSpacing: 5,\n                lineSpacing: 5,\n                itemSize: .absolute(50))\n        }\n    }\n}\n```\n\n### Multiple sections with unique data sources\nBelow 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](/readmeAssets/SampleUsage.swift). Or for more in-depth examples download the [demo project](/Demo/) included in this repo.\n\n```swift\nimport SwiftUI\nimport ASCollectionView\n\nstruct ExampleView: View\n{\n    @State var dataExampleA = (0 ..\u003c 21).map { $0 }\n    @State var dataExampleB = (0 ..\u003c 15).map { \"ITEM \\($0)\" }\n    \n    var body: some View\n    {\n        ASCollectionView\n        {\n            ASCollectionViewSection(\n                id: 0,\n                data: dataExampleA,\n                dataID: \\.self)\n            { item, _ in\n                Color.blue\n                    .overlay(\n                        Text(\"\\(item)\")\n                    )\n            }\n            ASCollectionViewSection(\n                id: 1,\n                data: dataExampleB,\n                dataID: \\.self)\n            { item, _ in\n                Color.green\n                    .overlay(\n                        Text(\"Complex layout - \\(item)\")\n                    )\n            }\n            .sectionHeader\n            {\n                Text(\"Section header\")\n                    .padding()\n                    .frame(maxWidth: .infinity, alignment: .leading) // Fill width and align text to the left\n                    .background(Color.yellow)\n            }\n            .sectionFooter\n            {\n                Text(\"This is a section footer!\")\n                    .padding()\n            }\n        }\n        .layout\n        { sectionID in\n            switch sectionID\n            {\n            case 0:\n                // Here we use one of the provided convenience layouts\n                return .grid(\n                    layoutMode: .adaptive(withMinItemSize: 100),\n                    itemSpacing: 5,\n                    lineSpacing: 5,\n                    itemSize: .absolute(50))\n            default:\n                return ASCollectionLayoutSection\n                { environment in\n                    // ...\n                    // You could return any custom NSCollectionLayoutSection here. For an example see this file: /readmeAssets/SampleUsage.swift\n                    // ...\n                }\n            }\n        }\n    }\n}\n```\n\n### Supplementary Views\nASCollectionView has support for supplementary views. To add a supplementary view, use the `sectionHeader`, `sectionFooter`, or `sectionSupplementary` modifiers on your ASCollectionViewSection.\n * `sectionHeader` and `sectionFooter` set the supplementary for `UICollectionView.elementKindSectionHeader` and `UICollectionView.elementKindSectionHeader` respectively.\n * `sectionSupplementary` lets you specify any supplementaryKind.\n\n```swift\nASCollectionViewSection(...) { ... }\n    .sectionHeader\n    {\n        Text(\"Section header\")\n            .background(Color.yellow)\n    }\n    .sectionFooter\n    {\n        Text(\"Section footer\")\n            .background(Color.blue)\n    }\n    .sectionSupplementary(ofKind: \"someOtherSupplementaryKindRequestedByYourLayout\")\n    {\n        Text(\"Section supplementary\")\n            .background(Color.green)\n    }\n```\n\n\n### Decoration Views\nA UICollectionViewLayout can layout decoration views that do not relate to the data (eg. a section background). These cannot be configured so you must provide a View struct that can be initialised using .init().\n* To enforce this requirement, your view must conform to the `Decoration` protocol. The only requirement of this is an initialiser with no arguments.\n* You must register the view type with the layout.\n* See the Reminders screen of the Demo app for a working example.\n\nDeclaring a swift view conforming to `Decoration`:\n```swift\nstruct GroupBackground: View, Decoration\n{\n    let cornerRadius: CGFloat = 12\n    var body: some View\n    {\n        RoundedRectangle(cornerRadius: cornerRadius)\n            .fill(Color(.secondarySystemGroupedBackground))\n    }\n}\n```\n\nRegistering the decoration type with the layout (ASCollectionLayout):\n```swift\nvar layout: ASCollectionLayout\u003cSection\u003e\n{\n    ASCollectionLayout\u003cSection\u003e\n    {\n        // ... Here is an example of including a decoration in a compositional layout.\n        let sectionBackgroundDecoration = NSCollectionLayoutDecorationItem.background(elementKind: \"groupBackground\")\n        sectionBackgroundDecoration.contentInsets = section.contentInsets\n        section.decorationItems = [sectionBackgroundDecoration]\n        // ...\n    }\n    .decorationView(GroupBackground.self, forDecorationViewOfKind: \"groupBackground\") // REGISTER the decoration view type\n}\n```\n\n\n### Layout\n * There is inbuilt support for the new UICollectionViewCompositionalLayout.\n   * You can define layout on a per-section basis, including the use of a switch statement if desired.\n   * *Work in progress*: There are some useful methods that allow for easy definition of list and grid-based layouts (including orthogonal grids).\n\nDefine layout for all sections:\n```swift\nASCollectionView(...) { ... }\n    .layout\n    {\n        ASCollectionLayoutSection\n        { layoutEnvironment in\n            // Construct and return a NSCollectionLayoutSection here\n        }\n    }\n```\n\nDefine layout per section:\n```swift\nASCollectionView(...) { ... }\n    .layout\n    { sectionID in\n        switch sectionID\n        {\n        case .userSection:\n            return ASCollectionLayoutSection\n            { layoutEnvironment in\n                // Construct and return a NSCollectionLayoutSection here\n            }\n        }\n    case .postSection:\n        return ASCollectionLayoutSection\n        { layoutEnvironment in\n            // Construct and return a NSCollectionLayoutSection here\n        }\n    }\n```\n\nUse a custom UICollectionViewLayout:\n```swift\nASCollectionView(...) { ... }\n    .layout\n    {\n        let someCustomLayout = CustomUICollectionViewLayout()\n        someCustomLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize\n        return someCustomLayout\n    }\n```\n\n### Other tips\n * You can use an enum as your SectionID (rather than just an Int), this lets you easily determine the layout of each section.\n * See the [demo project](/Demo/) for more in-depth usage examples.\n * 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.\n\n## Todo\nSee the [open issues](https://github.com/apptekstudios/ASCollectionView/issues) for a list of proposed features (and known issues).\n\n## License\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\n\u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\u003c!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --\u003e\n[contributors-shield]: https://img.shields.io/github/contributors/apptekstudios/ASCollectionView.svg?style=flat-square\n[contributors-url]: https://github.com/apptekstudios/ASCollectionView/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/apptekstudios/ASCollectionView.svg?style=flat-square\n[forks-url]: https://github.com/apptekstudios/ASCollectionView/network/members\n[stars-shield]: https://img.shields.io/github/stars/apptekstudios/ASCollectionView.svg?style=flat-square\n[stars-url]: https://github.com/apptekstudios/ASCollectionView/stargazers\n[issues-shield]: https://img.shields.io/github/issues/apptekstudios/ASCollectionView.svg?style=flat-square\n[issues-url]: https://github.com/apptekstudios/ASCollectionView/issues\n[license-shield]: https://img.shields.io/github/license/apptekstudios/ASCollectionView.svg?style=flat-square\n[license-url]: https://github.com/apptekstudios/ASCollectionView/blob/master/LICENSE\n[product-screenshot]: images/screenshot.jpeg\n","funding_links":["https://github.com/sponsors/apptekstudios","https://www.buymeacoffee.com/tobeasbrennan"],"categories":["Swift","Samples","Collection","🌎 by the community","🛠 Examples","uicollectionview","UI","Swift UI"],"sub_categories":["Content","Libraries","Grid"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapptekstudios%2FASCollectionView","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapptekstudios%2FASCollectionView","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapptekstudios%2FASCollectionView/lists"}