search

panpf / sketch

Sketch is an image loading library designed for Compose Multiplatform and Android View. It is powerful and rich in functions. In addition to basic functions, it also supports GIF, SVG, video thumbnails, Exif Orientation, etc.
Apache License 2.0
2k stars 307 forks source link
android apk-icon base64-image compose compose-multiplatform exif gif heif image image-loader image-orientation jetpack-compose okhttp svg video-thumbnail webp

readme

logo_image Sketch Image Loader

Platform License version_icon QQ Group

Translations: 简体中文

Sketch is an image loading library specially designed for Compose Multiplatform and Android View. It has the following features:

Download

Published to mavenCentral

${LAST_VERSION}: Download (Not included 'v')

Compose Multiplatform:

// Provides the core functions of Sketch as well as singletons and extension 
// functions that rely on singleton implementations
implementation("io.github.panpf.sketch4:sketch-compose:${LAST_VERSION}")

[!IMPORTANT] To improve the performance of compose, please copy compose_compiler_config.conf under the sketch-core module file to your project and configure it according to the Compose Stability Configuration documentation

Android View:

// Provides the core functions of Sketch as well as singletons and extension 
// functions that rely on singleton implementations
implementation("io.github.panpf.sketch4:sketch-view:${LAST_VERSION}")

There are also some optional modules:

// Use Android or Skia's built-in decoder to decode gif, webp, heif and other animated images and play them
implementation("io.github.panpf.sketch4:sketch-animated:${LAST_VERSION}")

// [Android only] Use GifDrawable of the android-gif-drawable library to decode gif and play it
implementation("io.github.panpf.sketch4:sketch-animated-koralgif:${LAST_VERSION}")

// Support accessing compose resources through uri or placeholder, fallback, error, etc.
implementation("io.github.panpf.sketch4:sketch-compose-resources:${LAST_VERSION}")
implementation("io.github.panpf.sketch4:sketch-extensions-compose-resources:${LAST_VERSION}")

// Provides practical functions such as download progress, pausing loading during list scrolling, 
// saving cellular data, image type badge, loading apk icons and installed app icons, etc.
implementation("io.github.panpf.sketch4:sketch-extensions-compose:${LAST_VERSION}")
implementation("io.github.panpf.sketch4:sketch-extensions-view:${LAST_VERSION}")

// [JVM only] Supports using OkHttp to download images
implementation("io.github.panpf.sketch4:sketch-http-okhttp:${LAST_VERSION}")

// [JVM only] Supports using ktor to download images
implementation("io.github.panpf.sketch4:sketch-http-ktor:${LAST_VERSION}")

// Support SVG images
implementation("io.github.panpf.sketch4:sketch-svg:${LAST_VERSION}")

// [Android only] Use Android's built-in MediaMetadataRetriever class to decode video frames
implementation("io.github.panpf.sketch4:sketch-video:${LAST_VERSION}")

// [Android only] Decoding video frames using wseemann's FFmpegMediaMetadataRetriever library
implementation("io.github.panpf.sketch4:sketch-video-ffmpeg:${LAST_VERSION}")

[!TIP]

  • sketch-compose, sketch-view Modules all depend on the singleton provided by the sketch-singleton module. If you don’t need the singleton, you can directly rely on their *-core version.
  • On Android sketch-compose and sketch-view can be used together

R8 / Proguard

Sketch itself does not need to configure any obfuscation rules, but you may need to configure it for the indirectly dependent Kotlin Coroutines, OkHttp, Okio Add obfuscation configuration

Quickly Started

Compose Multiplatform:

// val imageUri = "/Users/my/Downloads/image.jpg"
// val imageUri = "compose.resource://files/sample.png"
val imageUri = "https://www.sample.com/image.jpg"

AsyncImage(
    uri = imageUri,
    contentDescription = "photo"
)

AsyncImage(
    uri = imageUri,
    state = rememberAsyncImageState(ComposableImageOptions {
        placeholder(Res.drawable.placeholder)
        error(Res.drawable.error)
        crossfade()
        // There is a lot more...
    }),
    contentDescription = "photo"
)

AsyncImage(
    rqeuest = ComposableImageRequest(imageUri) {
        placeholder(Res.drawable.placeholder)
        error(Res.drawable.error)
        crossfade()
        // There is a lot more...
    },
    contentDescription = "photo"
)

Image(
    painter = rememberAsyncImagePainter(
        request = ComposableImageRequest(imageUri) {
            placeholder(Res.drawable.placeholder)
            error(Res.drawable.error)
            crossfade()
            // There is a lot more...
        }
    ),
    contentDescription = "photo"
)

[!TIP] placeholder(Res.drawable.placeholder) needs to import the sketch-compose-resources module

Android View:

// val imageUri = "/sdcard/download/image.jpg"
// val imageUri = "asset://image.jpg"
// val imageUri = "content://media/external/images/media/88484"
val imageUri = "https://www.sample.com/image.jpg"

imageView.loadImage(imageUri)

imageView.loadImage(imageUri) {
    placeholder(R.drawable.placeholder)
    error(R.drawable.error)
    crossfade()
    // There is a lot more...
}

val request = ImageRequest(context, imageUri) {
    placeholder(R.drawable.placeholder)
    error(R.drawable.error)
    crossfade()
    target(imageView)
    // There is a lot more...
}
context.sketch.enqueue(request)

For more information about Uri, image types, platform differences, Sketch customization, ImageRequest, etc., please view the 《Getting Started》 document

Documents

Basic functions:

Featured functions:

Change log

Please review the CHANGELOG.md file

About version 4.0

Special thanks

Run source code

Prepare the environment:

  1. Android Studio: Koala+ (2024.1.1+)
  2. JDK: 17+
  3. Use kdoctor to check the running environment and follow the prompts to install the required software
  4. Android Studio installs the Kotlin Multiplatform and Compose Multiplatform IDE Supportplugins

Run the sample app:

  1. Clone the project and open it using Android Studio
  2. The running configurations of each platform have been added to the .run directory. After synchronization is completed, directly select the running configuration of the corresponding platform in the running configuration drop-down box at the top of Android Studio and click Run.
  3. The running configuration of the ios platform requires you to manually create it according to the template, as follows:
    1. Copy the .run/iosSample.run.template.xml file and remove the .template suffix. The .ignore file has been configured to ignore iosSample.run.xml
    2. Click Edit Configurations in the run configuration drop-down box at the top, select iosSample and then configure Execute target

My Projects

The following are my other open source projects. If you are interested, you can learn about them:

License

Apache 2.0. See the LICENSE file for details.