Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qdsfdhvh/compose-imageloader
Compose Image library for Kotlin Multiplatform.
https://github.com/qdsfdhvh/compose-imageloader
image kotlin kotlin-multiplatform
Last synced: 3 months ago
JSON representation
Compose Image library for Kotlin Multiplatform.
- Host: GitHub
- URL: https://github.com/qdsfdhvh/compose-imageloader
- Owner: qdsfdhvh
- License: mit
- Created: 2022-06-13T12:49:29.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-03-18T05:36:36.000Z (3 months ago)
- Last Synced: 2024-03-18T06:39:30.302Z (3 months ago)
- Topics: image, kotlin, kotlin-multiplatform
- Language: Kotlin
- Homepage: https://qdsfdhvh.github.io/compose-imageloader/
- Size: 5.27 MB
- Stars: 353
- Watchers: 5
- Forks: 14
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- kmp-awesome - Compose-Imageloader
- awesome-kotlin-multiplatform - compose-imageloader
README
# Compose ImageLoader
[](https://maven-badges.herokuapp.com/maven-central/io.github.qdsfdhvh/image-loader)
Compose Image library for Kotlin Multiplatform.
## Setup
Add the dependency in your common module's commonMain sourceSet
```diff title="build.gradle.kts"
kotlin {
android()
ios()
// ...
sourceSets {
val commonMain by getting {
dependencies {
+ api("io.github.qdsfdhvh:image-loader:1.7.8")
// optional - Moko Resources Decoder
+ api("io.github.qdsfdhvh:image-loader-extension-moko-resources:1.7.8")
// optional - Blur Interceptor (only support bitmap)
+ api("io.github.qdsfdhvh:image-loader-extension-blur:1.7.8")
}
}
val jvmMain by getting {
dependencies {
// optional - ImageIO Decoder
+ api("io.github.qdsfdhvh:image-loader-extension-imageio:1.7.8")
}
}
}
}
```
## How to Use
### Display Image
```kotlin
val painter = rememberImagePainter("https://..")
Image(
painter = painter,
contentDescription = "image",
)
```
PS: default `Imageloader` will reload when it's displayed, is not friendly for `https` link, so it is recommended to custom `ImageLoader` and configure the cache.
### Custom ImageLoader
I configure the `Imageloader {}` on each platform, you also can configure it in the `commonMain` like [Tachidesk-JUI](https://github.com/Suwayomi/Tachidesk-JUI/blob/master/presentation/src/commonMain/kotlin/ca/gosyer/jui/ui/base/image/ImageLoaderProvider.kt).
```kotlin
@Composable
fun Content() {
CompositionLocalProvider(
LocalImageLoader provides remember { generateImageLoader() },
) {
// Option 1 on 1.7.0+
AutoSizeImage(
"https://...",
contentDescription = "image",
)
// Option 2 on 1.7.0+
AutoSizeBox("https://...") { action ->
when (action) {
is ImageAction.Success -> {
Image(
rememberImageSuccessPainter(action),
contentDescription = "image",
)
}
is ImageAction.Loading -> {}
is ImageAction.Failure -> {}
}
}
// Option 3
Image(
painter = rememberImagePainter("https://.."),
contentDescription = "image",
)
}
}
```
Use priority: `AutoSizeImage` -> `AutoSizeBox` -> `rememberImagePainter`.
`AutoSizeBox` & `AutoSizeImage` are based on **Modifier.Node**, `AutoSizeImage` ≈ `AutoSizeBox` + `Painter`.
#### in Android
```kotlin
fun generateImageLoader(): ImageLoader {
return ImageLoader {
options {
androidContext(applicationContext)
}
components {
setupDefaultComponents()
}
interceptor {
// cache 25% memory bitmap
bitmapMemoryCacheConfig {
maxSizePercent(context, 0.25)
}
// cache 50 image
imageMemoryCacheConfig {
maxSize(50)
}
// cache 50 painter
painterMemoryCacheConfig {
maxSize(50)
}
diskCacheConfig {
directory(context.cacheDir.resolve("image_cache").toOkioPath())
maxSizeBytes(512L * 1024 * 1024) // 512MB
}
}
}
}
```
#### in Jvm
```kotlin
fun generateImageLoader(): ImageLoader {
return ImageLoader {
components {
setupDefaultComponents()
}
interceptor {
// cache 32MB bitmap
bitmapMemoryCacheConfig {
maxSize(32 * 1024 * 1024) // 32MB
}
// cache 50 image
imageMemoryCacheConfig {
maxSize(50)
}
// cache 50 painter
painterMemoryCacheConfig {
maxSize(50)
}
diskCacheConfig {
directory(getCacheDir().toOkioPath().resolve("image_cache"))
maxSizeBytes(512L * 1024 * 1024) // 512MB
}
}
}
}
// about currentOperatingSystem, see app
private fun getCacheDir() = when (currentOperatingSystem) {
OperatingSystem.Windows -> File(System.getenv("AppData"), "$ApplicationName/cache")
OperatingSystem.Linux -> File(System.getProperty("user.home"), ".cache/$ApplicationName")
OperatingSystem.MacOS -> File(System.getProperty("user.home"), "Library/Caches/$ApplicationName")
else -> throw IllegalStateException("Unsupported operating system")
}
```
#### in iOS
```kotlin
fun generateImageLoader(): ImageLoader {
return ImageLoader {
components {
setupDefaultComponents()
}
interceptor {
// cache 32MB bitmap
bitmapMemoryCacheConfig {
maxSize(32 * 1024 * 1024) // 32MB
}
// cache 50 image
imageMemoryCacheConfig {
maxSize(50)
}
// cache 50 painter
painterMemoryCacheConfig {
maxSize(50)
}
diskCacheConfig {
directory(getCacheDir().toPath().resolve("image_cache"))
maxSizeBytes(512L * 1024 * 1024) // 512MB
}
}
}
}
private fun getCacheDir(): String {
return NSSearchPathForDirectoriesInDomains(
NSCachesDirectory,
NSUserDomainMask,
true,
).first() as String
}
```
for more platform targets, see [app](app/).
#### ImageRequest
```kotlin
val imageRequest = ImageRequest {
data(url)
addInterceptor(DoSomthingInterceptor())
components {
// ...
}
extra {
set("key_int", 11)
}
}
val newImageRequest = ImageRequest(imageRequest) {
// ...
}
```
### Before 1.2.8
`LocalImageLoader` has no default value, you must be configured on each platform, and configuration is similar to `coil`.
```kotlin
@Composable
fun Content() {
CompositionLocalProvider(
LocalImageLoader provides remember { generateImageLoader() },
) {
val painter = rememberAsyncImagePainter("https://.....")
Image(
painter = painter,
contentDescription = "image",
)
}
}
fun generateImageLoader(): ImageLoader {
return ImageLoaderBuilder().build()
}
```
## Thx
[Coil](https://github.com/coil-kt/coil)