MGGridView 0.1.1

Maintained by magi82.

You want to add pod 'MGGridView', '~> 0.1' similar to the following to your Podfile:

target 'MyApp' do
  pod 'MGGridView', '~> 0.1'
end

Then run a pod install inside your terminal, or from CocoaPods.app.

Alternatively to give it a test run, run the command:

pod try MGGridView

MGGridView 0.1.1

By
magi82

MGGridView

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

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

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

tiny2n

Requirements

Swift 3.0+
Xcode 8.0+
iOS 8.0+

Installation

For iOS 8+ projects with CocoaPods:

pod 'MGGridView', '~> 0.1.1'

For iOS 8+ projects with Carthage:

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.