Android Academy · Lekcja

Ładowanie obrazów za pomocą Coil

Wydajnie ładuj i buforuj obrazy z sieci za pomocą Coil. Stosuj transformacje (CircleCrop, RoundedCorners), obsługuj placeholdery i błędy.

Ładowanie obrazów za pomocą Coil to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 2 z 6. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 6 lekcji w sumie.

Dlaczego biblioteka obrazów?

Ładowanie obrazów z internetu jest zaskakująco złożone:

Pobieranie w wątku działającym w tle
Buforowanie na dysku i w pamięci
Wydajne dekodowanie (unikanie awarii OOM)
Wyświetlanie elementu zastępczego podczas ładowania
Obsługa błędów (uszkodzony link, brak sieci)

Coil obsługuje to wszystko w jednej linii kodu.

Czym jest Coil?

Coil (Coroutine Image Loader) to nowoczesna biblioteka Androida do ładowania obrazów, stworzona z myślą o Kotlinie i korutynach.

Lekka — mniejsza niż Glide lub Picasso
Skupiona na Kotlinie i obsługująca korutyny
Świadoma cyklu życia — automatycznie anuluje ładowanie
Obsługuje GIF, SVG i klatki wideo

Dodawanie Coil

Dodaj zależność w app/build.gradle:

// app/build.gradle
dependencies {
    implementation 'io.coil-kt:coil:2.6.0'
}

// Also make sure internet permission is in AndroidManifest.xml:
// <uses-permission android:name="android.permission.INTERNET" />

Podstawowe ładowanie obrazu

Załaduj obraz do ImageView w jednej linii:

import coil.load

// In your Activity or Adapter:
binding.ivAvatar.load("https://picsum.photos/200")

// With a placeholder and error image:
binding.ivAvatar.load("https://picsum.photos/200") {
    placeholder(R.drawable.ic_placeholder)
    error(R.drawable.ic_error)
    crossfade(true)  // smooth fade-in animation
}

Ładowanie w RecyclerView

Coil automatycznie anuluje oczekujące ładowanie, gdy ViewHolder zostanie poddany recyklingowi — zapobiega to wyświetlaniu niewłaściwych obrazów w niewłaściwych wierszach:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val post = getItem(position)

    holder.tvTitle.text = post.title

    holder.ivCover.load(post.imageUrl) {
        placeholder(R.drawable.ic_image_placeholder)
        error(R.drawable.ic_broken_image)
        crossfade(300)  // 300ms fade-in
        size(200, 200)  // resize to 200×200 pixels
    }
}

Transformacje

Zastosuj transformacje do załadowanych obrazów:

CircleCropTransformation() — okrągły obraz (idealny dla awatarów)
RoundedCornersTransformation(radius) — zaokrąglone rogi
BlurTransformation(context, radius) — efekt rozmycia

Przykład transformacji

Wyświetl okrągły awatar użytkownika:

import coil.load
import coil.transform.CircleCropTransformation
import coil.transform.RoundedCornersTransformation

// Circular avatar
binding.ivAvatar.load(user.profileImageUrl) {
    transformations(CircleCropTransformation())
    placeholder(R.drawable.ic_default_avatar)
    error(R.drawable.ic_default_avatar)
}

// Rounded corners on a card image
binding.ivCover.load(post.coverUrl) {
    transformations(RoundedCornersTransformation(16f))
    crossfade(true)
}

Działanie pamięci podręcznej

Coil automatycznie buforuje obrazy na dwóch poziomach:

Pamięć podręczna — najszybsza, czyszczona po zamknięciu aplikacji
Pamięć podręczna dysku — zachowywana między uruchomieniami aplikacji, domyślnie 250 MB

Jeśli ten sam adres URL zostanie załadowany dwukrotnie, drugie ładowanie odbędzie się z pamięci podręcznej — bez żądania sieciowego.

Ładowanie z różnych źródeł

Coil może ładować obrazy z różnych źródeł, nie tylko z adresów URL:

// From a URL (most common)
imageView.load("https://example.com/image.jpg")

// From a URI (e.g., gallery image)
imageView.load(uri)

// From a drawable resource
imageView.load(R.drawable.my_image)

// From a File
imageView.load(File("/sdcard/photo.jpg"))

// From a bitmap
imageView.load(bitmap)

Szybkie sprawdzenie

Której transformacji Coil należy użyć, aby wyświetlić zdjęcie profilowe użytkownika w kształcie koła?

Podsumowanie: ładowanie obrazów za pomocą Coil

Potrafi już Pan/Pani efektywnie wyświetlać obrazy z sieci:

Dodanie Coil za pomocą jednej zależności Gradle
imageView.load(url) { } — ładowanie w jednej linii
Obrazy zastępcze wyświetlane podczas ładowania i w razie błędu
Transformacje: CircleCrop, RoundedCorners, Blur
Automatyczne buforowanie w pamięci i na dysku
Obsługa adresów URL, URI, plików, zasobów drawable i bitmap

Następnie: nauczymy się poprawnie obsługiwać błędy i przekazywać użytkownikom czytelne informacje.

Często zadawane pytania

Czy lekcja „Ładowanie obrazów za pomocą Coil” jest bezpłatna?

Tak — pełny tekst „Ładowanie obrazów za pomocą Coil” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 6 lekcji w sumie.

Co nauczysz się w „Ładowanie obrazów za pomocą Coil”?

Wydajnie ładuj i buforuj obrazy z sieci za pomocą Coil. Stosuj transformacje (CircleCrop, RoundedCorners), obsługuj placeholdery i błędy. Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 6.

Ile czasu zajmuje lekcja „Ładowanie obrazów za pomocą Coil”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Android Academy