Collection view cells duplicate when scrolling - ios

Question

I've got a collection view and I've got a custom class for the cells. Each cell contains a text view, here is the code:
class CustomWriterPageCell: UICollectionViewCell, UITextViewDelegate {
fileprivate let textViewOne: UITextView = {
let tv = UITextView()
tv.backgroundColor = .cyan
tv.text = "Chapter Title"
tv.font = UIFont(name: "Avenir-Roman", size: 27)
tv.textColor = .gray
return tv
}()
}
Here is the cellForItemAt:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "WriterPageCellID", for: indexPath) as! CustomWriterPageCell
cell.backgroundColor = .clear
return cell
}
The text view has a placeholder that I've achieved through the following code (This is inside the custom cell class):
func textViewDidBeginEditing(_ textView: UITextView) {
if textView.textColor == .gray {
textView.text = nil
textView.textColor = .black
}
}
func textViewDidEndEditing(_ textView: UITextView) {
if textView.text.isEmpty {
textView.textColor = .gray
textView.text = "Chapter Title"
}
}
The problem is that, whatever I type on the text view of the first cell, appears on the 4th cell, I know that this is happening because of dequeueReusableCell but I can't seem to solve this problem.

Answer 1

The problem is that you don't specify what text to appear on each of your CollectionViewCell's textView. As long as you don't specify the same in cellForItemAt indexPath it is going to show the reused cell and its content, from dequeueReusableCell as you said.
For the solution to your specific problem you can do as below in the viewcontroller:
`var textViewContentArray = [Int: String]()` //Create a dictionary to hold the texts globally
In textViewDidEndEditing:
func textViewDidEndEditing(_ textView: UITextView) {
if textView.text.isEmpty {
textView.textColor = .gray
textView.text = "Chapter Title"
} else {
guard let cell = textView.superview?.superview as? CustomWriterPageCell else {
return
}
guard let indexPath = self.collectionView.indexPath(for: cell) else { return }
textViewContentArray[indexPath.row] = textView.text
}
}
In textViewDidBeginEditing:
func textViewDidBeginEditing(_ textView: UITextView) {
textView.textColor = .black
}
And in cellForItemAt indexPath:
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomWriterPageCell", for: indexPath) as! CustomWriterPageCell
cell.textView.delegate = self
let text = textViewContentArray[indexPath.row]
if !text.isEmpty {
cell.textView.textColor = .black
cell.textView.text = text
} else {
cell.textView.textColor = .gray
cell.textView.text = "Chapter Title"
}
return cell
}
Note: Here I am assuming you have set the Controller which holds the collectionView as delegate for the textViewInCell, if the cell is the delegate you can update the textViewContentArray using protocol
Hope this adds to your understanding.

Answer 2

I am assuming that 4th cell does not fit in current view (i.e available below on scroll - i.e Reused cell)
1) If you are reusing cell then you need to ensure that before cell goes out of view you need to save UITextView data somewhere. Otherwise it will lose data (i.e text written) due to reuse. Save data for each cell in data structure/any form.
2) If you scroll to 4th cell then check if data exists. If does not then set empty state to text view. If you write something then save data for 4th cell in data structure/any form..
(You can use this textViewDidEndEditing() to save current data)
3) Again scroll back to 1st cell type something there are save data of 1st cell data structure/any form for that index.
4) Now scroll back to 4th cell. During reuse set saved data of 4th cell to cell text view.
Data Saved at Index == Cell Index
Make sure you handle your use case correctly. There is nothing wrong with the reuse implementation. Make sure you save data and reset data correctly.

Answer 3

I suggest that the part you want to change is encapsulated into a model, such as the textColor, text you mentioned. Don't manually change the UI display, I mean by modifying the model and then refreshing the UI, so that's not There will be repetitions.
This is the rule for all tables, modify the model to refresh the UI, I hope to be useful to you.