Latest 0.1.1
Homepage https://github.com/magi82/MGGridView
License MIT
Platforms ios 8.0
Authors

Swift
Platform
Version
Carthage compatible
License

MGGridView is a grid view created by a combination of collection views.
Apple’s collection view method is simple and easy to implement. :sunny:

MGGridView can be created in the storyboard.
In Carthage, however, it is programmatically only.
Carthage Issues #763

The column cell does not support registration in the storyboard.
You can implement it programmatically or with xib.

Sample

MGGridView

Usage

  • Declare the MGGridView, and add the data to the data source.
var gridView: MGGridView? = nil
let menus: [[String]] = [
    ["1-1", "1-2", "1-3", "1-4", "1-5", "1-6", "1-7", "1-8", "1-9", "1-10"],
    ["2-1", "2-2", "2-3", "2-4", "2-5", "2-6", "2-7", "2-8", "2-9", "2-10"],
    ["3-1", "3-2", "3-3", "3-4", "3-5", "3-6", "3-7", "3-8", "3-9", "3-10"],
    ["4-1", "4-2", "4-3", "4-4", "4-5", "4-6", "4-7", "4-8", "4-9", "4-10"],
    ["5-1", "5-2", "5-3", "5-4", "5-5", "5-6", "5-7", "5-8", "5-9", "5-10"],
    ["6-1", "6-2", "6-3", "6-4", "6-5", "6-6", "6-7", "6-8", "6-9", "6-10"],
    ["7-1", "7-2", "7-3", "7-4", "7-5", "7-6", "7-7", "7-8", "7-9", "7-10"],
    ["8-1", "8-2", "8-3", "8-4", "8-5", "8-6", "8-7", "8-8", "8-9", "8-10"],
    ["9-1", "9-2", "9-3", "9-4", "9-5", "9-6", "9-7", "9-8", "9-9", "9-10"]
  ]
  • Create an MGGridView and configure.
gridView = MGGridView(frame: UIScreen.main.bounds,
                      collectionViewLayout: UICollectionViewFlowLayout())
if let grid = gridView {
  grid.backgroundColor = .white
  grid.register(MGGridViewCell.self,
                    forCellWithReuseIdentifier: "row")
  grid.configure(delegate: self)
  self.view.addSubview(grid)
}
  • Implement a data source and delegate for MGGridView.
    You can do the same as the collection view.
  • Important!!!! Here’s what’s important.
    You need to config for the column in the grid view.
// Implementing delegate and data source
extension ViewController: MGGridViewDelegate, MGGridViewDataSource {
  func gridView(_ gridView: UICollectionView,
                cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = gridView.dequeueReusableCell(withReuseIdentifier: "row",
                                            for: indexPath) as! MGGridViewCell

    // Important!! You need to configure for column.
    cell.configure { view, layout in
      layout.scrollDirection = .horizontal

      view.showsHorizontalScrollIndicator = false
      view.showsVerticalScrollIndicator = false
      view.register(UICollectionViewCell.self,
                    forCellWithReuseIdentifier: "column")
    }

    return cell
  }

  func gridView(_ gridView: UICollectionView,
                numberOfItemsInSection section: Int) -> Int {
    return menus.count
  }
}
  • If necessary, also implement a Layout delegate.
// Row layout delegate implementation
extension ViewController: MGGridViewDelegateFlowLayout {
  func gridView(_ gridView: UICollectionView,
                layout gridViewLayout: UICollectionViewLayout,
                sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: UIScreen.main.bounds.width, height: 100)
  }
}
  • Implements a delegate for the column cell of MGGridView.
  • Important!!!! Here’s what’s important.
    In a delegate implementation, collectionView.tag is the row index of the corresponding grid view.
// Delegate implementation for column
extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource {
  func collectionView(_ collectionView: UICollectionView,
                      numberOfItemsInSection section: Int) -> Int {
    // Tag is the row index of the grid view.
    return menus[collectionView.tag].count
  }

  func collectionView(_ collectionView: UICollectionView,
                      cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "column",
                                                  for: indexPath) as! ColumnCollectionViewCell

    cell.title.text = menus[collectionView.tag][indexPath.row]
    return cell
  }
}
  • You can also implement the Layout delegate as needed.
// Row layout delegate implementation
extension ViewController: UICollectionViewDelegateFlowLayout {
  func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 80, height: 80)
  }
}

Aid

Requirements

  • Swift 3.0+
  • Xcode 8.0+
  • iOS 8.0+

Installation

pod 'MGGridView', '~> 0.1.1'
github "magi82/MGGridView ~> 0.1.1"

Author

magi82, [email protected]

License

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

Latest podspec

{
    "name": "MGGridView",
    "version": "0.1.1",
    "summary": "MGGridView is an easy and simple grid view.",
    "homepage": "https://github.com/magi82/MGGridView",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "magi82": "[email protected]"
    },
    "source": {
        "git": "https://github.com/magi82/MGGridView.git",
        "tag": "0.1.1"
    },
    "platforms": {
        "ios": "8.0"
    },
    "source_files": "Sources/*.swift",
    "pushed_with_swift_version": "3.0"
}

Pin It on Pinterest

Share This