iOS：如何创建具有不同大小和可点击单元格的collectionView

Question

我想创建一个规划应用程序，我已经完成了，但是我的问题是现在，我想要创建不同的单元格，如下所示：

我不知道是否有可能...

今天，我有这样的代码：

func numberOfSections(in collectionView: UICollectionView) -> Int { //colonnes: models 
    if _event != nil && _event!.models.count > 0 
    { 
     return _event!.models.count + 1 
    } 
    return 0 
} 

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int //lignes: slots 
    { 
    if _event != nil && _event!.models.count > 0 && _event!.models[0].slots.count > 0 
    { 
     if (section == 0) // A vérifier 
     { 

     return _event!.models[0].slots.count + 1 
     } 
     else 
     { 
     return _event!.models[section - 1].slots.count + 1 
     } 
    } 
    return 0 
} 

有了这样的结果：

Answer 1

UICollectionViewLayout绝对是要走的路。

我已经为你做了一个这方面的例子，它获取了部分和项目的数量，并生成你要求的布局，均匀地分布在UICollectionView的高度上的项目。

我冒出的上方，从而截图我不占用到大的空间，继承人的代码

class OrganiserLayout:UICollectionViewLayout { 

    let cellWidth:CGFloat = 100 
    var attrDict = Dictionary<IndexPath,UICollectionViewLayoutAttributes>() 
    var contentSize = CGSize.zero 

    override var collectionViewContentSize : CGSize { 
     return self.contentSize 
    } 

    override func prepare() { 
     // Generate the attributes for each cell based on the size of the collection view and our chosen cell width 
     if let cv = collectionView { 
      let collectionViewHeight = cv.frame.height 
      let numberOfSections = cv.numberOfSections 
      self.contentSize = cv.frame.size 
      self.contentSize.width = cellWidth*CGFloat(numberOfSections) 
      for section in 0...numberOfSections-1 { 
       let numberOfItemsInSection = cv.numberOfItems(inSection: section) 
       let itemHeight = collectionViewHeight/CGFloat(numberOfItemsInSection) 
       let itemXPos = cellWidth*CGFloat(section) 
       for item in 0...numberOfItemsInSection-1 { 
        let indexPath = IndexPath(item: item, section: section) 
        let itemYPos = itemHeight*CGFloat(item) 
        let attr = UICollectionViewLayoutAttributes(forCellWith: indexPath) 
        attr.frame = CGRect(x: itemXPos, y: itemYPos, width: cellWidth, height: itemHeight) 
        attrDict[indexPath] = attr 
       } 
      } 
     } 
    } 

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { 
     // Here we return the layout attributes for cells in the current rectangle 
     var attributesInRect = [UICollectionViewLayoutAttributes]() 
     for cellAttributes in attrDict.values { 
      if rect.intersects(cellAttributes.frame) { 
       attributesInRect.append(cellAttributes) 
      } 
     } 
     return attributesInRect 
    } 

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? { 
     // Here we return one attribute object for the specified indexPath 
     return attrDict[indexPath]! 
    } 

} 

为了验证这一点，我做了一个基本的UIViewController和UICollectionViewCell，这里是视图控制器：

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate { 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     // Use our new OrganiserLayout subclass 
     let layout = OrganiserLayout() 
     // Init the collection view with the layout 
     let collection = UICollectionView(frame: self.view.frame, collectionViewLayout: layout) 
     collection.delegate = self 
     collection.dataSource = self 
     collection.backgroundColor = UIColor.white 
     collection.register(OrganiserCollectionViewCell.self, forCellWithReuseIdentifier: "cell") 
     self.view.addSubview(collection) 

    } 

    func numberOfSections(in collectionView: UICollectionView) -> Int { 
     return 5 
    } 

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { 
     switch section { 
     case 0: 
      return 8 
     case 1: 
      return 6 
     case 2: 
      return 4 
     case 3: 
      return 2 
     case 4: 
      return 4 
     default: 
      return 0 
     } 
    } 

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { 
     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! OrganiserCollectionViewCell 
     cell.label.text = "\(indexPath.section)/\(indexPath.row)" 
     switch indexPath.section { 
     case 1: 
      cell.backgroundColor = UIColor.blue 
     case 2: 
      cell.backgroundColor = UIColor.red 
     case 3: 
      cell.backgroundColor = UIColor.green 
     default: 
      cell.backgroundColor = UIColor.cyan 
     } 
     return cell 
    } 

} 

而且UICollectionViewCell看起来是这样的：

class OrganiserCollectionViewCell:UICollectionViewCell { 

    var label:UILabel! 
    var seperator:UIView! 

    override init(frame: CGRect) { 
     super.init(frame: frame) 

     label = UILabel() 
     label.translatesAutoresizingMaskIntoConstraints = false 
     self.addSubview(label) 

     seperator = UIView() 
     seperator.backgroundColor = UIColor.black 
     seperator.translatesAutoresizingMaskIntoConstraints = false 
     self.addSubview(seperator) 

     let views:[String:UIView] = [ 
      "label":label, 
      "sep":seperator 
     ] 

     let cons = [ 
      "V:|-20-[label]", 
      "V:[sep(1)]|", 
      "H:|[label]|", 
      "H:|[sep]|" 
     ] 

     for con in cons { 
      self.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: con, options: [], metrics: nil, views: views)) 
     } 

    } 

    required init?(coder aDecoder: NSCoder) { 
     fatalError("init(coder:) has not been implemented") 
    } 

} 

希望这可以帮助一些，这是一个非常简单的例子，您可能需要修改它以实现您所需的日历查找结果。

Answer 2

我相信你有决心实现自己的自定义布局为collectionView - 你将需要定制UICollectionViewLayout实现。这不是一件小事，但有几个很好的教程，例如this tutorial。