在listview中使用Glide加载图片,界面跳动?

renjingwei 发布于 2016/03/10 09:26
阅读 5K+
收藏 2

现在项目做的一个聊天软件,聊天的图片使用glide加载

图片的缩略图以Base64形式保存在数据库中


聊天界面会展示gif 和 普通图片显示在不同的控件里,每次getview 会释放 gif资源

具体我的使用方式是:

//避免gif内存泄漏
        if (null != gif_iv){
            Drawable d = gif_iv.getDrawable();
            if (d instanceof GifDrawable) {
                ((GifDrawable) d).recycle();
            }
        }
        

        String miniMapStr_Base64 = "";
        if (message.getMessageType() == MessageType.IMAGE) {
            ImageFileInfo imageFileInfo = (ImageFileInfo) message.getFileInfo();
            miniMapStr_Base64 = imageFileInfo.getMiniMap();
        } else {
            VideoFileInfo imageFileInfo = (VideoFileInfo) message.getFileInfo();
            miniMapStr_Base64 = imageFileInfo.getMiniMap();
        }

        byte[] bytes = Base64.decode(miniMapStr_Base64, Base64.NO_WRAP);
        if (bytes == null) {
            return false;
        }

        if (message.getMessageType() == MessageType.IMAGE){
            String fileName = fileFolder + message.getMessageId();
            if (!TextUtils.isEmpty(message.getFileInfo().getFileExt())){
                fileName += "." + message.getFileInfo().getFileExt();
            }
            File file = new File(fileName);
            if (file.exists()){//文件已经下载、解密过
                if (message.getFileInfo().getFileExt().equalsIgnoreCase("gif")){
                        try {
                            GifDrawable gifDrawable = new GifDrawable(fileName);
                            gifDrawable.start();
                            gif_iv.setImageDrawable(gifDrawable);
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                }else {//普通图片依然展示缩略图
                    BitmapFactory.Options options = new BitmapFactory.Options();
                    options.inJustDecodeBounds = true;
                    BitmapFactory.decodeByteArray(bytes, 0, bytes.length,options);
                    Glide.with(activity).load(bytes).override(options.outWidth,options.outHeight).into(iv);
                }
            }else {//图片不存在,就直接下载
                if (message.getFileInfo().getFileExt().equalsIgnoreCase("gif")){
                    Bitmap bitmap = BitmapFactory.decodeByteArray(bytes, 0, bytes.length);
                    gif_iv.setImageBitmap(bitmap);
                }else {
                    BitmapFactory.Options options = new BitmapFactory.Options();
                    options.inJustDecodeBounds = true;
                    BitmapFactory.decodeByteArray(bytes, 0, bytes.length,options);
                    Glide.with(activity).load(bytes).override(options.outWidth,options.outHeight).into(iv);
                }
								/////下载、解密
            }
        }else {

            BitmapFactory.Options options = new BitmapFactory.Options();
            options.inJustDecodeBounds = true;
            BitmapFactory.decodeByteArray(bytes, 0, bytes.length,options);
            Glide.with(activity).load(bytes).override(options.outWidth,options.outHeight).into(iv);
        }

        return true;
XML 关键代码:
<FrameLayout
            android:id="@+id/fl_pic_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="@dimen/padding_40"
            android:layout_marginRight="@dimen/padding_8"
            android:layout_toLeftOf="@id/iv_userhead"
            android:background="@drawable/chatto_bg"
            android:paddingLeft="@dimen/padding_4"
            android:paddingTop="@dimen/padding_4"
            android:paddingRight="@dimen/padding_8"
            android:paddingBottom="@dimen/padding_4"
            android:layout_marginLeft="@dimen/padding_8">

            <pl.droidsonroids.gif.GifImageView          显示普通图片
                android:id="@+id/iv_sendPicture"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxWidth="@dimen/chat_img_max_width"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                android:layout_gravity="center"/>

            <pl.droidsonroids.gif.GifImageView            显示gif
                android:id="@+id/iv_sendPicture_gif"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxWidth="@dimen/chat_gif_max_width"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                android:layout_gravity="center"
                android:visibility="gone"/>

            <common.view.CircleProgressBar
                android:id="@+id/progressBar"
                android:layout_width="@dimen/padding_32"
                android:layout_height="@dimen/padding_32"
                android:layout_gravity="center"
                android:visibility="invisible" />
        </FrameLayout>

在聊天界面滑动时  图片会跳动,从第一个直接跳到第三个 等等


求教 这是什么原因?

加载中
0
qichuan
qichuan
可能是Glide库本身的问题,可以考虑使用Fresco https://github.com/facebook/fresco,我在我的项目里使用Fresco加载gif,没有这个问题。
0
r
renjingwei

引用来自“qichuan”的评论

可能是Glide库本身的问题,可以考虑使用Fresco https://github.com/facebook/fresco,我在我的项目里使用Fresco加载gif,没有这个问题。
和gif没有关系,出现这个原因是 控件是wrap_content的,不是固定高度, 当上边的item露出一点点的时候,glide就把上边图片加载出来了,然后就会将下边的图片顶下去,效果上看好像是跳跃了 。
我们尝试了UIL,fresco等等,发现只有UIL 不会出现这种问题,但是UIL 不支持加载本地图片。。

不过glide 真的不适合加载gif,很容易出现OOM,最终我们项目里牵涉到gif的,使用了一个GifImageView的控件解决的

0
e
e_e_eclipse

引用来自“qichuan”的评论

可能是Glide库本身的问题,可以考虑使用Fresco https://github.com/facebook/fresco,我在我的项目里使用Fresco加载gif,没有这个问题。

引用来自“renjingwei”的评论

和gif没有关系,出现这个原因是 控件是wrap_content的,不是固定高度, 当上边的item露出一点点的时候,glide就把上边图片加载出来了,然后就会将下边的图片顶下去,效果上看好像是跳跃了 。
我们尝试了UIL,fresco等等,发现只有UIL 不会出现这种问题,但是UIL 不支持加载本地图片。。

不过glide 真的不适合加载gif,很容易出现OOM,最终我们项目里牵涉到gif的,使用了一个GifImageView的控件解决的

请问你们最终如何解决非固定高度图片被顶下去的问题的,万分感谢,不会是给个固定高度把
r
renjingwei
Glide will use the size of the ImageView to limit the size of the image 我们没使用Glide,只是生成了一个size、质量都很小的缩略图,直接使用Image的
0
xiabing082
xiabing082

http://blog.csdn.net/xiabing082/article/details/52561428

要是加载更多高度不固定的图片闪烁的话,可以看看,


返回顶部
顶部