表格视图重叠的单元格swift2

Question

I have a tableview in my app. it's on the detail view of my split view . Whenever i populate my tableview with UItextviews , the cells seem to overlap each other. this is not what i want. Does anyone have any suggestions to fix this?

here's my vc code:

  import UIKit

class DetailViewController: UIViewController, UITableViewDelegate, UITextViewDelegate {

@IBOutlet weak var messagesTableView: UITableView!
var initVar = 0

var row: Int?

var firstLoad = true

var detailItem = {}
var convo = ["hello", "hellohello", "hellohellohellohello", "hellohellohellohellohellohellohellohello", "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello", "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello", "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello", "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello", "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello", "hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello"]

override func viewDidLoad() {
    super.viewDidLoad()

    // Uncomment the following line to preserve selection between presentations
    // self.clearsSelectionOnViewWillAppear = false

    // Uncomment the following line to display an Edit button in the navigation bar for this view controller.
    // self.navigationItem.rightBarButtonItem = self.editButtonItem()
    print("hello")
    messagesTableView.separatorColor = UIColor.whiteColor()

    print(row)
    messagesTableView.reloadData()
    print(firstLoad)

    let numberOfSections = messagesTableView.numberOfSections
    let numberOfRows = messagesTableView.numberOfRowsInSection(numberOfSections-1)

    if numberOfRows > 0 {
        print(numberOfSections)
        let indexPath = NSIndexPath(forRow: numberOfRows-1, inSection: (numberOfSections-1))
        messagesTableView.scrollToRowAtIndexPath(indexPath, atScrollPosition: UITableViewScrollPosition.Bottom, animated: false)
    }
    messagesTableView.reloadData()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

// MARK: - Table view data source

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

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("detailCell", forIndexPath: indexPath)

    var textView = UITextView()

    textView.delegate = self
    textView.editable = false
    textView.text = convo[indexPath.row]
    textView.textAlignment = .Center
    textView.sizeToFit()

    if indexPath.row % 2 == 0 {
        textView = UITextView(frame: CGRect(x: cell.frame.width * (2/5), y: 4, width: cell.frame.width * (3/5), height: cell.frame.height))
        textView.backgroundColor = UIColor.blueColor()
    } else {
        textView = UITextView(frame: CGRect(x: 0, y: 4, width: cell.frame.width * (3/5), height: cell.frame.height))
        textView.backgroundColor = UIColor.greenColor()
    }

    textView.textColor = UIColor.whiteColor()

    textView.delegate = self
    textView.editable = false
    textView.text = convo[indexPath.row]
    textView.textAlignment = .Center
    textView.sizeToFit()
    tableView.rowHeight = textView.frame.height + 7
    cell.addSubview(textView)


    return cell
}
}

Answer 1

The cells are being re-used in a UITableView .

You are adding TextView's on it, so you are keep on adding TextView's every time it's being re-used.

Your code should be modified so that the TextView is only added IF it's not already present on the cell.

The easiest way, is to add a TAG (unique) to the TextView, then if the View from Tag is nil (AKA not present) add it, else get it from the ViewFromTag

As for an example, although I'm still using obj-c and with that in mind, my code might have an error, here is the code:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("detailCell", forIndexPath: indexPath)

        var textView: UITextView

        if (cell.viewWithTag(10000) != nil) {
            textView = (cell.viewWithTag(10000) as? UITextView)!
        }
        else {
            textView  = UITextView()
            textView.tag = 10000
            textView.delegate = self
            textView.editable = false
            textView.textAlignment = .Center
            cell.addSubview(textView)
        }

        textView.text = convo[indexPath.row]

        if indexPath.row % 2 == 0 {
            textView.frame = CGRectMake(cell.frame.width * (2/5) , 4, cell.frame.width * (3/5), cell.frame.height)
            textView.backgroundColor = UIColor.blueColor()
        } else {
            textView.frame = CGRectMake(0 , 4, cell.frame.width * (3/5), cell.frame.height)
            textView.backgroundColor = UIColor.greenColor()
        }

        textView.sizeToFit()
        tableView.rowHeight = textView.frame.height + 7

        return cell
    }

To explain the code, as you didn't understood:

The UITableView is re-using the cells. This means, whenever a cell is moved outside the visible part of the screen, it is been re-used (as it is) and is displayed as a new cell for the TableView.

The reason for this, is memory efficiency. So imagine a UITableView with 1000 row. If for each row a new cell was created, we will have to allocate memory for each cell.

But in a typical application usually only a few cells are visible each time (usually less than 10). So the trick here is that we only need to create that many cells. Once a cell gets out of sight, it is been served as a new cell for the TableView.

So if you add a UITextView every time the tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell delegate method is called, and the cell is been re-used, you end up adding UITextViews to a cell that already has one. So you end up with the problem you showed.

The code I provided does two things differently:

1. It does assign a unique Tag number on the UITextView when it's added to the cell ( textView.tag = 10000 )
2. It does check if a UITextView has already been added to the cell and if it has been added we use that UITextView and we don't add it again ( if (cell.viewWithTag(10000) != nil) )