MGGridView 0.1.1

MGGridView 0.1.1

×

测试测试✗
Lang语言 SwiftSwift
许可 MIT
发布最后发布2017年6月
SwiftSwift 版本3.0
SPM支持 SPM✗

由 magi82 维护。

MGGridView 0.1.1

  • 由
  • magi82

MGGridView

MGGridView 是由多个集合视图组合而成的网格视图。
苹果的集合视图方法简单且易于实现。☀️

MGGridView 可以在 Storyboard 中创建。
然而，在 Carthage 中，只能以编程方式创建。
Carthage 问题 #763

列单元格不支持在 Storyboard 中注册。
您可以通过编程方式或使用 xib 来实现它。

示例

用法

  • 声明 MGGridView，并将数据添加到数据源。
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"]
  ]
  • 创建 MGGridView 并进行配置。
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)
}
  • 实现 MGGridView 的数据源和委托。
    您可以像使用集合视图一样执行相同的操作。
  • 非常重要！！！！ 这里是重要的内容。
    您需要在网格视图中为列进行配置。
// 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
  }
}
  • 如果有必要，还可以实现布局委托。
// 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)
  }
}
  • 实现 MGGridView 列单元格的委托。
  • 非常重要！！！！ 这里是重要的内容。
    在委托实现中，collectionView.tag 是对应网格视图的行索引。
// 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
  }
}
  • 您也可以根据需要实现布局委托。
// 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+

安装

  • 对于 iOS 8+ 项目 ，使用 CocoaPods
pod 'MGGridView', '~> 0.1.1'
  • 对于 iOS 8+ 项目 ，使用 Carthage
github "magi82/MGGridView ~> 0.1.1"

作者

magi82, [email protected]

许可证

MGGridView 在 MIT 许可下可用。有关更多信息，请参阅 LICENSE 文件。