CODEWITHSUNDEEP
iosobjective-cuitableviewswiftafnetworking
Wraithseeker
Wraithseeker

Reputation: 1904

UITableViewCell image not shown until selected

My UITableViewCells images are displaying until I scroll back upwards whereby the images would not be displayed until the cell is selected.

The same problem also happens when I switch from another ViewController to the initial ViewController*(which contains the image)*

I have checked that the imgURL of the image is correct.

Libraries used are: AFNetworking for the image

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("FeedCell", forIndexPath: indexPath) as! MyCell
    cell.itemImageView.image = nil
    self.configureCell(cell, atIndexPath: indexPath)
    return cell
}

// AFNetworking download and display image
func uploadIMG(cell:MyCell,imgURL:NSURL,placeholderIMG:String,atIndexPath indexPath: NSIndexPath) {

    var imageRequest: NSURLRequest = NSURLRequest(URL: imgURL)
    cell.itemImageView!.setImageWithURLRequest(imageRequest, placeholderImage: UIImage(contentsOfFile: "logo.png"), success: { [weak cell] request,response,image in

        if (cell != nil) {
            cell!.itemImageView.image = image
        }}        
        , failure: nil)
}

// called from cellForRowAtIndexPath, retrieve img url to update image
func configureCell(cell: MyCell, atIndexPath indexPath: NSIndexPath) {
    let item = self.items[indexPath.row] as MWFeedItem
    var URLofImage: NSURL = NSURL(string: item.link)!
    var session = NSURLSession.sharedSession()
    let task = session.dataTaskWithURL(URLofImage, completionHandler: {(data,response, error) in
        let text = NSString(data: data, encoding: NSUTF8StringEncoding)
        var home = HTMLDocument(data: data, contentTypeHeader: text as! String)
        var div = home.nodesMatchingSelector("img")
        var urlString = div[1].firstNodeMatchingSelector("img")
        let urlData = (urlString as HTMLElement).firstNodeMatchingSelector("img")
        var urlFinal = urlData.attributes["src"]! as! String

        if urlFinal != "/images/system/bookmark-shorturl.png" {
            // call updateIMG function
            self.uploadIMG(cell, imgURL: NSURL(string: "http:www.animenewsnetwork.com" + urlFinal)!, placeholderIMG: "logo.png",atIndexPath: indexPath)
        }
    })

Image representation of the problem (Initial image working fine)

Initial Image (Working fine)

Second Image (I scrolled downwards and then scrolled upwards, Image not showing)

enter image description here

I select some cells and the images for those cells will then appear

enter image description here

Upvotes: 0

Views: 2519

Answers (4)

Wraithseeker
Wraithseeker

Reputation: 1904

The problem was that my Image wasn't set on the main thread. To solve the problem, I simply used the following code below which ensured that my image will be set immediately.

dispatch_async(dispatch_get_main_queue(), {
 // do image functions here

)}

Upvotes: 2

Binladenit Tran
Binladenit Tran

Reputation: 119

When you scroll, cell will reload. (you reload to redownload your image) -> it's problem.

Solved: You create array for save image data after download.

And cell get image from this array, not redownload

Hope this helpful!

Upvotes: 0

Tobias
Tobias

Reputation: 4397

Misread the Question, but keeping this in case anyone has a similar problem, but with autolayout.

I believe you are using autolayout. So if the imageView's frame size is using the intrinsic content size, the size of it's image, it'll be CGSizeZero when there is no image. There is no image when the cell is first displayed, because it needs to be downloaded. So then the image is downloaded and gets assigned to imageView.image. This does not automatically invalidate the layout. You'll need to do that so the imageView frame gets recalculated based on the size of the image. The reason it shows up after scrolling away and scrolling back or selecting it is because the image has been downloaded in that time and the cells layout is recalculated when it gets displayed again or selected.

Below is my TestCell and TestViewController

import UIKit
import AFNetworking

class TestCell : UITableViewCell {
    static let cellIdentifier = "TestCell"

    @IBOutlet var downloadedImageView: UIImageView!
    @IBOutlet var rowLabel: UILabel!
    @IBOutlet var statusLabel: UILabel!

}


class TestTableViewController: UITableViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        tableView.rowHeight = 100
    }

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

    override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 30;
    }

    override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cell = tableView.dequeueReusableCellWithIdentifier(TestCell.cellIdentifier, forIndexPath: indexPath) as! TestCell

        let randomName = "\(Random.firstName().lowercaseString).\(Random.lastName().lowercaseString)"
        let randomImageURL = NSURL(string: Random.avatarImageURL(name: randomName))!

        cell.rowLabel.text = String(indexPath.row)
        cell.statusLabel.text = "Not Downloaded"

        var imageRequest: NSURLRequest = NSURLRequest(URL: randomImageURL)
        cell.downloadedImageView.setImageWithURLRequest(imageRequest, placeholderImage: UIImage(named: "placeholder.png"),
            success: { [weak cell]
                (request, response, image) in
                if let cell = cell {
                    cell.downloadedImageView.image = image
                    cell.rowLabel.text = String(indexPath.row)
                    cell.statusLabel.text = "Downloaded"
                }
            },
            failure: { [weak cell]
                (request, response, error) in
                if let cell = cell {
                    cell.downloadedImageView.image = nil
                    cell.rowLabel.text = String(indexPath.row)
                    cell.statusLabel.text = "Failed: \(error.localizedDescription)"
                }
            })

        return cell

    }



}

