Reusable UITableViewCell duplicating on scroll in Swift - ios

Question

Revisiting some old code I once did to start learning how code works when developing iOS applications so I apologize for the godlike viewController. The problem when running the app is that once a user begins to scroll the tableview, the labels are beginning to duplicate on top of each other and I'm pretty sure the webviews are most likely stacking as well. I've tried changing the code where I add the subviews in the cell by using the cell.contentview.addsubview() method but that doesn't change the stacking behavior when scrolling. I'm using the dequeueReusableCellWithIdentifier() method as well which I thought clears out cells all together once it goes off screen.
Any help here would be greatly appreciated as I'm still learning. Thank you in advance.
import UIKit
class VimeoFeedViewController: UIViewController, NSXMLParserDelegate, UITableViewDataSource, UIWebViewDelegate, UITableViewDelegate
{
#IBOutlet var tbData: UITableView?
var parser = NSXMLParser()
var posts = NSMutableArray()
var elements = NSMutableDictionary()
var element = NSString()
var title1 = NSMutableString()
var date = NSMutableString()
var link = NSMutableString()
var webView = UIWebView()
var boxView = UIView()
var selectedCell = NSIndexPath()
var valueToPass:String!
var viewToPass: UIView!
var customWebView = UIWebView()
var url = NSURL()
//custom code for webviews to show up
var postTitle: String = String()
var postLink: String = String()
var ename: String = String()
//end of custom code for webviews to show up
override func viewDidLoad() {
super.viewDidLoad()
self.beginParsing()
self.tbData?.backgroundColor = UIColor(patternImage: UIImage(named: "home-page-background.png")!)
webView.delegate = self
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func beginParsing()
{
posts = []
parser = NSXMLParser(contentsOfURL:(NSURL(string:"https://vimeo.com/channels/1000464/videos/rss"))!)!
parser.delegate = self
parser.parse()
tbData!.reloadData()
}
//XMLParser Methods
func parser(parser: NSXMLParser, didStartElement elementName: String, namespaceURI: String?, qualifiedName qName: String?, attributes attributeDict: [String : String])
{
element = elementName
if (elementName as NSString).isEqualToString("item")
{
elements = NSMutableDictionary()
elements = [:]
title1 = NSMutableString()
title1 = ""
date = NSMutableString()
date = ""
link = NSMutableString()
link = ""
postTitle = String()
postLink = String()
}
}
func parser(parser: NSXMLParser, didEndElement elementName: String, namespaceURI: String?, qualifiedName qName: String?)
{
if (elementName as NSString).isEqualToString("item") {
if !title1.isEqual(nil) {
elements.setObject(title1, forKey: "title")
}
if !date.isEqual(nil) {
elements.setObject(date, forKey: "date")
}
if !link.isEqual(nil) {
elements.setObject(link, forKey: "link")
}
posts.addObject(elements)
}
}
func parser(parser: NSXMLParser, foundCharacters string: String)
{
if element.isEqualToString("title") {
title1.appendString(string)
}
if element.isEqualToString("pubDate") {
date.appendString(string)
}
if element.isEqualToString("link") {
link.appendString(string)
}
}
//Tableview Methods
func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 1
}
func tableView(tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
return 100.0
}
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let headerView = UIView(frame: CGRectMake(0, 0, tableView.frame.size.width, 40))
let imageName = "broughtToYouAG.png"
let image = UIImage(named: imageName)
let imageView = UIImageView(image: image!)
imageView.frame = CGRect(x: 0, y: 0, width: 420, height: 91)
headerView.addSubview(imageView)
headerView.backgroundColor = UIColor(patternImage: UIImage(named: "home-page-background.png")!)
return headerView
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int{
return posts.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell{
var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier("Cell")!
if(cell.isEqual(NSNull)) {
cell = NSBundle.mainBundle().loadNibNamed("Cell", owner: self, options: nil)![0] as! UITableViewCell;
}
//start of customization
let textLabelCustom = UILabel(frame: CGRectMake(20, 0, 200, 91))
let detailTextLabelCustom = UILabel(frame: CGRectMake(20, 0, 200, 20))
let customWebView:UIWebView = UIWebView(frame: CGRectMake(245, 5, 149, 80))
let url: NSURL? = NSURL(string: posts.objectAtIndex(indexPath.row).valueForKey("link") as! NSString as String)
let request: NSURLRequest = NSURLRequest(URL: url!)
customWebView.loadRequest(request)
customWebView.delegate = self
customWebView.scalesPageToFit = true
cell.contentView.addSubview(customWebView)
cell.contentView.addSubview(boxView)
//cell.addSubview(customWebView)
//cell.addSubview(boxView)
textLabelCustom.text = posts.objectAtIndex(indexPath.row).valueForKey("title") as! NSString as String
textLabelCustom.numberOfLines = 4
detailTextLabelCustom.numberOfLines = 2
textLabelCustom.textColor = UIColor.blackColor()
detailTextLabelCustom.font = UIFont(name: "AmericanTypewriter", size: 15)
textLabelCustom.font = UIFont(name: "HelveticaNeue", size: 18)
//cell.addSubview(textLabelCustom)
cell.contentView.addSubview(textLabelCustom)
//cell.addSubview(detailTextLabelCustom)
cell.contentView.addSubview(detailTextLabelCustom)
cell.backgroundColor = UIColor(patternImage: UIImage(named: "home-page-background.png")!)
let backgroundView = UIView()
backgroundView.backgroundColor = UIColor(patternImage: UIImage(named: "tableselectedimage.png")!)
cell.selectedBackgroundView = backgroundView
return cell as UITableViewCell
}
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
print("You selected cell #\(indexPath.row)!")
let indexPath = tbData!.indexPathForSelectedRow;
let url: NSURL? = NSURL(string: posts.objectAtIndex(indexPath!.row).valueForKey("link") as! NSString as String)
print("Video url selected: \(url)!")
}
override func prepareForSegue(segue: (UIStoryboardSegue!), sender: AnyObject!) {
if (segue.identifier == "vimeoWebSegue") {
//get a reference to the destination view controller
let destinationVC: playingThatVideoViewController = segue.destinationViewController as! playingThatVideoViewController
let indexPath = tbData!.indexPathForSelectedRow;
let url: NSURL? = NSURL(string: posts.objectAtIndex(indexPath!.row).valueForKey("link") as! NSString as String)
let titlegoing = posts.objectAtIndex(indexPath!.row).valueForKey("title") as! NSString as String
//set properties on the destination view controller
destinationVC.videoWebView = customWebView
destinationVC.urlbrought = url!
destinationVC.titlebrought = titlegoing
}
}
}

