two UITableView in a UICollectionView using the same reference? - ios

Question

I have a UICollectionView with 4 views in it. Each of these views have a UITableView inside it with custom cells. Each cell of the UITableView has a UIButton inside it and I have 2 cells per UITableView.
Something strange is happening. I have an action function for each button so that when a button is clicked, it becomes purple. The strange thing is this: if I scroll to the 4th view of my collection view and click on a button, it becomes purple as expected but then when I scroll to the 1st view of my collection view, the same button that I clicked in the 4th view (either the first one or second one) is also purple as if the 4th view of my collection view was referencing the items of my 1st view of the collection view.
I don't know at which point the 1st view becomes the same as the 4th view but here is a sample of the code:
// this is the cellForItemAt of my UICollectionView, very basic
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cellView = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! PollCellView
return cellView
}
// THIS IS ANOTHER FILE HERE
// this is part of my view that populate the UICollectionViews
class PollCellView: UICollectionViewCell {
// the table view
let questAndAnswersTableView : UITableView = {
let tableView = UITableView()
tableView.translatesAutoresizingMaskIntoConstraints = false
tableView.separatorStyle = .none
tableView.allowsSelection = false
return tableView
}()
// I add the tableview in the view here
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(questAndAnswersTableView)
// a classic cellForRowAt of my UITableView
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "AnswerCell2", for: indexPath) as! AnswerCell2
return cell
}
// THIS IS ANOTHER FILE HERE
// this part is my custom cell of the UITableView
class AnswerCell2: UITableViewCell {
let answerTextButton: UIButton = {
let answerButton = UIButton()
answerButton.setTitle("initial text", for: .normal)
return answerButton
}()
// I add the button to the cell here
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String!) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
addSubview(answerTextButton)
// I define the action function
answerTextButton.addTarget(self, action: #selector(answerClicked), for: .touchUpInside)
}
// the action to make the button purple
#objc func answerClicked(sender: UIButton) {
sender.backgroundColor = UIColor(displayP3Red: 0.6902, green: 0.7176, blue: 0.9922, alpha: 1.0)
}
[EDIT FOLLOWING THE ANSWERS RECEIVED]
Dequeuing is definitely not as simple as it first seems... You can't trust that the tableview dequeued in a given collection view is really the one you expect... You need to keep track of the content (model) yourself. One thing that made it easier to fix is to use closures between the cell of the TableView and the cell of the UICollectionViewCell... You can very easily pass data from one to the other (like what indexPath was clicked, etc.).

Answer 1

when you're managing multiple nested tableviews or collectionviews or even when you're managing this yourself, you have to set up a system of arrays that when the button is clicked, you add those indexpaths to an array called "indexPathsThatArePuple" then when you after each button click, inside the button click function, you pass the indexPath and add that to the array. If the button is already inside the array when the button click function is pressed, then you remove that indexPath. in the button click function, after you add or remove indexPaths, you reload the collection view which will reload the tableviews and then inside "cellForItemAtIndexPath" you check the indexPathsThatArePuple array and then write "if indexpath is contained in indexPathsThatArePuple" then set the cell color to purple.
I understand what you're trying to do, but you don't realize or understand just how complicated the cell reuse system is in iOS. The first thing you need to do is wrap your mind around the idea the that you have to manually manage cell states due to cell resuse. The purple cell showing up in another table is from cell reuse. Apple won't automatically manage this for you, you have to do it yourself. As i described above and even my description above is not that cut and dry since you'll likely struggle with this for weeks until you grasp the concept. Good luck, you'll eventually get it.

Answer 2

It seems to be caused by UICollectionView cell reuse mechanism.
When the cell is created and scroll out of the screen, it will be reused later if a new cell with the same identifier is required. In your case, when you scroll down, the 1st view is reused as the 4th view, And when you scroll to the top, The 4th view is reused as the first view. If the method prepareForReuse happens to be not implemented, the UI status of the cell will not be change, so you will see the button with purple color.