sketch_image_view.md

SketchImageView

Translations: 简体中文

Sketch provides a SketchImageView component, which can be used with Sketch to load images more conveniently. It supports xml attributes to configure request attributes, supports flow methods to monitor the status and results of requests, and also supports functions such as displaying download progress and image type icons.

Install component

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

implementation("io.github.panpf.sketch4:sketch-extensions-view:${LAST_VERSION}")

XML attributes

SketchImageView provides a wealth of xml attributes to configure request attributes in the layout, as follows:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.github.panpf.sketch.SketchImageView android:id="@+id/imageView"
        android:layout_width="300dp" android:layout_height="300dp"
        android:contentDescription="@string/app_name"
        app:sketch_placeholder="@drawable/im_placeholder" app:sketch_error="@drawable/im_error"
        app:sketch_fallback="@drawable/im_fallback" app:sketch_crossfade="true"
        app:sketch_transformation="rotate" app:sketch_transformation_rotate_degrees="55" />
</FrameLayout>

For more supported attributes, please refer to the attrs file.

RequestState

SketchImageView provides a flow method to monitor the status and results of requests, as follows:

val sketchImageView = SketchImageView(context)

// collect state
scope.launch {
    sketchImageView.requestState.loadState.collect {
        when (it) {
            is LoadState.Started -> {
                val request: ImageRequest = it.request
            }
            is LoadState.Success -> {
                val request: ImageRequest = it.request
                val result: ImageResult.Success = it.result
            }
            is LoadState.Error -> {
                val request: ImageRequest = it.request
                val result: ImageResult.Error = it.result
            }
            is LoadState.Canceled -> {
                val request: ImageRequest = it.request
            }
            else -> {
                // null
            }
        }
    }
}

// collect result
scope.launch {
    sketchImageView.requestState.resultState.collect {
        when (it) {
            is ImageResult.Success -> {
            }
            is ImageResult.Error -> {
            }
            else -> {
                // null
            }
        }
    }
}

// collect progress
scope.launch {
    sketchImageView.requestState.progressState.collect {
        if (it != null) {
            val totalLength: Long = it.totalLength
            val completedLength: Long = it.completedLength
        } else {
            // null
        }
    }
}

Other Functions

Thanks to the implementation of the ViewAbilityContainer interface, SketchImageView also supports the following functions:

• Show download progress
• Show image type badge