//
//  Random.swift

import Foundation


class Random {


    static let firstNames = ["Tora", "Shasta", "Camelia", "Gertrudis", "Charita", "Donita", "Debbra", "Shaquana", "Tommy", "Shara", "Ignacia", "Cassondra", "Melynda", "Lisette", "Herman", "Rhoda", "Farah", "Tim", "Tonette", "Johnathon", "Debroah", "Britni", "Charolette", "Kyoko", "Eura", "Nevada", "Lasandra", "Alpha", "Mirella", "Kristel", "Yolande", "Nelle", "Kiley", "Liberty", "Jettie", "Zoe", "Isobel", "Sheryl", "Emerita", "Hildegarde", "Launa", "Tanesha", "Pearlie", "Julianna", "Toi", "Terina", "Collin", "Shamika", "Suzette", "Tad"]

    static let lastNames = ["Austen", "Kenton", "Blomker", "Demars", "Bibbs", "Eoff", "Alcantara", "Swade", "Klinefelter", "Riese", "Smades", "Fryson", "Altobelli", "Deleeuw", "Beckner", "Valone", "Tarbox", "Shumate", "Tabone", "Kellam", "Dibiase", "Fasick", "Curington", "Holbrook", "Sulzer", "Bearden", "Siren", "Kennedy", "Dulak", "Segers", "Roark", "Mauck", "Horsman", "Montreuil", "Leyva", "Veltz", "Roldan", "Denlinger", "James", "Oriley", "Cistrunk", "Rhodes", "Mcginness", "Gallop", "Constantine", "Niece", "Sabine", "Vegter", "Sarnicola", "Towler"]


    class func int(#min: Int, max: Int) -> Int {
        return Int(arc4random_uniform(UInt32(max-min))) + min //???: RTFM on arc4random, might be need (max+1)-min.
    }

    class func int(#range: Range<Int>) -> Int {
        return int(min: range.startIndex, max: range.endIndex)
    }

    class func selectElement<T>(#array: [T]) -> T {
        return array[int(range: 0..<array.count)]
    }


    class func firstName() -> String {
        return Random.selectElement(array: Random.firstNames)
    }

    class func lastName() -> String {
        return Random.selectElement(array: Random.lastNames)
    }

    class func avatarImageURL(var name: String? = nil) -> String {

        if name == nil {
            name = "(Random.firstName().lowercaseString).Random.lastName().lowercaseString"
        }

        let avatarImageSize = Random.int(min: 40, max: 285)
        return "http://api.adorable.io/avatars/\(avatarImageSize)/\(name!)@gmail.png"
    }


    class func imageURL() -> String {

        let imageWidth = Random.int(min:120, max:1080)
        let imageHeight = Random.int(min:120, max:1080)

        return "http://lorempixel.com/g/\(imageWidth)/\(imageHeight)/"
    }

}

Upvotes: 0

Vasyl Khmil
Vasyl Khmil

Reputation: 2557

Try after setting image into cell, update that cell in table view by calling method tableView:reloadRowsAtIndexPaths:withRowAnimation. Or write your custom cell with custom image view. And please, do not forgot that image setting code must run in main thread.

Upvotes: 2

Related Questions