swift indexPath.row==0 works weirdly for UITableViewCell

Question

I am trying to make a table wherein first cell has a differernt layout than the rest. I want to put the image as background for first cell ie it shd look something like this:

and here is the code for my implementation

 func imageCellAtIndexPath(indexPath:NSIndexPath) -> MainTableViewCell {
    let cell = self.tableView.dequeueReusableCellWithIdentifier(imageCellIdentifier) as MainTableViewCell
    let object = self.fetchedResultsController.objectAtIndexPath(indexPath) as NSManagedObject

    let eTitle:NSString = object.valueForKey("title")!.description
    let deTitle  = eTitle.stringByDecodingHTMLEntities()
cell.artTitle.text = deTitle


    var full_url = object.valueForKey("thumbnailURL")!.description
    var url = NSURL(string: full_url)
    var image: UIImage?
    var request: NSURLRequest = NSURLRequest(URL: url!)
    NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue(), completionHandler: {(response: NSURLResponse!, data: NSData!, error: NSError!) -> Void in

        image = UIImage(data: data)
        if((indexPath.row)==0)  {
        var imageView = UIImageView(frame: CGRectMake(10, 10, cell.frame.width - 10, cell.frame.height - 10))
        imageView.image = image
       cell.backgroundView = UIView()
      cell.backgroundView?.addSubview(imageView)

        }
        else{
        cell.thumb.image = image
        }
    })

    return cell
}

bt the problem is.. when i scroll down and scroll up back again, the background image starts repeating and the thumbnails also get overlapped as shown:

If i scroll up and down again.. this is wht happens:

i might have done some silly mistake bt m not able to figure out what it is. pls help

Answer 1

The problem is that the cell is being reused by the tableView for efficiency purposes but it is never being reset.

You need to clear / remove the imageView from the background view if the cell is not at indexPath 0.

Answer 2

In table views cells are reused and you should reset parts of the cell that are not relevant the specific version of the cell style you are after. Something like:

 if((indexPath.row)==0)  {
      let frame = CGRectMake(10, 10, 
                             cell.frame.width - 10, cell.frame.height - 10)
      var imageView = UIImageView(frame: frame)
      imageView.image = image
      cell.backgroundView = UIView()
      cell.backgroundView?.addSubview(imageView)

      // Reset 
      cell.thumb.image = nil
 } else{
      cell.thumb.image = image
      // Reset 
      cell.backgroundView = nil
 }

Even better and more idiomatic idea is to use separate UITableViewCell designs for these two cell types, each with different reuse identifiers. This way you don't need to care about resetting.

PS You should use dequeueReusableCellWithIdentifier:forIndexPath: instead of older dequeueReusableCellWithIdentifier: as it guarantees that a cell is returned.

Answer 3

Maybe you can use tableHeaderView for this? Or, if you want a lot sections like this, you probably can use

func headerViewForSection(_ section: Int) -> UITableViewHeaderFooterView?