DEV Community

Cover image for Using the KingFisher library in iOS development.
Matheus Ferreira da Silva Nascimento
Matheus Ferreira da Silva Nascimento

Posted on

1

Using the KingFisher library in iOS development.

The Kingfisher library is a valuable tool for efficiently loading and displaying images in iOS applications. Since its emergence about 8 years ago, the iOS community has widely adopted it due to its simplicity, performance, and robust features. Kingfisher is an open-source library with over 200 contributors to date and more than 2,500 commits.

Advantages offered by the library:

Efficient Loading: One of Kingfisher’s main advantages is its asynchronous image loading, ensuring that the application remains responsive while images are downloaded. This is essential for providing a smooth user experience, especially in image-heavy apps.

Automatic Cache: Kingfisher automatically manages image caching, eliminating the need for manual intervention. This not only improves the efficiency of the application but also saves bandwidth and speeds up loading times for previously downloaded images.

Simple Integration: The library offers smooth integration with UIImageView, simplifying the process of loading and displaying images. With just a few lines of code, you can implement advanced functionality such as displaying placeholder images during download.

Visual Feature Support: Kingfisher supports placeholders, smooth transitions, and prevention of memory retention issues.

Implementing the Kingfisher Library in iOS Development: A Practical Example

Recently, I integrated the library into my Pokedex project, which is simple but can experience delays in loading images due to the number of Pokémon to be displayed. The use of Kingfisher fits perfectly in this scenario. Here’s a practical implementation example:

import SwiftUI
import Kingfisher
struct PokemonCell: View {

let pokemon: PokemonModel
@State private var image: UIImage?

var body: some View {
    let color = Color.pokemon(type: pokemon.pokemonType)
    ZStack {
        VStack {
            HStack {
                title
                Spacer()
                type
            }
            .padding(.top, 10)
            .padding(.horizontal, 10)

            if let url = URL(string: pokemon.imageUrl) {
                KFImage(url)
                    .placeholder {
                        ProgressView()
                    }
                    .resizable()
                    .scaledToFit()
                    .frame(width: 130, height: 150)
                    .padding(10)
            }
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(color)
    .cornerRadius(12)
    .shadow(color: color.opacity(0.7), radius: 6, x: 0.0, y: 0.0)
}

var title: some View {
    Text(pokemon.name.capitalized)
        .font(.headline).bold()
        .foregroundColor(.white)
}

var type: some View {
    Text(pokemon.pokemonType.rawValue)
        .font(.subheadline).bold()
        .foregroundColor(.white)
        .padding(.horizontal, 10)
        .padding(.vertical, 6)
        .overlay(
            RoundedRectangle(cornerRadius: 20)
                .fill(Color.white.opacity(0.25))
        )
}
Enter fullscreen mode Exit fullscreen mode

As you can see, the implementation is straightforward. Follow the steps in this example:

Import the Kingfisher library: Make sure to add import Kingfisher at the beginning of your Swift file to access the library's resources.

Define your SwiftUI Cell: In the example above, I created the PokemonCell structure to represent the Pokémon cell. The image URL comes from the PokemonModel model (remember that I used the MVVM architecture in this project).

Simple Loading and Caching: Use KFImage(url) to load the image from the URL provided by the template. The .placeholder block displays a progress indicator while loading. Kingfisher automatically takes care of caching, ensuring a fast and efficient user experience.

And with that, you already have everything you need!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more