ios - swift 中的 UICellView 单元格布局

Question

我正在尝试使用 UICollectionView 创建一个网格，用户可以将其设置为 x 个单元格和 y 个单元格(在文本框中输入)，同时在屏幕上仍占据相同的宽度。

我已经能够创建一个包含正确数量单元格的 GridView ，但这些单元格的布局还不正确，即输入 5 x 7 将给出 35 个单元格，但不是 5 单元格 x 7 单元格布局.这是我到目前为止的代码。

MyCollectionViewCell.swift 导入 UIKit

class MyCollectionViewCell: UICollectionViewCell {

    @IBOutlet var cellLabel: UILabel!

}

创建新项目.swift

class CreateNewProject : UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UITextFieldDelegate {

    @IBOutlet var widthTextBox: UITextField!

    @IBOutlet var lengthTextBox: UITextField!

    @IBOutlet var myCollection: UICollectionView!

    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard

    @IBAction func updateView(sender: AnyObject) {
        let widthValue = Int(widthTextBox.text!)
        let lengthValue = Int(lengthTextBox.text!)
        multiplyValue = Int(widthValue! * lengthValue!)
        createArray()
    }


    func createArray() {
        var i = 0
        while i < multiplyValue {
            items.append("")
            i += 1
        }
        myCollection.reloadData()
    }


    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        print(self.items.count)
    }

    // make a cell for each cell index path
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

        // get a reference to storyboard cell
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! MyCollectionViewCell

        // Use the outlet in custom class to get a reference to the UILabel in the cell
        cell.cellLabel.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.lightGrayColor()

        return cell
    }    
}

我已将 UICollectionView 限制在左侧、右侧和顶部，并希望以编程方式将 Collection View 中的单元格大小调整为 UICollectionView.width/x(用户选择的单元格宽度)。

不确定执行此操作的最佳方法，并且还需要在各个单元格之间保留一些空白。任何帮助将不胜感激!

Answer 1

这是添加到您的 collectionView 的代码。属性 cellsAcross、cellsDown、horizGap 和 vertGap 是您可以在应用中设置的值。 horizGap 和 vertGap 在方法 minimumInteritemSpacingForSectionAtIndex 和 minimumLineSpacingForSectionAtIndex 中设置。 sizeForItemAtIndexPath 将计算单元格所需的尺寸以使其正常工作。

var cellsAcross = 5
var cellsDown = 7
var horizGap = 4
var vertGap = 4

func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return cellsAcross * cellsDown
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    return CGFloat(vertGap)
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return CGFloat(horizGap)
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
    // Compute the dimensions of a cell for a cellsAcross x cellsDown layout.

    let dimH = (collectionView.bounds.width - (CGFloat(cellsAcross) - 1) * CGFloat(horizGap)) / CGFloat(cellsAcross)

    let dimV = (collectionView.bounds.height - (CGFloat(cellsDown) - 1) * CGFloat(vertGap)) / CGFloat(cellsDown)

    return CGSize(width: dimH, height: dimV)
}

---

对于这个演示，我添加了以下代码:

@IBAction func threeBy5(sender: UIButton) {
    cellsAcross = 3
    cellsDown = 5
    collectionView.reloadData()
}

@IBAction func fourBy6(sender: UIButton) {
    cellsAcross = 4
    cellsDown = 6
    collectionView.reloadData()
}

@IBAction func fiveBy7(sender: UIButton) {
    cellsAcross = 5
    cellsDown = 7
    collectionView.reloadData()
}

// Handle screen rotation
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
    collectionView.reloadData()
}