GridView

📜 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
classCellLogs:UICollectionViewCell,SlotableCell{staticletslotWidth=1 // size of cell in grid 📏
staticletslotHeight=1 // size of cell in grid 📐
varslotParams:[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:

extensionViewController: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
iflet 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:

classViewController:UIViewController{@IBOutlet weak varcontainer:UIView!varcontainerGrid:GridViewController?overridefunc 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"])]]))}overridefunc 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:

classCellCharacter:UICollectionViewCell,SlotableCell{...varslotParams:[String:Any]=[:]func load(){letparamRace=slotParams["race"]as?Stringswitch 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