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.
- 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)
}
}- Swift 3.0+
- Xcode 8.0+
- iOS 8.0+
- For iOS 8+ projects with CocoaPods:
pod 'MGGridView', '~> 0.1.1'- For iOS 8+ projects with Carthage:
github "magi82/MGGridView ~> 0.1.1"magi82, [email protected]
MGGridView is available under the MIT license. See the LICENSE file for more info.