23.11.2024

Aula 116: Carregamento Assíncrono de Imagens em Swift

O carregamento assíncrono de imagens é uma técnica crucial para melhorar o desempenho e a responsividade de suas aplicações iOS. Em vez de carregar imagens na thread principal (o que pode bloquear a interface do usuário), você as carregará em segundo plano. Nesta aula, vamos explorar como implementar o carregamento assíncrono de imagens em Swift usando URLSession e combiná-lo com os frameworks SwiftUI e UIKit.

Por que Carregamento Assíncrono?

Quando as imagens são carregadas de forma síncrona, o download de grandes imagens pode fazer a interface do aplicativo travar, resultando em uma má experiência do usuário. O carregamento assíncrono ajuda a manter a interface responsiva enquanto as imagens estão sendo buscadas em segundo plano.

Exemplo Utilizando URLSession

Veja como carregar uma imagem de forma assíncrona a partir de uma URL usando URLSession.

Passo 1: Defina a Função de Carregamento de Imagem

Primeiro, vamos criar uma função que busca os dados de uma imagem a partir de uma URL.

import UIKit

func loadImage(from url: URL, completion: @escaping (UIImage?) -> Void) {
    // Cria uma tarefa de dados
    let task = URLSession.shared.dataTask(with: url) { data, response, error in
        // Verifica se houve erros e se os dados são válidos
        guard error == nil, let data = data, let image = UIImage(data: data) else {
            completion(nil)
            return
        }
        // Retorna a imagem na thread principal
        DispatchQueue.main.async {
            completion(image)
        }
    }
    // Inicia a tarefa
    task.resume()
}

Passo 2: Utilizar a Função de Carregamento de Imagem

Você pode usar essa função em seus controladores de visualização para carregar uma imagem quando um evento específico ocorrer (como a visualização aparecendo). Aqui está um exemplo:

import UIKit

class ImageViewController: UIViewController {
    var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupImageView()
        let url = URL(string: "https://example.com/image.jpg")!
        loadImage(from: url) { [weak self] image in
            self?.imageView.image = image
        }
    }

    private func setupImageView() {
        imageView = UIImageView(frame: self.view.bounds)
        imageView.contentMode = .scaleAspectFit
        view.addSubview(imageView)
    }
}

Exemplo Utilizando SwiftUI

Agora, vamos ver como implementar o carregamento assíncrono de imagens em uma visualização SwiftUI.

Passo 1: Criar um AsyncImageView

Vamos criar uma visualização SwiftUI que gerencia o carregamento assíncrono de imagens:

import SwiftUI

struct AsyncImageView: View {
    @State private var image: UIImage?

    let url: URL

    var body: some View {
        Group {
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
            } else {
                ProgressView()
            }
        }
        .onAppear {
            loadImage()
        }
    }

    private func loadImage() {
        let task = URLSession.shared.dataTask(with: url) { data, response, error in
            guard error == nil, let data = data, let loadedImage = UIImage(data: data) else { return }
            DispatchQueue.main.async {
                self.image = loadedImage
            }
        }
        task.resume()
    }
}

Passo 2: Utilizar AsyncImageView

Agora, você pode usar AsyncImageView em seu aplicativo SwiftUI:

struct ContentView: View {
    var body: some View {
        AsyncImageView(url: URL(string: "https://example.com/image.jpg")!)
            .frame(height: 300)
            .padding()
    }
}

Conclusão

Nesta aula, aprendemos como implementar o carregamento assíncrono de imagens em Swift usando tanto UIKit quanto SwiftUI. Essa abordagem garante que seu aplicativo permaneça responsivo enquanto busca imagens da rede. Sempre lembre-se de tratar erros de forma adequada e fornecer soluções alternativas (como imagens de espaço reservado) quando necessário. Boa programação!

Video

Navigation