Change in Display for a custom collectionview with both horizontal and vertical scroll

Question

Here I have output with code

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.

what change should I make here. I am making it in a bigger application, this is just a prototype of it.

Check this, UICollectionView scroll direction?? Horizontal / Vertical ? — McDonal_11, Feb 07 '18 at 12:57
In code i have not given scroll direction, where as in storyboard the Layout = Custom — niravdesai21, Feb 07 '18 at 13:29
I have updated my answer. If u r satisfy, kindly accept and upvote. — McDonal_11, Feb 07 '18 at 16:05

McDonal_11 · Accepted Answer · 2018-02-08T05:16:56.937

I have tried your code. By changing following things in CustomCollectionViewLayout class.

 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)

}

Output

If you are ok with ur question's answer, kindly vote for this. For, header, you can my answer from this link. "https://stackoverflow.com/questions/48664574/how-to-set-each-uicollectionview-section-in-an-individual-column/48700938#48700938" — McDonal_11, Feb 09 '18 at 09:11

Change in Display for a custom collectionview with both horizontal and vertical scroll

1 Answers1