Answer 1

You should create a custom UITableViewCell with desirable views (in your case 2 UILabels and UIWebView), load this cell from nib in cellForRowAtIndexPath and set needed values from arrays at indexPath.row appropriately. Don't create and add views in cellForRowAtIndexPath, just set values.

Answer 2

I'm using the dequeueReusableCellWithIdentifier() method as well which
I thought clears out cells all together once it goes off screen
It does not clear the cells.
It reuses cells that go off screen to display the cells that come on screen.
You should be removing the views before adding them again.
One way to accomplish this would be setting a tag for the view (view.tag = 10), and when dequeing a cell you cand do cell.contentView.viewWithTag(10)?.removeFromSuperview().

Answer 3

As the other answers suggest that you remove and re-add the views. Id rather suggest you add them once, and reuse the views. Subclass your cell and add the subviews once. Then use prepareForReuse to clear the text label.text = nil, for example.
For performance reasons, you should only reset attributes of the cell that are not related to content, for example, alpha, editing, and selection state.

Answer 4

There are Two Possible Reason of this bug.
Reason 1
in your cellForRowAtIndexPath method
you are creating two labels on the same position which is overlapping one on other.
//Here is your code
//Check the x-axis and y-axis of both textLabelCustom and detailTextLabelCustom are same.
//It means both label will place on same axis but with different heights.
let textLabelCustom = UILabel(frame: CGRectMake(20, 0, 200, 91))
let detailTextLabelCustom = UILabel(frame: CGRectMake(20, 0, 200, 20))
let customWebView:UIWebView = UIWebView(frame: CGRectMake(245, 5, 149, 80))
Change it like this. And increase you cell size as well.
let textLabelCustom = UILabel(frame: CGRectMake(20, 0, 200, 90))
let detailTextLabelCustom = UILabel(frame: CGRectMake(20, 90, 200, 20))
let customWebView:UIWebView = UIWebView(frame: CGRectMake(245, 5, 149, 80))
Reason 2
Implement another delegate method didEndDisplayingCell and write below line
cell.contentView.removeAllSubviews()

Answer 5

In cellForRowAtIndexPath, since the cells for reused (hence the method name 'reusableCell'), you'll have to remove all the cell's subviews before you add more subviews to the cell.
for subview in cell.contentView.subviews {
subview.contentView.removeFromSuperview()
}