无法理解如何在 iOS Swift 中创建具有多列的表

Stuck understanding how to create a table with multiple columns in iOS Swift

提问by Matty

I've spent the better half of the day so far researching and trying to understand how to make a table with multiple columns. Embarrassingly, I am still quite new to Swift and programming in general so a lot of the stuff I've read and found aren't helping me too much.

到目前为止，我已经花了大半天的时间研究并试图了解如何制作具有多列的表格。令人尴尬的是，我对 Swift 和编程还是很陌生，所以我读过和发现的很多东西对我并没有太大帮助。

I have basically found exactly what I want to create with this gentleman's blo: http://www.brightec.co.uk/blog/uicollectionview-using-horizontal-and-vertical-scrolling-sticky-rows-and-columns

我基本上已经找到了我想用这位绅士的 blo 创建的内容：http://www.brightec.co.uk/blog/uicollectionview-using-horizo​​ntal-and-vertical-scrolling-sticky-rows-and-columns

However, even with his Github I'm still confused. It seems as if he did not use Storyboard at all (and for my project I've been using storyboard a lot). Am I correct in assuming this?

然而，即使有了他的 Github，我仍然感到困惑。似乎他根本没有使用故事板（对于我的项目，我一直在使用故事板）。我的假设是否正确？

What I have so far is a UICollectionView embedded in a navigation controller. From here, I have created a new cocoa touch class file subclassed in the CollectionView. But from here is where I'm not entirely sure where to go.

到目前为止，我拥有的是嵌入在导航控制器中的 UICollectionView。从这里开始，我在 CollectionView 中创建了一个新的可可触摸类文件。但从这里开始，我不完全确定要去哪里。

If I can have some direction as to where to go from here or how to properly set it up that would be GREATLY appreciated.

如果我能对从这里去哪里或如何正确设置它有一些指导，那将不胜感激。

Thanks so much in advance!

非常感谢！

采纳答案by Syed Tariq

One approach is to use a custom cell in a tableviewcontroller. Your story board consists of a table in which the cell is a custom cell with UILabels for columns laid out next to each other (with properly defined constraints).

一种方法是在 tableviewcontroller 中使用自定义单元格。您的故事板由一个表格组成，其中的单元格是一个自定义单元格，其中带有 UILabels 用于彼此相邻的列（具有正确定义的约束）。

Example code for the controllers looks like:

控制器的示例代码如下所示：

import UIKit

class TableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // MARK: - Table view data source

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

        return 3
    }


    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier", forIndexPath: indexPath) as TableViewCell
        cell.column1.text = "1" // fill in your value for column 1 (e.g. from an array)
        cell.column2.text = "2" // fill in your value for column 2

        return cell
    }

}

and:

和：

import UIKit

class TableViewCell: UITableViewCell {

    @IBOutlet weak var column1: UILabel!
    @IBOutlet weak var column2: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

回答by Ashok R

IOS 10, XCode 8, Swift 3.0

IOS 10、XCode 8、Swift 3.0

I found an awesome tutorialon this. thanks to Kyle Andrews

我找到了一个很棒的教程。感谢凯尔安德鲁斯

I created a vertical table which can be scrollable on both directions by subclassing UICollectionViewLayout. Below is the code.

我创建了一个垂直表，通过继承 UICollectionViewLayout 可以在两个方向上滚动。下面是代码。

 class CustomLayout: UICollectionViewLayout {

    let CELL_HEIGHT: CGFloat = 50
    let CELL_WIDTH: CGFloat = 180


    var cellAttributesDictionary = Dictionary<IndexPath, UICollectionViewLayoutAttributes>()
    var contentSize = CGSize.zero

    override var collectionViewContentSize: CGSize {
        get {
            return contentSize
        }
    }

    var dataSourceDidUpdate = true

    override func prepare() {

        let STATUS_BAR_HEIGHT = UIApplication.shared.statusBarFrame.height
        let NAV_BAR_HEIGHT = UINavigationController().navigationBar.frame.size.height

        collectionView?.bounces = false

        if !dataSourceDidUpdate {

            let yOffSet = collectionView!.contentOffset.y

            for section in 0 ..< collectionView!.numberOfSections {
                if section == 0 {
                    for item in 0 ..< collectionView!.numberOfItems(inSection: section) {
                        let cellIndexPath = IndexPath(item: item, section: section)
                        if let attrs = cellAttributesDictionary[cellIndexPath] {
                            var frame = attrs.frame
                            frame.origin.y = yOffSet + STATUS_BAR_HEIGHT + NAV_BAR_HEIGHT
                            attrs.frame = frame
                        }
                    }
                }
            }
           return
        }

        dataSourceDidUpdate = false

        for section in 0 ..< collectionView!.numberOfSections {
            for item in 0 ..< collectionView!.numberOfItems(inSection: section) {
                let cellIndexPath = IndexPath(item: item, section: section)
                let xPos = CGFloat(item) * CELL_WIDTH
                let yPos = CGFloat(section) * CELL_HEIGHT

                let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: cellIndexPath)
                cellAttributes.frame = CGRect(x: xPos, y: yPos, width: CELL_WIDTH, height: CELL_HEIGHT)

                // Determine zIndex based on cell type.
                if section == 0 && item == 0 {
                    cellAttributes.zIndex = 4
                } else if section == 0 {
                    cellAttributes.zIndex = 3
                } else if item == 0 {
                    cellAttributes.zIndex = 2
                } else {
                    cellAttributes.zIndex = 1
                }

                cellAttributesDictionary[cellIndexPath] = cellAttributes

            }
        }

        let contentWidth = CGFloat(collectionView!.numberOfItems(inSection: 0)) * CELL_WIDTH
        let contentHeight = CGFloat(collectionView!.numberOfSections) * CELL_HEIGHT
        contentSize = CGSize(width: contentWidth, height: contentHeight)
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var attributesInRect = [UICollectionViewLayoutAttributes]()

        for cellAttrs in cellAttributesDictionary.values {
            if rect.intersects(cellAttrs.frame) {
                attributesInRect.append(cellAttrs)
            }
        }

        return attributesInRect
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        return cellAttributesDictionary[indexPath]
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

Below is my CollectionViewController Code.

下面是我的 CollectionViewController 代码。

    import UIKit

private let reuseIdentifier = "Cell"

class VerticalCVC: UICollectionViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView?.isScrollEnabled = true
    }

    // MARK: UICollectionViewDataSource

    override func numberOfSections(in collectionView: UICollectionView) -> Int {

        return 20
    }


    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 10
    }

    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! CustomCell

        if indexPath.section == 0 {
            cell.backgroundColor = UIColor.darkGray
            cell.titleLabel.textColor = UIColor.white


        } else {
            cell.backgroundColor = UIColor.white
            cell.titleLabel.textColor = UIColor.black
        }

        cell.titleLabel.text = "section: \(indexPath.section) && row: \(indexPath.row)"

        return cell
    }
}

To force CollectionView to use Custom Layout instead of UICollectionViwFlowLayout check below image.

要强制 CollectionView 使用自定义布局而不是 UICollectionViwFlowLayout 检查下图。

Result:

结果：

Portrait mode

人像模式

landscape mode

横向模式

回答by Syed Tariq

In IB I set up a tableview and added a stackview in the content view (can be done programmatically). The labels are setup programmatically since it allows me to set the width of each column as a fraction of the cell width. Also, I acknowledge that some of the calculations inside the table view cellForRow method should be moved out.

在IB中，我设置了一个tableview并在内容视图中添加了一个stackview（可以以编程方式完成）。标签以编程方式设置，因为它允许我将每列的宽度设置为单元格宽度的一部分。另外，我承认应该移出表视图 cellForRow 方法中的一些计算。

 import UIKit

class tableViewController: UITableViewController {
var firstTime = true
var width = CGFloat(0.0)
var height = CGFloat(0.0)
var cellRect = CGRectMake(0.0,0.0,0.0,0.0)

let colors:[UIColor] = [
    UIColor.greenColor(),
    UIColor.yellowColor(),
    UIColor.lightGrayColor(),
    UIColor.blueColor(),
    UIColor.cyanColor()
]

override func viewDidLoad() {
    super.viewDidLoad()
// workaround to get the cell width 
    cellRect = CGRectMake(0, 0, self.tableView.frame.size.width ,44);
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()

}

// MARK: - Table view data source

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    return 3
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 1
}

var cellWidth = CGFloat(0.0)
var cellHeight = CGFloat(0.0)
let widths = [0.2,0.3,0.3,0.2]
let labels = ["0","1","2","3"]

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)
        let v = cell.contentView.subviews[0] // points to stack view
        // Note: using w = v.frame.width picks up the width assigned by xCode.
        cellWidth = cellRect.width-20.0 // work around to get a right width
        cellHeight = cellRect.height

        var x:CGFloat = 0.0
        for i in 0 ..< labels.count {
            let wl = cellWidth * CGFloat(widths[i])
            let lFrame = CGRect(origin:CGPoint(x: x,y: 0),size: CGSize(width:wl,height: cellHeight))
            let label = UILabel(frame: lFrame)
            label.textAlignment = .Center
            label.text = labels[i]
            v.addSubview(label)
            x = x + wl
            print("i = ",i,v.subviews[i])
            v.subviews[i].backgroundColor = colors[i]
        }


    return cell
}


}