Latest 0.1.3
Homepage https://github.com/brunomacabeusbr/GridView
License MIT
Platforms ios 10.3, tvos 10.2
Authors

Version
License
Platform

📜 Amazing grid view in your tvOS/iOS app


You can download this repository and see this example app.

How to use

Install

In Podfile add

pod 'GridView'

and use pod install.

Setup

Storyboard

  1. Create a Container View
  2. Change the View Controller for Collection View Controller
  3. Set GridViewController as a custom class

Create a cell

To display a cell in grid, the cell need be a UICollectionViewCell and subscriber the protocol SlotableCell.
And, you need create a xib file with Collection View Cell. The xib, and cell’s indentifier in xib file, need have the same name of the class.

Minimal example:

import UIKit
import GridView

class CellLogs: UICollectionViewCell, SlotableCell {

    static let slotWidth = 1 // size of cell in grid 📏
    static let slotHeight = 1 // size of cell in grid 📐
    var slotParams: [String : Any] = [:]

    func load() { 
        // this method if called when a cell is created in grid 🔨
    }
}

When the grid will show the CellLogs, will get the CellLogs.xib and run the load(params) method.

Code

Your controller that will manager a grid need subscriber the protocol GridViewDelegate

Minimal example:

extension ViewController: GridViewDelegate {
    func getCellToRegister() -> [SlotableCell.Type] {
        // we need register cell's class, then, send it's where 🖋

        return [CellLogs.self, CellMap.self]

        // if do you want list all classes that subscreber the SlotableCell protocol, you can read use this gist: https://gist.github.com/brunomacabeusbr/eea343bb9119b96eed3393e41dcda0c9 💜
    }

    func setup(cell: SlotableCell) {
        // this delegate is called in "collectionView(_:cellForItemAt)" from GridViewController
        // it's useful when we need to setup many cells with same code 🍡

        // for example, connect to server, if a cell need
        if let cellRealTime = cell as? CellRealTimeProtocol {
            cellRealTime.connect()
        }

        // layout
        (cell as? UICollectionViewCell)?.layer.cornerRadius = 10
    }
}

Then, we need set a variable to manager a grid and set ViewController as a delegate.

Minimal example:

class ViewController: UIViewController {

    @IBOutlet weak var container: UIView!
    var containerGrid: GridViewController?

    override func viewDidLoad() {
        super.viewDidLoad()

        // set the cells to show in grid 📌
        containerGrid!.gridConfiguration = GridConfiguration.create(slots: Slots(slots: [
            [Slot(cell: CellMap.self, params: [:]), Slot(cell: CellChart.self, params: [:])],
            [Slot(cell: CellLogs.self, params: [:])],
            [Slot(cell: CellCharacter.self, params: ["race": "troll"]), Slot(cell: CellCharacter.self, params: ["race": "elves"]), Slot(cell: CellCharacter.self, params: ["race": "undead"]), Slot(cell: CellCharacter.self, params: ["race": "merfolk"])]
            ])
        )
    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

        if segue.identifier == "segueGrid" {
            self.containerGrid = (segue.destination as! GridViewController)
            self.containerGrid!.delegate = self
        }
    }
}

To understand how to set layout with gridConfiguration correctly, read the section "How GridView work?".

params

When you create a Slot, you set a cell of this slot, and also params of this slot. For example:

Slot(cell: CellCharacter.self, params: ["race": "undead"])

The value of params is set in attribute slotParams of SlotableCell.

Example of use:

class CellCharacter: UICollectionViewCell, SlotableCell {

    ...
    var slotParams: [String : Any] = [:]

    func load() {
        let paramRace = slotParams["race"] as? String

        switch paramRace {
        case "undead"?:
            image.image = UIImage(named: "undead")!
        case "elves"?:
            image.image = UIImage(named: "elves")!
        case "troll"?:
            image.image = UIImage(named: "troll")!
        default:
            print("invalid race: (paramRace ?? "nil")")
        }
    }
}

How to reload a grid?

If you already a set a value to gridConfiguration, and want set a new value, to reload a grid use the method reloadGrid().

containerGrid!.gridConfiguration = [ ... ] // new values for my awesome grid
containerGrid!.reloadGrid() // reload it

How GridView work?

The GridView always show all cells, and set in each cell a proportional size with the slotWidth and slotHeight.

When GridView will draw a cell, check if have a enough space in first slot. If have, draw. If haven’t, check in the second slot, and so on.
The total of columns is calculated at runtime.


Maintainer:

macabeus  · 
GitHub @macabeus

Latest podspec

{
    "name": "GridView",
    "version": "0.1.3",
    "summary": "Amazing grid view in your tvOS/iOS app",
    "homepage": "https://github.com/brunomacabeusbr/GridView",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Bruno Macabeus": "[email protected]"
    },
    "platforms": {
        "ios": "10.3",
        "tvos": "10.2"
    },
    "source": {
        "git": "https://github.com/brunomacabeusbr/GridView.git",
        "tag": "0.1.3"
    },
    "source_files": "GridView/GridView/*.swift",
    "pushed_with_swift_version": "3.1"
}

Pin It on Pinterest

Share This