Andrew Castro
Feb 7 · 4 min read

Desmistificando o Kingfisher

Introdução

Kingfisher é um framework bastante utilizado para download de imagens e armazenamento em cache.

A maioria dos projetos que vão ser desenvolvidos irão necessitar ter um framework bom para fazer o trabalho de download de imagens e armazenamento em cache, por isso este artigo irá mostrar diversas formas de usar o Kingfisher em um projeto, explorando os ótimos recursos que são oferecidos.

Usos comuns do Kingfisher

  • Download da imagem através da url:
self.imageView.kf.setImage(with: url)

No exemplo acima, o Kingfisher cria uma solicitação e baixa a url. Em caso de sucesso, ele converte os dados baixados em um objeto UIImage, armazena na memória e grava os dados no cache de disco, assim definindo o imageView.image para exibi-lo.

  • Mostrando um placeholder:
let image = UIImage(named: “defaultImage”)self.imageView.kf.setImage(with: url, placeholder: image)

O parâmetro placeholder define uma imagem para o componente UIImageView caso o framework não faça o download da url especificada.

  • Efeito Fading no download da imagem:
self.imageView.kf.setImage(with: url, options: [.transition(.fade(0.2))])
  • Rounded conner na imagem:
let processor = RoundCornerImageProcessor(cornerRadius: 30)self.imageView.kf.setImage(with: url, options: [.processor(processor)])
  • Mostrar um loading indicator enquanto o download é feito:
self.imageView.kf.indicatorType = .activityself.imageView.kf.setImage(with: url)

Um UIActivityIndicatorView é posicionado no centro da imagem.

Cache

O Kingfisher atualmente gerencia as imagens armazenadas em cache usando um ImageCache híbrido. Isso consiste em um armazenamento de memória e um armazenamento em disco. Se não for especificado, a instância ImageCache.default será usada no Kingfisher.

  • Usando cache key:
let resource = ImageResource(downloadURL: url, cacheKey: “cachekey”)self.imageView.kf.setImage(with: resource)
  • Verificando uma imagem no cache:
let cache = ImageCache.defaultlet cached = cache.isCached(forKey: “cacheKey”)
  • Onde está a imagem em cache (memória, em disco ou .none):
let cacheType = cache.imageCachedType(forKey: “cacheKey”)
  • Pegando uma imagem do cache:
cache.retrieveImage(forKey: “cacheKey”)

Definindo limites para o cache

  • Limita o tamanho do cache de memória para 500 MB.
cache.memoryStorage.config.totalCostLimit = 500 * 1024 * 1024
  • Limita o cache de memória para armazenar 50 imagens no máximo.
cache.memoryStorage.config.countLimit = 50

Por padrão, o totalCostLimit de cache de memória é 25% de sua memória total no dispositivo e não há limite na contagem de imagens.

Para armazenamento em disco, defina o sizeLimit para espaço no sistema de arquivos.

  • Limitar o tamanho do cache de disco para 500 MB.
cache.diskStorage.config.sizeLimit = 500 * 1024 * 1024

Removendo manualmente a imagem do cache

O Kingfisher gerencia o seu cache automaticamente. Mas você ainda pode remover manualmente uma determinada imagem do cache:

cache.default.removeImage(forKey: cacheKey)

Informar o tamanho do armazenamento em disco

ImageCache.default.calculateDiskStorageSize { result in
switch result {
case .success(let size):
print("Disk cache size: \(Double(size) / 1024 / 1024) MB")
case .failure(let error):
print(error)
}
}

Definir expiração padrão para o cache

O armazenamento de memória e o armazenamento em disco têm a configuração de expiração padrão. Imagens no armazenamento de memória expirarão após 5 minutos do último acesso, enquanto no armazenamento em disco, o prazo de é uma semana. Pode-se alterar este valor por:

  • Expira após 10 minutos.
cache.memoryStorage.config.expiration = .seconds (600)
  • Nunca expira.
