ios - 如何使用 UICollectionView 在单元格左侧创建部分和标题？

Question

我不确定我的问题是否很好。如果您考虑改进它，那就去做吧:) 但很快这就是我的意思:

• 每个橙色框是新部分框的标题(宽度和高度是静态的)。
• 这将链接到带有部分的获取结果 Controller
• 黄色 单元格的宽度始终占据屏幕的其余部分，并且具有自动的高度尺寸(取决于文本的长度)。

请告诉我:

1. 是否可以使用 UICollectionView 完全做到这一点？
2. 如何为黄色单元格设置自动高度尺寸？
3. 如何使黄色像在图像上一样 float ？

Answer 1

我认为您可以使用 UITableViewController 来做类似的事情。

思路是:

• 将单元格自定义为左右两部分。
• 节的第一项左侧用于节头，注意CellView 和ContentView 的Clip Subviews 应该取消选中.
• 需要调整部分最后一项的高度，以免重叠。

示例代码如下:

class ViewController: UITableViewController {

    struct Item {
        var height: CGFloat = 0
    }

    var itemDic: [Int: [Item]]!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        itemDic = [0 : [Item(height: 10), Item(height: 30), Item(height: 50)],
                 1 : [Item(height: 20), Item(height: 10)],
                 2 : [Item(height: 40), Item(height: 30), Item(height: 20)]]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return itemDic.count
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemDic[section]!.count
    }

    let sectionHeaderHeight: CGFloat = 100

    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

        let section = indexPath.section
        let row = indexPath.row
        let items = itemDic[section]!

        var height = items[row].height
        if (row == items.count - 1) {

            var total: CGFloat = 0
            for i in items {
                total += i.height + 10
            }

            if(sectionHeaderHeight + 10 > total){
                height += (sectionHeaderHeight + 10 - total)
            }
        }

        return height + 10
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let section = indexPath.section
        let row = indexPath.row
        let items = itemDic[section]!

        let cell = tableView.dequeueReusableCellWithIdentifier("Cell")!

        let orangeView = cell.viewWithTag(100)!
        let yellowView = cell.viewWithTag(101)!

        if(row == 0){
            let orangeFrame = orangeView.frame
            orangeView.frame = CGRect(origin: orangeFrame.origin, size: CGSize(width: orangeFrame.width, height: sectionHeaderHeight))
        }

        let yellowFrame = yellowView.frame
        let height = items[row].height
        yellowView.frame = CGRect(origin: yellowFrame.origin, size: CGSize(width: yellowFrame.width, height: height))

        return cell
    }

    override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
        let orangeView = cell.viewWithTag(100)!
        let yellowView = cell.viewWithTag(101)!

        let orangeFrame = orangeView.frame

        print(orangeFrame)

        let yellowFrame = yellowView.frame

        print(yellowFrame)
    }
}

更新:实际上上面的解决方案中存在一个错误，当滚动到顶部直到第一部分消失时，您会看到它被重新渲染并且布局将被破坏。

有更好的方法来做到这一点。

在 headerView 中添加一个内部 View (橙色)，它将在 tableCells 上呈现。请记住将标题的高度设置为 > 0。在这种情况下，单元格只需要包含正确的部分(黄色)。尽管如此，您仍需要调整最后一项的高度。

示例代码:

class ViewController: UITableViewController {

    struct Item {
        var height: CGFloat = 0
    }

    var itemDic: [Int: [Item]]!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        itemDic = [0 : [Item(height: 10), Item(height: 30), Item(height: 50), Item(height: 20)],
                 1 : [Item(height: 20), Item(height: 10)],
                 2 : [Item(height: 40), Item(height: 30), Item(height: 20), Item(height: 30)]]
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return itemDic.count
    }

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemDic[section]!.count
    }

    let sectionHeaderHeight: CGFloat = 100
    let innerViewOffset: CGFloat = 10
    override func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {

        // Must > 0
        return innerViewOffset
    }

    override func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        let view = UIView(frame: CGRect())

        view.backgroundColor = UIColor.blueColor()

        let innerView = UIView(frame: CGRect(x: 0, y: innerViewOffset, width: 100, height: 100))
        innerView.backgroundColor = colorForSection(section)
        view.addSubview(innerView)

        return view
    }

    func colorForSection(section: Int) -> UIColor {
        let colors = [UIColor.greenColor(), UIColor.redColor(), UIColor.purpleColor()]

        return colors[section]
    }

    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {

        let section = indexPath.section
        let row = indexPath.row
        let items = itemDic[section]!

        var height = items[row].height
        if (row == items.count - 1) {

            var total: CGFloat = 0
            for i in items {
                total += i.height + 10
            }

            if(sectionHeaderHeight + 10 > total){
                height += (sectionHeaderHeight + 10 - total)
            }
        }

        return height + 10
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier("Cell")!

        return cell
    }
}