How to load an Image into a UITableView?

1

I made a request that returned some texts and some urls with images, these images I need to load them along with the text in parallel in the table.

I am using Alamofire + AlamofireImage to load the texts / Images, my doubt and the following, I must carry out the process of insertion of these elements in the cell of the table by method cellForRowAtIndexPath ? why this event is triggered when it is started and when I scroll through the table, with this the images end up doubling.

Example:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("cell")! as UITableViewCell
    print("Evento acontece")
    if self.verifyUrl(self.texto[indexPath.row]){

        Alamofire.request(.GET, self.texto[indexPath.row])
            .responseImage { response in

                if let image = response.result.value {
                    let size = CGSize(width: 300.00, height: 130.0)
                    let aspectScaledToFillImage = image.af_imageScaledToSize(size)
                    cell.imageView?.image = aspectScaledToFillImage
                }
        }

    }else{

        cell.textLabel?.text = self.texto[indexPath.row]
    }

    return cell
}

Note that in addition to being misaligned, a text is located to the right of it, below it, and loaded with the same images.

    
asked by anonymous 01.02.2016 / 22:46

1 answer

1

Let's go by stage:

  

I must perform the process of inserting these elements into the cell of the   table by method cellForRowAtIndexPath ?

Most places where we find codes about UITableView use the tableView: cellForRowAtIndexPath: to populate the table data when in fact this method should return a reusable cell as fast as possible .

But where should I fill in my cell data? Answer: In method tableView: willDisplayCell: forRowAtIndexPath: as the documentation says this method is called before the cell (which was already created in cellForRowAtIndexPath ) is drawn and displayed on the screen. / p>


  

I'm using Alamofire + AlamofireImage to load the   texts / Images

To load the content of the texts I advise you to use the initial methods of your ViewController using a Array to save the contents returned inside the closure of Alamofire.request to fill your array and give a tableView.reloadData() so the data would be ready when formatting the cell.

As for images: using AlamofireImage you load images asynchronously using the af_setImageWithURL(url)

In the end it would be more or less the way it would look:

if self.verifyUrl(self.texto[indexPath.row]){
   cell.imageView?.af_setImageWithURL(NSURL(string: self.texto[indexPath.row])!)
   // outras configurações da imagem....
}else{
   cell.textLabel?.text = self.texto[indexPath.row]
}


  

Notice that in addition to being misaligned, there is a text to the right of it, besides   below and loaded the same images.

That's very likely ( let's say 99.99% ) is your cell's configuration on the storyboard specifically its constraints . Try to take a look at this other question here in the .stackoverflow as it may help you. in that part.

    
02.02.2016 / 15:16