Displaying two different cells in a collection vie

Question

I'm working on a "trading" application where I would like to have a static number of cells.

On load, users will see 5 cells, each displaying a label that says "Add."

When a "player" is added, that cell displays the players information, the other 4 cells still display the "Add" label. Another is added, 2 cells have player information, 3 have the "Add"

I'm having a hell of a time with this. Can anyone point my in the right direction? I have custom labels setup, I think my logic may just be off on how to perform this correctly.

Answer 1

You need to subclass the UICollectionViewDelegate and UICollectionViewDataSource protocols in your viewController, then you need to implement the numberOfItemsInSection and cellForItemAtIndexPath functions. Additionally to that you need to create two type of cells in your storyboard and subclass them, in the following code i will suppose that you call AddedPlayerCell and DefaultCell your cells, i will suppose that each cell has a label called labelText too.

let players = ["Player1","Player2"] //players added till now
let numberOfCells = 5

//Here you set the number of cell in your collectionView    
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return max(players.count,numberOfCells);
}

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
            if((indexPath.row + 1) < self.players.count){ //If index of cell is less than the number of players then display the player

                    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("yourIdentifierForAddedPlayerCell", forIndexPath: indexPath) as! AddedPlayerCell
                    cell.labelText.text = self.players[indexPath.row] //Display player
                    return cell;

            }else{//Else display DefaultCell
                    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("yourIdentifierForDefaultCell", forIndexPath: indexPath) as! DefaultCell
                    cell.labelText.text = "Add"
                    return cell;
            }
}

Answer 2

In order to manage two different cell types, you can:

1. Create 2 prototype cells for your collection view. Give one the identifier "Add" and the other "Info". The "Add" cell prototype will contain the label "Add", and the "Info" cell prototype will contain fields to display the player info.
2. Add an array property to your class which keeps track of which cells are displaying "Add". var showingAdd = [true, true, true, true, true]

3. In cellForItemAtIndexPath, check the showingAdd array to determine which identifier to use when dequeueing the cell:

   let identifier = showingAdd[indexPath.row] ? "Add" : "Info"
   let cell = dequeueReusableCellWithIdentifer(identifier...)
   
   if !showingAdd[indexPath.row] {
       // configure the cell with the proper player info
       // retrieve info from info property array item created in
       // step 4.
       let player = playerInfo[indexPath.row]
       cell.playerName = player.name
       ...
   }
   

4. When a cell is selected in didSelectItemAtIndexPath, check if it is showing add and then process it accordingly:

   if showingAdd[indexPath.row] {
       // query user to get player info
       // store the info in a property array indexed by `indexPath.row`
       playerInfo[indexPath.row] = PlayerInfo(name: name, ...)
   
       showingAdd[indexPath.row] = false
   
       // trigger a reload for this item
       collectionView.reloadItemsAtIndexPaths([indexPath])
   }