zjupure / GlideWebpDecoder

A Glide WebpDecoder Intergration Library for decoding and displaying webp images
Apache License 2.0
757 stars 89 forks source link

How to use in SpannableString with ImageSpan ? #92

Closed hushijian0 closed 2 years ago

hushijian0 commented 2 years ago

If you have a WebpImgSpan , it's perfect Expecting

Thanks

zjupure commented 2 years ago

public ImageSpan(@NonNull Drawable drawable)

You can pass the decoded WebpDrawable to build an ImageSpan and work with SpannableString

hushijian0 commented 2 years ago

public ImageSpan(@NonNull Drawable drawable)

You can pass the decoded WebpDrawable to build an ImageSpan and work with SpannableString

It's must target TextView. But I want build many SpannableString on background thread without View, use anytime, anywhere. It's there any idea?

zjupure commented 2 years ago

public ImageSpan(@NonNull Drawable drawable) You can pass the decoded WebpDrawable to build an ImageSpan and work with SpannableString

It's must target TextView. But I want build many SpannableString on background thread without View, use anytime, anywhere. It's there any idea?

You can sync get a WebpDrawable without ImageView/TextView in background.

Drawable drawable = Glide.with(context)
                .load(url)
                .asDrawable()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                .get(); // get a webpdrawable instance
SpannableString string = new SpannableString("Bottom: span.\nBaseline: span.");
 // using the default alignment: ALIGN_BOTTOM
 string.setSpan(new ImageSpan(drawable), 7, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 string.setSpan(new ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BASELINE),
 22, 23, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
hushijian0 commented 2 years ago

public ImageSpan(@NonNull Drawable drawable) You can pass the decoded WebpDrawable to build an ImageSpan and work with SpannableString

It's must target TextView. But I want build many SpannableString on background thread without View, use anytime, anywhere. It's there any idea?

You can sync get a WebpDrawable without ImageView/TextView in background.

Drawable drawable = Glide.with(context)
                .load(url)
                .asDrawable()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                .get(); // get a webpdrawable instance
SpannableString string = new SpannableString("Bottom: span.\nBaseline: span.");
 // using the default alignment: ALIGN_BOTTOM
 string.setSpan(new ImageSpan(drawable), 7, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 string.setSpan(new ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BASELINE),
 22, 23, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

It doesn't work fine, also PNG isn't. Get drawable successfully and build SpannableString successfully, but neither ImageSpan is show nor its Span text is show when used in TextView. It's work fine if PNG is used asBitmap. I am using it in the live broadcast public screen as RecycleView Item.

zjupure commented 2 years ago

You should start and refresh animation by yourself when used in TextView not ImageView. The following sample code would work and I have tested in sample project. (https://github.com/zjupure/GlideWebpDecoder/commit/864a5058a0b89d29b9d9e30687a8c503ade12f5a)

Drawable drawable = GlideApp.with(MainActivity.this)
                        .load(webpUrl)
                        .diskCacheStrategy(DiskCacheStrategy.ALL)
                        .into(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                        .get(); // get a webp drawable instance
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
if (drawable instanceof WebpDrawable) {
    ((WebpDrawable) drawable).start();  // start animation
}
mCallback = new Drawable.Callback() {
    @Override
    public void invalidateDrawable(@NonNull Drawable who) {
        // drive TextView to redraw and draw ImageSpan again
        mTextView.postInvalidate();
    }

    @Override
    public void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) {

    }

    @Override
    public void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) {

    }
};
drawable.setCallback(mCallback);
SpannableString ss = new SpannableString("This is a webp span ");
// using the default alignment: ALIGN_BOTTOM
ss.setSpan(new ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BOTTOM), ss.length() - 1, ss.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTextView.setText(ss);

To show WebpDrawable in ImageSpan and TextView, you should bind a Drawable.Callback and it is the key step. For another way, you can rewrite a custom TextView to support this feature and it will be more complicated.

hushijian0 commented 2 years ago

You should start and refresh animation by yourself when used in TextView not ImageView. The following sample code would work and I have tested in sample project. (864a505)

Drawable drawable = GlideApp.with(MainActivity.this)
                        .load(webpUrl)
                        .diskCacheStrategy(DiskCacheStrategy.ALL)
                        .into(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL)
                        .get(); // get a webp drawable instance
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
if (drawable instanceof WebpDrawable) {
    ((WebpDrawable) drawable).start();  // start animation
}
mCallback = new Drawable.Callback() {
    @Override
    public void invalidateDrawable(@NonNull Drawable who) {
        // drive TextView to redraw and draw ImageSpan again
        mTextView.postInvalidate();
    }

    @Override
    public void scheduleDrawable(@NonNull Drawable who, @NonNull Runnable what, long when) {

    }

    @Override
    public void unscheduleDrawable(@NonNull Drawable who, @NonNull Runnable what) {

    }
};
drawable.setCallback(mCallback);
SpannableString ss = new SpannableString("This is a webp span ");
// using the default alignment: ALIGN_BOTTOM
ss.setSpan(new ImageSpan(drawable, DynamicDrawableSpan.ALIGN_BOTTOM), ss.length() - 1, ss.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTextView.setText(ss);

To show WebpDrawable in ImageSpan and TextView, you should bind a Drawable.Callback and it is the key step. For another way, you can rewrite a custom TextView to support this feature and it will be more complicated.

In this way, it still needs to bind a TextView when build the SpannableString, this is terrible, not what I want. Maybe rewrite a custom TextView is the way to go. Thanks a lot.