web-dev-qa-db-fra.com

Comment utiliser une vue (Shimmer) comme un espace réservé pour un imageView (Glide)

J'utilise Glide pour charger des images sur My ImageView (qui sont à l'intérieur d'une RecyclerView):

Glide.with(image.context).load(url)
        .error(context.getDrawable(R.drawable.placeholder))
        .into(image)

Je vois que la bibliothèque de Glide dispose également d'une fonction "espace réservé" qui permet de charger un digue à afficher lorsque l'image est toujours chargée.

D'autre part, pour l'ensemble de recyclerview, j'utilise la bibliothèque Facebook Shimmer Library pour montrer que le recyclageview est en cours de chargement.

Regardant mon application, tout fonctionne bien. Cependant, il y a toujours un temps d'intervalle entre lorsque la chaireuse est rejetée (les données sont récupérées) et l'image est affichée. C'est exactement quand un espace réservé est nécessaire. Je me demande, y a-t-il un moyen d'utiliser le Shimmer comme espace réservé pour l'image d'image aussi? La fonctionnalité de l'espace réservé à Glide ne prend que des supports introductifs et la mirouette est une vue.

Quoi qu'il en soit pour convertir la chatère à la digue? ou gif? Ou toute autre suggestion?

7
Mehdi Satei

Grâce au commentaire de Mike ci-dessus: Il y a une classe shimmerdrawable où vous pouvez construire une vue imprenable en tant que coussin pouvant être utilisé dans la glide:

private val shimmer = Shimmer.AlphaHighlightBuilder()// The attributes for a ShimmerDrawable is set by this builder
    .setDuration(1800) // how long the shimmering animation takes to do one full sweep
    .setBaseAlpha(0.7f) //the alpha of the underlying children
    .setHighlightAlpha(0.6f) // the shimmer alpha amount
    .setDirection(Shimmer.Direction.LEFT_TO_RIGHT)
    .setAutoStart(true)
    .build()

// This is the placeholder for the imageView
    val shimmerDrawable = ShimmerDrawable().apply {
        setShimmer(shimmer)
    }


Glide.with(image.context).load(url)
        .placeholder(shimmerDrawable)
        .error(context.getDrawable(R.drawable.placeholder))
        .into(image)
4
Mehdi Satei

J'ai développé une bibliothèque pour faciliter l'ajout d'effets de chargement de Shimmer/Squelette. https://github.com/agnaldonp/agskeletonloading

Il y a une explication sur le fichier README.MD sur la façon de l'utiliser. Vous n'avez pas besoin d'ajouter un tas de mises en page pour émuler le squelette, il est automatiquement calculé. La mise en page utilisée pour afficher le squelette est la même indique le contenu.

Si vous utilisez SkeletonImageView sur le fichier de mise en page, vous appellerez simplement la démarrage () et la chargement () pour contrôler l'animation. J'espère que je t'ai aidé