iOS Baixando imagem a partir de uma url

(Last Updated On: 25 de setembro de 2018)

Veremos nesse post como podemos baixar uma imagem a partir da url que o servidor nos retorna para exibi-la em um UIImage.

Estou desenvolvendo um aplicativo que lista filmes recentes. Para pegar as informações dos filmes, estou fazendo uma requisição para a API do The Movies DB.

Vamos começar discutindo sobre esse assunto, utilizando como base a API do The Movie DB para listar os filmes

Como você pode perceber, todo filme possui sua imagem de capa. Vamos analisar como o servidor nos devolve essa imagem:

Repare que após transformar o Json em um objeto, temos uma url. É através desta url que conseguimos acessar a imagem para exibi-la.

Mas a questão é, como podemos baixar essa imagem para exibi-la no app?

Existe uma biblioteca bastante famosa para Swift que nos ajuda a resolver esse problema. Ela se chama Alamofire Image.

Entre várias funcionalidades, o Alamofire Image nos ajuda a fazer o download da imagem de forma assíncrona.

Então vamos lá, o primeiro passo é instalar essa biblioteca no nosso projeto. Com o gerenciador de dependências cocoapods instalado, vamos adicionar o pod do Alamofire Image:

Agora, com o terminal aberto na pasta do projeto, temos que realmente instalar a biblioteca. Para isso, vamos rodar o comando pod install:

Bem para utilizar essa biblioteca temos que importá-la no nosso arquivo:


import AlamofireImage

Mas, como vamos mostrar essa imagem na tela? Para isso, podemos utilizar um UIImage para exibi-la. Essa classe fica dentro da biblioteca UIKit. Portanto, vamos importá-la também:


import AlamofireImage
import UIKit

Com a biblioteca importada, agora temos acesso ao método af_setImage(withURL: ) onde passamos por parâmetro a url da imagem:


import UIKit
import AlamofireImage
 
class MovieCollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var imagemDoFilme: UIImageView!
    
    func setup(_ movie:Movie) {
        guard let imageUrl = URL(string: movie.imagePath) else { return }
        imagemDoFilme.af_setImage(withURL: imageUrl)
    }
}

Vamos rodar o app para testar:

Ótimo, dessa forma conseguimos setar todas as imagens dos filmes.

Uma imagem vale mais do que mil palavras

No nosso catálogo de filmes é legal mostrar sua capa. Geralmente, quando batemos em uma API, nós recebemos uma URL com o endereço da imagem. Então como podemos exibir essa imagem?

Vimos que podemos utilizar a biblioteca AlamofireImage para baixar a imagem. Mas só baixar a imagem não garante que conseguimos mostrá-la na tela. Para isso, precisamos utilizar a classe UIImage.

Aqui na Alura, temos uma carreira para o desenvolvimento de aplicativos para o IOS, nela você aprenderá a construir aplicativos para iPhones com a linguagem Swift, aprenderá técnicas de construção de layouts e sincronia com serviços web.

FIQUE POR DENTRO

Próximo ArtigoConvertendo String para número em JavaScript