ios - 具有水平和垂直滚动的自定义 Collection View 的显示更改

Question

我这里有 带代码输出

CustomCollectionViewController

class CustomCollectionViewController: UICollectionViewController {

// MARK: UICollectionViewDataSource
let value = [["a","b","c","d","e","f"], ["a","b","c"], ["a","b","c","d"], ["a","b","c","d","e","f"], ["a","b","c","d","e","f"]]

override func numberOfSections(in collectionView: UICollectionView) -> Int {
    //#warning Incomplete method implementation -- Return the number of sections
    return value.count
}


override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    //#warning Incomplete method implementation -- Return the number of items in the section
    return value[section].count
}

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

    // Configure the cell
    let text = value[indexPath.section][indexPath.item]
   // cell.label.text = "Sec " + indexPath.item.description + "/Item " + indexPath.section.description
    cell.label.text = "\(text)"
    return cell
}

}

CustomCollectionViewLayout

import UIKit

class CustomCollectionViewLayout: UICollectionViewLayout {

let CELL_HEIGHT = 30.0
let CELL_WIDTH = 100.0
let STATUS_BAR = UIApplication.shared.statusBarFrame.height


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

var dataSourceDidUpdate = true

override var collectionViewContentSize : CGSize {
    return self.contentSize
}

override func prepare() {
    dataSourceDidUpdate = false

    // Cycle through each section of the data source.
    if let sectionCount = collectionView?.numberOfSections, sectionCount > 0 {
        for section in 0...sectionCount-1 {

            // Cycle through each item in the section.
            if let rowCount = collectionView?.numberOfItems(inSection: section), rowCount > 0 {
                for item in 0...rowCount-1 {

                    // Build the UICollectionVieLayoutAttributes for the cell.
                    let cellIndex = IndexPath(item: item, section: section)
                    let xPos = Double(item) * CELL_WIDTH
                    let yPos = Double(section) * CELL_HEIGHT

                    let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: cellIndex)
                    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
                    }
                    cellAttrsDictionary[cellIndex] = cellAttributes

                }
            }

        }
    }

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

}

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

    var attributesInRect = [UICollectionViewLayoutAttributes]()

    for cellAttributes in cellAttrsDictionary.values {
        if rect.intersects(cellAttributes.frame) {
            attributesInRect.append(cellAttributes)
        }
    }

    return attributesInRect
}

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

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

Problem I want output as reverse order i.e.

我应该在这里做些什么改变。我正在一个更大的应用程序中制作它，这只是它的一个原型(prototype)。

Answer 1

我已经尝试过你的代码。通过更改 CustomCollectionViewLayout 类中的以下内容。

 override func prepare() {


    dataSourceDidUpdate = false

    // Cycle through each section of the data source.
    if let sectionCount = collectionView?.numberOfSections, sectionCount > 0 {
        for section in 0...sectionCount-1 {

            //ADD THIS NEW LINES.
            let xPos = (Double(section) * CELL_WIDTH) + (Double(section) * 5)
           var yPos : Double = 0.0

            if let rowCount = collectionView?.numberOfItems(inSection: section), rowCount > 0 {
                for item in 0...rowCount-1 {

                    // Build the UICollectionVieLayoutAttributes for the cell.
                    let cellIndex = IndexPath(item: item, section: section)

                    //let xPos = Double(item) * CELL_WIDTH
                    //let yPos = Double(section) * CELL_HEIGHT

                    // Comment above lines and add the below lines. 
                    yPos = (Double(item) * CELL_HEIGHT) + (Double(item) * 5)

                    let cellAttributes = UICollectionViewLayoutAttributes(forCellWith: cellIndex)
                    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
                    }
                    cellAttrsDictionary[cellIndex] = cellAttributes

                }
            }

        }
    }

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

}

输出