Method to create tableView with dynamic cell and programmatically design

Question

I have returned the problem in all directions and I do not find the right way to do what I want.

The problem is that I need to manage 6 type of cells who have their own design. For example I have a enum like that:

enum state {
    case buy
    case select
    case go
    case waiting
    case work
    case ended
}

I have a data source which is an array of the data I need to build the cell. This array is always update in my code and I want the array define the order and the cell display in the tableView.

Before I use one cell and display the design I need with a switch of the state in the cellForRowAt function. But the problem a have is the reuse system who keep in cache my old cell that I had replaced.

In my case I need to display sometimes 2 cell with the state [select, buy] and after insert the cell [go] at row 1 -> [select, go, buy] ... and after add 2 row like that [select, go, go, ended, buy].

But when I do that, the design of the old cell keep here. What is the best way to do that ?

Edit

This is what I have tried:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return user.lobbySurvey.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier:"Celll", for: indexPath) as! CardCell
    for survey in user.lobbySurvey{
        let index = user.lobbySurvey.index(where: {
            //get the current index is nedeed else the cells reuse lazy
            $0 === survey
        })
        if indexPath.row == index{
            var surveyState : UserSurvey.state
            surveyState = survey.stateSurvey
            switch surveyState{
            case .selectPicture:
                cell.drawCard(statutOfCard: .selectPicture)
            case .goSurvey:
                cell.drawCard(statutOfCard: .goSurvey(picture: survey.picture))
            case .surveyEnded:
                print("survey Ended")
            case .surveyWork:
                print("survey in progress to vote")
            case .surveyWaiting:
                cell.drawCard(statutOfCard: .surveyWaiting(selfSurveyId: survey.id, timeLeft: survey.timeLeft, picture: survey.picture))
            case .buyStack:
                cell.drawCard(statutOfCard: .buyStack(bigView : self.view))
            }

        }
    }
    return cell
}

My function drawcard is a switch who redirect like this type of function:

func drawGoSurvey(image: UIImage){
    if(cardIsDraw == false){
        widthOfCard = UIScreen.main.bounds.size.width - (widthMarginConstraint*2)
        cardViewHeightCon.constant = widthOfCard!*ratioOfImage
        goSurvey.draw(countUserSurvey: user.surveyCount, cardView: self.cardView, widthOfCard : widthOfCard!, userPicture: image)
        goSurvey.delegate = self
        self.addCardShadow()
        cardIsDraw = true
    }
}

Answer 1

You seem to be trying to set up every single one of your cells when you should instead only be setting up the cell for that particular indexPath. The way a table view works is it will determine how many cells need to display and then call tableView(_:, cellForRowAt:) for however many cells it needs to render.

To fix your issue, you're going to want to do something closer to this:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
   let cell = tableView.dequeueReusableCell(withIdentifier:"Cell", for: indexPath) as! CardCell
   let state = user.lobbySurvey[indexPath.row]
   switch state {
   case .selectPicture:
      // Customize for select picture

   case .goSurvey:
      // Customize for goSurvey

   case .surveyEnded:
      // Customize for surveyEnded

   case .surveyWork:
      // Customize

   case .surveyWaiting:
      // Customize

   case .buyStack:
      // Customize
   }
   return cell
}