Swift中的UICellView单元格布局 [英] UICellView cell layout in swift

问题描述

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

I am trying to use a UICollectionView to create a grid which a user can set to be x cells by y cells (entered in text boxes), while still occupying the same width on the screen.

我已经能够创建一个包含正确数量的单元格的网格视图，但是这些单元格的布局还不正确，即输入5乘7会产生35个单元格而不是5个单元格细胞通过7细胞布局。这是我到目前为止的代码。

I have been able to create a grid view which contains the correct number of cells, but these aren't in the correct layout yet, i.e. entering 5 by 7 will give 35 cells but not in a 5 cell by 7 cell layout. This is the code I have so far.

MyCollectionViewCell.swift
import UIKit

MyCollectionViewCell.swift import UIKit

class MyCollectionViewCell: UICollectionViewCell {

    @IBOutlet var cellLabel: UILabel!

}

CreateNewProject.swift

CreateNewProject.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，并且希望以编程方式将集合视图中的单元格调整为UICollectionView.width / x（用户选择的单元格宽度）。

I have constrained the UICollectionView on the left, right and top and was hoping to programatically resize the cells in the collection view to be UICollectionView.width / x (the number of cells wide chosen by the user).

不确定最佳方法，还需要在各个单元格之间保留一些空白区域。任何帮助将不胜感激！

Not sure of the best way to do this, and also need to keep some white space between the individual cells. Any help would be much appreciated!

推荐答案

简单，添加一个实现的视图控制器的扩展名UICollectionViewDelegateFlowLayout 协议：

Simple, add an extension of your view controller that implements the UICollectionViewDelegateFlowLayout protocol:

extension ViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        let  size = collectionView.frame.size.width / CGFloat(cols) - CGFloat((cols - 1)) * spacingBetweenCells
        return CGSize(width: size, height: size)
    }
}

spacingBetweenCells 在这里表示您要在单元格之间放置的间距。

spacingBetweenCells represents here the spacing you want to place between your cells.

这篇关于Swift中的UICellView单元格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！