prefacio

Hay muchos marcos de carga de imágenes excelentes en la plataforma Android, como Glide, Picasso, Fresco

Y el marco de carga de imágenes en Compose-jetpack tiene Coil

Sin embargo, no hay un marco de carga de imágenes en Compose-jb por el momento.Sucede que uso Compose-jb para escribir algunas herramientas pequeñas, y hay una demanda para la carga de imágenes, así que escribí una biblioteca de carga de imágenes con funciones simples basado en la biblioteca de carga de imágenes de la plataforma Android.

El proyecto es de código abierto, dirección: load-the-image (github.com) Bienvenido a star

Ejemplo:

Función

1. Soporte simple para la carga de imágenes en múltiples plataformas de escritorio (algunos formatos se cargan de forma asíncrona)

2. Admite múltiples formatos: enlaces de red, archivos locales, rutas de recursos, InputStream, mapa de bits, imagen, ByteArray, etc., y admite formatos compatibles personalizados

3. Admite caché doble: caché de memoria y caché local, caché de memoria admite configuración de memoria máxima, caché local admite configuración de ruta de caché o configuración de caché personalizada

texto

Cómo utilizar

En primer lugar, cuando usamos Compose para mostrar imágenes, generalmente usamos la función Imagen. El primer parámetro de entrada de una de las funciones es de tipo Painter, y nuestra API devuelve un objeto de tipo Painter, por lo que el método de uso es muy simple. como se muestra en el siguiente código:

//url="https://img.zcool.cn/community/017e625e57415ea801216518c25819.jpg@1280w_1l_2o_100sh.jpg"
Image(rememberImagePainter(url), "")

Sí, es muy fácil de usar, por supuesto, debe consultar las dependencias remotas para usar el proyecto.

Configuracion basica

De forma predeterminada, Compose-jb está configurado con gradle+kts emmm

1. Agregue a build.gradle.kts en su directorio raíz:

buildscript {
    repositories {
        maven("https://jitpack.io")//this
        ...
    }
}

allprojects {
    repositories {
        maven("https://jitpack.io")//this
        ...
    }
}

2. Agregue a build.gradle.kts en el directorio de código (generalmente escritorio) de su proyecto Compose-jb:

kotlin {
    sourceSets {
        val jvmMain by getting {
            dependencies {
                ...
                implementation("com.github.ltttttttttttt:load-the-image:1.0.2")//this
            }
        }
    }
}

pd: La referencia de la última versión: Github o JitPack

3. Recomendación: configuración unificada de la ruta del mapa de fallas que se muestra cuando falla la carga:

fun main() {
    LoadTheImageManager.defaultErrorImagePath = "drawable-xxhdpi/load_error.jpeg"//this
    application {
        Window(onCloseRequest = ::exitApplication) {
            MaterialTheme {
                Image(rememberImagePainter("https://img.zcool.cn/community/017e625e57415ea801216518c25819.jpg@1280w_1l_2o_100sh.jpg"),"")
            }
        }
    }
}

pd: la ubicación del recurso es más o menos así, por supuesto, puede personalizar la ubicación del recurso (puede verificar el código en github):

4. Recomendación: actualice la versión de compose-jb (desktop) a 1.1.1 o superior

De acuerdo con los comentarios, se encontró que compose-jb versión 1.1.0 tiene un error y no se iniciará

configuración personalizada

1. Configure la imagen de marcador de posición cuando se carga la imagen y la imagen que no se pudo cargar

En primer lugar, la imagen que no se pudo cargar en la configuración unificada se ha escrito en el tercer punto anterior

Configurado por separado, hay un parámetro placeholderResource en el método RememberImagePainter en formato String para indicar la imagen del marcador de posición:

Utilizar de la siguiente manera:

rememberImagePainter(url,占位图)

Si desea configurar el mapa de marcadores de posición y el mapa de errores de carga y otros parámetros por separado, puede usar los parámetros del tipo DataToBeLoaded, como se muestra a continuación:


    rememberImagePainter(DataToBeLoaded(url).apply {
        placeholderResource = 占位图
        errorImagePath = 加载失败图
    })

2. Modifique el tamaño de la memoria caché:

LoadTheImageManager.memoryCache = ImageLruMemoryCache(99999/*最大的字节大小*/)

El tamaño predeterminado de la memoria caché es: maxOf(50M, 1% de la memoria total)

La estrategia de caché de memoria predeterminada usa LRU. Si desea cambiarlo a otra estrategia, puede personalizar una clase, luego implementar la interfaz ImageCache, implementar el método correspondiente y luego modificarlo:

LoadTheImageManager.memoryCache = 你的实现类

3. Modifique la ubicación del caché de archivos:

LoadTheImageManager.fileCache = ImageFileCache(File("C://test_dir"))

La ubicación predeterminada de la caché de archivos es: Esta computadora->Imagen->Cargar la caché de imágenes

El caché predeterminado usa md5 como nombre de archivo. Si desea personalizar la política o el método de caché de archivos, puede personalizar una clase, luego implementar la interfaz ImageCache, implementar el método correspondiente y luego modificarlo:

LoadTheImageManager.fileCache = 你的实现类

4. Modifique el motor de red utilizado para la carga de imágenes de red:

El motor de red predeterminado usa HttpURLConnection que viene con jvm. Si desea cambiarlo a otra red, puede personalizar una clase, luego implementar la interfaz HttpLoader, implementar el método correspondiente y luego modificarlo:

LoadTheImageManager.httpLoader = 你的实现类

5. La función de carga de imágenes de RememberImagePainter admite múltiples formatos de entrada y se puede personalizar

Además de estos formatos definidos, también puede personalizar su propio soporte y análisis de formatos:

Primero, personalice una clase para implementar la interfaz LoadTheImage, juzgue si admite estos datos en la función canLoad y luego cárguela. Por ejemplo, lo siguiente admite la carga de matrices de bytes:

Luego configurarlo:

LoadTheImageManager.loadTheImage.add(ByteArrayLoadTheImage())//当然目前此库已经支持字节数组了,不需要手动添加ByteArrayLoadTheImage

Finalmente se puede usar así:

rememberImagePainter(DataToBeLoaded(byteArrayOf()))//最好还是自己封装一下函数

Configuración multiplataforma

Generalmente, al usar Compose-jb, se puede desarrollar un proyecto multiplataforma (KMM) en conjunto, como la plataforma Android y la plataforma Web, y también podemos adaptarlo para hacer un código de carga de imágenes multiplataforma.

El lado del escritorio usa esta biblioteca para cargar la imagen, y el lado de Android usa Coil

configuración

Primero, sobre la base de la configuración básica, primero agregue build.gradle.kts en su carpeta común:

val desktopMain by getting{
	dependencies {
        ...
		implementation 'com.github.ltttttttttttt:load-the-image:1.0.2'
	}
}

Agregue una función multiplataforma a commonMain:

@Composable
expect fun rememberImagePainter(url: String): Painter

Implemente esta función en androidMain (y otras plataformas (si las hay)), usando Coil:

@Composable
actual fun rememberImagePainter(url: String): Painter =
    coil.compose.rememberImagePainter(data = url)

Implemente esta función en desktopMain:

@Composable
actual fun rememberImagePainter(url: String): Painter =
    com.lt.load_the_image.rememberImagePainter(url)

Luego, la función definida se puede usar en la plataforma de escritorio o en la plataforma de código compartido

Si la configuración no tiene éxito, también puede ver directamente cómo configurarlo en mi github