Use with CollectionView

[ranhsd]

Hi, I am trying to create a component which contain a CollectionView but when i am trying to dequeue the cell i am getting the following error:

must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

My code for creating the cell is:

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        
        
        let id = CellPrototype.defaultIdentifier(MyComponent.self)
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: id, for: indexPath)
        
        if let cell = cell as? ComponentCollectionViewCell<MyComponent> {
            cell.mountComponentIfNecessary(MyComponent())
            cell.state = self.state?.items[indexPath.row]
            cell.render()
        }
        
        return cell
    }

And this is how i define the UICollectionView inside the component

        func pageScroll() -> NodeType {
            return Node<UICollectionView>(
                create: {[weak self] in
                    let layout = UICollectionViewFlowLayout()
                    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
                    collectionView.backgroundColor = BDColor.transparent
                    collectionView.dataSource = self
                    collectionView.isPagingEnabled = true
                    collectionView.showsHorizontalScrollIndicator = false
                    collectionView.showsVerticalScrollIndicator = false
                    collectionView.alwaysBounceHorizontal = true
                    self?.collectionView = collectionView
                    return collectionView
                },
                configure: {(collection,layout,size) in
                    layout.alignSelf = .stretch
                    layout.flexDirection = .row
                    layout.width = size.width
                    layout.height = size.height
                }
        )}

Anyone know what is the reason for such error?

Thanks!

[alexdrone]

UICollectionView works a bit differently from UITableView - you need to register a class for a reuse idenfier:

collectionView.registerClass(ComponentCollectionViewCell<MyComponent>.self, forCellWithReuseIdentifier: CellPrototype.defaultIdentifier(MyComponent.self))

Also check out Buffer - it has built-in table and collection view adapters that work great with Render.

[ranhsd]

Thanks! it works. I tried with Buffer and wanted to know. Can i create a sub state and send it into Buffer in my app?

[alexdrone]

Yes! Buffer is made to manage collections of models/states. So you can feed it your array of elements and it will take care of implementing the data source for your collection view.

…

On Thu, 23 Mar 2017 at 08:19, Ran Hassid ***@***.***> wrote: Thanks! it works. I tried with Buffer and wanted to know. Can i create a sub state and send it into Buffer in my app? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#39 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAOlAfC-EX9Re2sgaeuBD8et9bX-Aa-3ks5roo2TgaJpZM4MlDZ9> .

[ranhsd]

ok. I will try to use it again. Do you know how you can create collection view cell on full screen? currently i am trying to do it but it is only fixed size?

[alexdrone]

You can set the width and the height of the cell to the size parameter passed in the closure.

[jewilhel]

Hi Ran or Alex,
I'm trying to setup a collection view component and I was looking at the code snippets above trying to piece one together, but I'm still having trouble. I'm not sure what the issue is. The collection view draws to screen, but neither of my data source methods are called and no cells are rendered. I'm trying to do this purely in code so not using storyboards for either the collection view or cell prototype. Here is the code I have so far:

import Foundation
import UIKit
import Render

struct CollectionState: StateType {
    var id: String = "collectionContainer"
    var elements: [NodeType] = [layoutBuilder("")]
    var layoutAs: String = "flow"
    var direction: String = "vertical"
}

class CollectionContainer: ComponentView<CollectionState>, UICollectionViewDataSource, UICollectionViewDelegate {
    
    var collectionView: UICollectionView?
    
    required init() {
        super.init()
        //self.defaultOptions = [.preventViewHierarchyDiff]
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("Not supported")
    }
    
    override func render() -> NodeType {
        // A container view that wraps it's contents
        func layoutContainer() -> NodeType {
            return Node<UICollectionView>(
                create: {[weak self] in
                    let layout = UICollectionViewFlowLayout()
                    let collectionView = UICollectionView(frame: .zero, collectionViewLayout: layout)
                    collectionView.register(ComponentCollectionViewCell.self, forCellWithReuseIdentifier: CellComponent.reuseIdentifier)
                    collectionView.dataSource = self
                    collectionView.delegate = self
                    collectionView.backgroundColor = UIColor.blue
                    collectionView.isPagingEnabled = true
                    collectionView.showsHorizontalScrollIndicator = false
                    collectionView.showsVerticalScrollIndicator = false
                    collectionView.alwaysBounceHorizontal = true
                    self?.collectionView = collectionView
                    return collectionView
                },
                configure: {(collection,layout,size) in
                    layout.alignSelf = .stretch
                    layout.width = size.width
                    layout.height = size.height
                    configs[self.state.layoutAs]!(layout)
                    configs[self.state.direction]!(layout)
            }
            )}
        
        return layoutContainer()
    }
    
    // tell the collection view how many cells to make
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        print("Count")
    return state.elements.count
    }
    
    // make a cell for each cell index path
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let id = CellComponent.reuseIdentifier
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: id, for: indexPath)
        
        if let cell = cell as? ComponentCollectionViewCell {
            cell.mountComponentIfNecessary(CellComponent())
            cell.set(state: CellState(node: self.state.elements[indexPath.row]))
            print("Add Cells")
            cell.update(options: [])
        }
        return cell
    }
}