cache.diskStorage.config.expiration = .never
  • Verifica a memória a cada 30 segundos
cache.memoryStorage.config.cleanInterval = 30

Serializer

Para especificar um determinado formato de uma imagem, será usado o FormatIndicatedCacheSerializer. Ele fornece serializadores para todos os formatos suportados: png, jpeg e gif.

Ao usar o DefaultCacheSerializer, o Kingfisher respeitará o formato de dados da imagem de entrada e tentará mantê-lo inalterado. No entanto, existem algumas exceções. Uma delas é quando há um RoundCornerImageProcessor. Se a sua imagem original é JPEG, configure o serializador png em vez disso:

let roundCorner = RoundCornerImageProcessor(cornerRadius: 20)imageView.kf.setImage(with: url, options: [.processor(roundCorner),.cacheSerializer(FormatIndicatedCacheSerializer.png)])

Indicator

  • Usando uma imagem como loading indicator.
let path = Bundle.main.path(forResource: "loader", ofType: "gif")!let data = try! Data(contentsOf: URL(fileURLWithPath: path))imageView.kf.indicatorType = .image(imageData: data)imageView.kf.setImage(with: url)

Usando uma view customizada

struct YourIndicator: Indicator {    let view: UIView = UIView()    func startAnimating() {        view.isHidden = false     }    func stopAnimating() {         view.isHidden = true     }    init() {        view.backgroundColor = .red    }}let i = YourIndicator()imageView.kf.indicatorType = .custom(indicator: i)

Para UIButton

UIButton.kf.setImage(with: url, for: .normal)UIButton.kf.setBackgroundImage(with: url, for: .normal)

Usando o DownsamplingImageProcessor para imagens de alta resolução

Pense no caso em que é necessário mostrar algumas imagens grandes em uma TableView ou em uma CollectionView. No cenário ideal, espera-se obter thumbnails para eles, assim reduzindo o tempo de download e o uso da memória. Mas, na maioria dos casos, o servidor não prepara uma thumbnail. É aí que o recém-adicionado DownsamplingImageProcessor é usado, ele reduz as imagens de alta resolução para um determinado tamanho antes de carregar na memória:

imageView.kf.setImage(with: resource, placeholder: placeholderImage, options: [ .processor(DownsamplingImageProcessor(size: imageView.size)), .scaleFactor(UIScreen.main.scale), .cacheOriginalImage])

Normalmente, DownsamplingImageProcessor é usado com .scaleFactor e .cacheOriginalImage, fornecendo uma escala de pixels de imagem razoável para sua interface do usuário e impede o download futuro fazendo o cache da imagem original de alta resolução.

Conclusão

O Kingfisher é um framework muito completo para se trabalhar, o artigo mostrou parte do poder que ele pode oferecer. Entre tantas opções disponíveis para usar, podem surgir duvidas e receio nas escolhas, mas optando por usar o Kingfisher, como foi mostrado, a performance do projeto no que envolve o uso do framework será excelente.


Meu nome é Andrew Castro, sou Desenvolvedor iOS e busco sempre aprender e compartilhar conhecimento com todos. Sou da filosofia que você deve fazer tudo por paixão e diversão.

Caso tenha alguma dúvida, é só comentar comentários ou entrar em contato por aqui. Abraço!


A Mobicare combina os Melhores Talentos, Tecnologias de Ponta, Práticas Agile e DevOps com Capacidades Operacionais avançadas para ajudar Operadoras Telecom e grandes empresas a gerarem novas receitas e a melhorarem a experiência dos seus próprios clientes.

Se você gosta de inovar, trabalhar com tecnologia de ponta e está sempre buscando conhecimento, somos um match perfeito!

Faça parte do nosso time. 😉

Andrew Castro

Written by

iOS Developer For Fun

mobicareofficial

Se você gosta de inovar, trabalhar com tecnologia de ponta e está sempre buscando conhecimento, somos um match perfeito! Vem trabalhar com a gente 😉 bit.ly/mobicarreiras

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade