Home / Questions / 14831
Accepted
user9099
Asked: 2020-06-24 02:54:27 +0800 CST 2020-06-24 02:54:27 +0800 CST

Display Images table view controller with AlamofireImage Swift 2 Library

  • 772

I am making an app that works as a feed reader.

I have a UITableViewController, in which I show all the news that I read from an xml, I show the title, the date, a brief description and an image. Except the image, everything I show is correct.

I have added the library AlamofireImageto display the images. At first they don't appear, but if I reload the view with a reloadData(), the images appear.

Most of the images are seen in their correct position, but others are out of position and in some, only image is displayed. The title, date and description do not appear.

If I put a fixed width and height on the images, it appears perfectly, but if I only position them by constraints, it is when the error appears, that they take time to load

Here is the code I use:

if let actualImageView = imageView {
// actualImageView.load(currentArticleToDisplay.imagen)
/*let url:NSURL? = NSURL(string:currentArticleToDisplay.imagen)
    let imageRequest = NSURLRequest(URL: url!)
    NSURLConnection.sendAsynchronousRequest(imageRequest, queue: NSOperationQueue.mainQueue(), completionHandler: {(response, data, error) in
    actualImageView.image = UIImage(data: data!)
    //actualImageView.contentMode = UIViewContentMode.ScaleAspectFit
  })*/
  actualImageView.contentMode = .ScaleAspectFit

  let URL = NSURL(string: currentArticleToDisplay.imagen)!

  actualImageView.af_setImageWithURL(
     URL,
     placeholderImage: nil,
     filter: nil
  )
  //actualImageView.frame = view.bounds
  //actualImageView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]

  //actualImageView.contentMode = UIViewContentMode.ScaleAspectFit
}

I have the constraints defined in the Main.storyboard, because if I put them in code, they didn't load me at first either.

Any idea what could be the problem? Do I need to add more parts of the code? Is this the correct way to display images? Is there a library that can fix it?

Thank you!

ios

2 Answers

  1. Best Answer

    Using AlamofireImageis correct, only that you are not taking into account that the requests are made asynchronously ; that's why the images 'don't show up' the first time , since they haven't finished loading yet when you invoke:

    if let actualImageView = imageView {
    // ...
}

    Which obviously returns niland is not done until you run again reloadData(), which on the other hand, you don't even need to manually update the table with reloadData()since it AlamofireImageupdates UIImageViewwhen it has finished downloading.

    I am not sure where you are assigning the image so I will assume that you do it in the delegate method cellForRowAtIndexPath, so I share the following sample code that does what you want with Dummy content :

    import UIKit
import AlamofireImage

class DummyCell: UITableViewCell {
    @IBOutlet weak var myAwesomeImage: UIImageView!
    @IBOutlet weak var myAwesomeLabel: UILabel!
}

class MyAwesomeTableViewController: UITableViewController {

    let numberOfCells: Int = 100

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }

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

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

        let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! DummyCell
        cell.myAwesomeLabel.text = "My awesome label \(indexPath.row)"

        let imageURL = NSURL(string: "http://placehold.it/100?text=Image%20\(indexPath.row)")!

        cell.myAwesomeImage.contentMode = .ScaleAspectFit
        cell.myAwesomeImage.af_setImageWithURL(imageURL, placeholderImage:nil)

        return cell
    }

    override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
        return 100
    }
}

    When the images finish downloading, they will be displayed in the assigned place. You could also substitute:

    cell.myAwesomeImage.af_setImageWithURL(imageURL, placeholderImage:nil)

    by

    let placeHolder = UIImage(named: "placeHolder.png")
cell.myAwesomeImage.af_setImageWithURL(imageURL, placeholderImage:placeHolder)

    Where "placeHolder.png"is an image that you would have in your project and that will be displayed while the real images finish downloading.

    • 4

  2. It is important to know that UItableViewcells reuse them and therefore it is important that the instance of UIImageViewshould not be the same. The correct way is that you implement the delegate method like so:

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

    // [...] <- Código previo de la celda

    // Image
    let URL = NSURL(string: currentArticleToDisplay.imagen)!

    cell.actualImageView.af_setImageWithURL(
        URL,
        placeholderImage: nil,
        filter: nil
    )

    return cell

}
    • 0