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，这是 View Controller :

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")
    }

}

希望其中一些有所帮助，这是一个非常简化的示例，您可能需要修改它才能实现您需要的日历查看结果。