https://github.com/q-mobile/qgrid

🎛 QGrid: The missing SwiftUI collection view.
https://github.com/q-mobile/qgrid

declarative-ui grid ios swift swift5 swiftui swiftui-example

Last synced: about 1 month ago
JSON representation

🎛 QGrid: The missing SwiftUI collection view.

• Host: GitHub
• URL: https://github.com/q-mobile/qgrid
• Owner: Q-Mobile
• License: mit
• Created: 2019-07-18T17:54:37.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-05T19:44:45.000Z (over 4 years ago)
• Last Synced: 2024-10-09T17:23:30.442Z (about 1 month ago)
• Topics: declarative-ui, grid, ios, swift, swift5, swiftui, swiftui-example
• Language: Swift
• Homepage:
• Size: 59.9 MB
• Stars: 1,647
• Watchers: 25
• Forks: 105
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

**[NOTE]**  

If you'd like to see `QGrid` in action, check out this demo of `QDesigner` (see video below).  

Install `QDesigner`: [https://apps.apple.com/us/app/qdesigner/id1500810470](https://apps.apple.com/us/app/qdesigner/id1500810470)  

Install a companion `QDesigner Client` on iPhone, to see your UI design on a target device, updated in real-time:

[https://apps.apple.com/us/app/qdesignerclient/id1500946484](https://apps.apple.com/us/app/qdesignerclient/id1500946484)  

Learn more at: [https://Q-Mobile.IT/Q-Designer](https://Q-Mobile.IT/Q-Designer)

[![QDesigner Preview](QDesignerPreview.png)](https://youtu.be/_nCM9O-v7mQ)

![QGrid: The missing SwiftUI collection view.](QGridLogo.png)



	

    

    

    

    

    



`QGrid` is the missing SwiftUI collection view. It uses the same approach as SwiftUI's `List` view, by computing its cells from an underlying collection of identified data.



## 🔷 Requirements

     ✅ macOS 10.15+  

     ✅ Xcode 11.0  

     ✅ Swift 5+  

     ✅ iOS 13+  

     ✅ tvOS 13+

## 🔷 Installation

`QGrid` is available via [Swift Package Manager](https://swift.org/package-manager).

Using Xcode 11, go to `File -> Swift Packages -> Add Package Dependency` and enter [https://github.com/Q-Mobile/QGrid](https://github.com/Q-Mobile/QGrid)  

## 🔷 Usage

#### ✴️ Basic scenario:  

In its simplest form, `QGrid` can be used with just this 1 line of code within the `body` of your View, assuming you already have a custom cell view:

```Swift

struct PeopleView: View {

  var body: some View {

    QGrid(Storage.people, columns: 3) { GridCell(person: $0) }

  }

}   

struct GridCell: View {

  var person: Person

  var body: some View {

    VStack() {

      Image(person.imageName)

        .resizable()

        .scaledToFit()

        .clipShape(Circle())

        .shadow(color: .primary, radius: 5)

        .padding([.horizontal, .top], 7)

      Text(person.firstName).lineLimit(1)

      Text(person.lastName).lineLimit(1)

    }

  }

}

```

#### ✴️ Customize the default layout configuration:

You can customize how `QGrid` will layout your cells by providing some additional initializer parameters, which have default values:

```swift

struct PeopleView: View {

  var body: some View {

    QGrid(Storage.people,

          columns: 3,

          columnsInLandscape: 4,

          vSpacing: 50,

          hSpacing: 20,

          vPadding: 100,

          hPadding: 20) { person in

            GridCell(person: person)

    }

  }

}   

```

## 🔷 Example App

📱`QGridTestApp` directory in this repository contains a very simple application that uses `QGrid`. Open `QGridTestApp/QGridTestApp.xcodeproj` and either use the new Xcode Previews feature or just run the app.

  

    

      

    

    

      

    

  

  

	 

    	

    

  

  

	 

    	

    

  

## 🔷 QGrid Designer

📱`QGridTestApp` contains also the QGrid Designer area view, with sliders for dynamic run-time configuration of the QGrid view (with config option to hide it). Please refer to the following demo executed on the device:







## 🔷 Roadmap / TODOs

Version `0.1.1` of `QGrid ` contains a very limited set of features. It could be extended by implementing the following tasks:

     ☘️ Parameterize spacing&padding configuration depending on the device orientation  

     ☘️ Add the option to specify scroll direction  

     ☘️ Add content-only initializer to QGrid struct, without a collection of identified data as argument (As in SwiftUI’s `List`)  

     ☘️ Add support for other platforms (watchOS)  

     ☘️ Add `Stack` layout option (as in `UICollectionView`)  

     ☘️ Add unit/UI tests  

     ☘️ ... many other improvements

## 🔷 Contributing

👨🏻‍🔧 Feel free to contribute to `QGrid ` by creating a pull request, following these guidelines:

1. Fork `QGrid `

2. Create your feature branch

3. Commit your changes, along with unit tests

4. Push to the branch

5. Create pull request

## 🔷 Author

     👨‍💻 [Karol Kulesza](https://github.com/karolkulesza) ([@karolkulesza](https://twitter.com/karolkulesza))

## 🔷 License

     📄 QGrid is available under the MIT license. See the LICENSE file for more info.