iOS Baixando imagem a partir de uma url

iOS Baixando imagem a partir de uma url
andriu-felipe
andriu-felipe

Compartilhe

Veremos nesse artigo 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

Banner promocional da Alura, com chamada para um evento ao vivo no dia 12 de fevereiro às 18h30, com os dizeres

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 formação IOS, nela você aprenderá a construir aplicativos para iPhones com a linguagem Swift, técnicas de construção de layouts e sincronia com serviços web.

Veja outros artigos sobre Mobile